css 一些靈動性的小方法

時間 2019-12-07

標籤 css 一些靈動方法欄目 CSS 简体版

原文原文鏈接

CSS:

1.當鼠標放到一個圖片上的時候，他會給你顯示一些圖片的信息或者是一些其餘的信息。javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .touch{
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .touch .content{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            color: white;
            text-align: center;
            visibility: hidden;
        }
        .touch:hover .content{
            visibility: visible;
        }
        .touch .content .c1{
            font-size: 32px;
            padding: 30px 0;
        }

    </style>
</head>
<body>

    <div class="touch">
        <div><img src="../day26/1.png" width="200" height="200"></div>
        <div class="content">
            <div class="c1">ALEX</div>
            <div class="c2">500-1000(ri)</div>
        </div>
    </div>

</body>
</html>

View Code

實際分爲三層咱們經常使用 ovrflow：hidden 把超出的內容給影藏 position：absolate 以 position：relative 定位常常寫於父級常以它的父級點位 css

visibility: hidden;  隱藏  利用爲類

visibility: visible;  能夠將它顯示出來  通常爲了還能夠啊看到下面的圖片 能夠定義它的透明度

二、在當前頁面超出的內容咱們讓他變成滾動條
ovrflow：hidden

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .pg_top{
                height: 48px;
                background-color: #dddddd;
            }
            .pg_body_menu{
                position: absolute;
                width: 180px;
                background-color: blueviolet;
                left: 0;
            }
            .pg_body_content{
                position: absolute;
                top: 48px;
                left: 190px;
                right: 0;
                bottom: 0;
                background-color: blueviolet;
                overflow: auto;  /*能夠利用overflow變導航條*/
            }
        </style>
    </head>
    <body>
        <div class="pg_top">

        </div>
        <div class="pg_body">
            <div class="pg_body_menu">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
            <div class="pg_body_content">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
        </div>

    </body>
</html>

View Code

3. 尖角圖標，尖角符號是向上，當鼠標點的時候尖角符號向下html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*.c1{*/
                /*border-left: 30px solid yellow;*/
                /*border-right: 30px solid red;*/
                /*border-bottom: 30px solid green;*/
                /*border-top: 30px solid black;*/
                /*display: inline-block;*/
            /*}*/
            .c1{
                border-top: 30px solid yellow;
                border-left: 0px solid green;
                border-bottom: 30px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }

        </style>
    </head>
    <body>
        <div class="c1">

        </div>

    </body>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a1{
                margin: 0 auto;
                width: 800px;
                height: 1000px;
                background-color: #004B97;
            }
            .a2{
                margin-top: 10px;
                width: 829px;
                height: 60px;
                background-color: black;
                float: right;

            }

            .c1{
                margin-left: -29px;

                border: 30px solid transparent;
                border-left: 0px solid red;
                border-top: 0px solid;

                border-right: 30px solid black;
                display: inline-block;
            }

        </style>
    </head>
    <body>
        <div class="a1">
            <div class="a2">

            </div>
            <div class="c1">

            </div>


        </div>


    </body>
</html>

View Code

4. 模態對話框java

就是彈出一個框，而後顯示一些內容（實際上是分爲三層）ide

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .q1{
                background-color: #004B97;
                height: 2000px;

            }
            .q2{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,.6);
                z-index: 2;
            }
            .q3{
                width: 300px;
                height: 300px;
                background-color: yellow;
                color: #000000;
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 3;
                margin-left: -200px;
                margin-top: -200px;
                font-size: 32px;
                text-align: center;
            }
        </style>
    </head>
    <body>
      <div class="q1">
          <h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>
      </div>
      <div class="q2"></div>
      <div class="q3">qqqqq</div>

      <!--<div class="q3"></div>-->


    </body>
</html>

View Code

5 、輸入框裏面有圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
              .q1{
                  position: relative;
                  width: 250px;

              }
              .q1 input{
                  height: 30px;
                  width: 150px;
                  padding-right: 50px;
                  float: left;
              }
            .q1 .ren{
                position: absolute;
                top: 8px;
                left: 170px;
                float: left;
            }
        </style>
    </head>
    <body>
         <div class="q1">
             <input type="text" value="123">
             <span class="ren">r</span>

         </div>

    </body>
</html>

View Code

商品加減框字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .wrap{
            height: 22px;
            width: 150px;
            border: 1px solid #ddd;
        }
        .wrap .minus{
            height: 22px;
            width: 22px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
        }
            .wrap .count input{
            padding: 0;
            border: 0;
            width: 104px;
            height: 22px;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .wrap .plus{
            height: 22px;
            width: 22px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
        }
        /*.wrap .count input{*/
            /*padding: 0;*/
            /*border: 0;*/
            /*width: 104px;*/
            /*height: 22px;*/
            /*border-left: 1px solid #dddddd;*/
            /*border-right: 1px solid #dddddd;*/
        /*}*/


    </style>
</head>
<body>
     <div class="wrap">
         <div class="minus left" onclick="Minus();">-</div>
         <div class="count left">
             <input id="count" type="text" value="456">
         </div>
         <div class="plus left" onclick="Plus(); ">+</div>

     </div>
<script type="text/javascript">
    function Plus() {

        var old_str = document.getElementById("count").value;
        var old_int = parseInt(old_str);
        var new_int = old_int + 1;
        document.getElementById("count").value = new_int;
    }
    function Minus() {
        var old_str = document.getElementById("count").value;
        var old_int = parseInt(old_str);
        var new_int = old_int - 1;
        document.getElementById("count").value = new_int
    }

</script>

</body>
</html>

View Code

六、當鼠標點上會出現邊框字體顏色會變spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .q1{
                background-color: #004B97;
                border: 1px solid transparent;
            }
            .q1:hover{
                border: 1px solid red;
            }
            .q1:hover .q3{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="q1">
            <div class="q2">1111</div>
            <div class="q3">2222</div>
        </div>
    </body>
</html>