css 一些灵动性的小方法

Posted 风雨中奔跑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 一些灵动性的小方法相关的知识，希望对你有一定的参考价值。

CSS:

1.当鼠标放到一个图片上的时候，他会给你显示一些图片的信息或者是一些其他的信息。

 

<!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 定位    经常写于父级  常以它的父级点位 

visibility: hidden;  隐藏  利用为类
visibility: visible;  可以将它显示出来  一般为了还可以啊看到下面的图片 可以定义它的透明度

2、在当前页面超出的内容我们让他变成滚动条
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. 尖角图标，尖角符号是向上，当鼠标点的时候尖角符号向下







<!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. 模态对话框


就是弹出一个框，然后显示一些内容（其实是分为三层）








<!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




6、当鼠标点上会出现边框 字体颜色会变






<!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>



View Code


7 、cursor:pointer: 变小手


 8、z-index 在同一位置定义两标签（都定住，那么后面的标签回哪前面的标签覆盖掉，这样我们就可以用z-index的大小来决定位置）


<"position:fixed;left:0;right:0;height:50px;"></div>


<div style="position:fixed;left:0;right:0;height:50px;"></div>


9、 页面中的小图标


1、自己用css画


2、用别人的   http://fontawesome.io/3.2.1/icons/ 下载并导入 <link rel="stylesheet" href="font-awesome/css/font-


awesome.css">


10 、 目录格式


HTML 文件放到APP中


css样式放到css文件夹中


js文件放到script 文件中


下载的第三方插件放到plugin中


 


 














































 


以上是关于css  一些灵动性的小方法的主要内容，如果未能解决你的问题，请参考以下文章
 

 Android课程---Android Studio使用小技巧：提取方法代码片段


 灵动微MM32产品特色及应用市场


 css 在保持可访问性的同时隐藏一些文本


 炫酷 CSS 背景效果的 10 个代码片段


 设计模式 | 001 ※ 灵动的JavaScript


 VSCode自定义代码片段——CSS选择器