CSS应用内容补充及小实例

一.clear

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{   /*善用after和defore*/
            content: "111";  /*注意加引号*/
            clear: both;
            display: block;
            visibility: hidden;  /*隐藏并有高度*/
            height: 0;   /*去掉高度*/
        
        }
        .c{
            width: 100px;
            /*height: 100px;*/
            background-color:red;
        }
        .c .item{
            float:left;
            width:30px;
            background-color: green ;
        }

    </style>
</head>
<body>
    <div class='c clearfix'>
        <div class='item'>123</div>
        <div class='item'>456</div>

    </div>

    <div class="test">内容</div>
</body>
</html>

定义公共样式clearfix

避免每次都写标签clear:both来清除浮动

二.hover

样式一：

　　为伪类加边框效果

<!DOCTYPE html>
<html lang="en">
<!--伪类1-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0}
        .ele{
            border: 2px solid transparent;
        }
        .ele:hover {
            border: 2px solid red;
        }
        .ele:hover .ele_item{
            color: red;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div class="ele_item">
            123
        </div>
        test
    </div>

</body>
</html>

样式一

　　加图片文字

<!DOCTYPE html>
<html lang="en">
<!--伪类2-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            width: 200px;
            height: 169px;
            overflow: hidden;
            position: relative;
        }
        .main .content{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #666666;
            opacity: 0.7;
            text-align: center;
            visibility: hidden;
        }
        .main:hover .content{
            visibility: visible;
        }
        .main .content .c2{
            color: red;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="images"><img src="a.png"></div>
        <div class="content">
            <div>test</div>
            <div class="c2">ttttt</div>
        </div>
    </div>
</body>
</html>

样式二

Z-index可被用于将在一个元素放置于另一元素之后

三.position

　　规定元素的定位类型

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移

属性值

例：

<!DOCTYPE html>
<html lang="en">
<!--position-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .main{
            background-color: whitesmoke;
            height: 800px;
        }
        .main .pos{
            position: fixed;
            right: 10px;
            bottom: 10px;
            width: 50px;
            height: 50px;
            background-color: rosybrown;
        }
        .main .pos2{
            position: relative;
            background-color: burlywood;
            width: 800px;
            margin: 0 auto;
            height: 100px;

        }

        .main .pos2 .little_div{
            position: absolute;
            background-color: darksalmon;
            width: 100px;
            height: 30px;
            left: 0;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="main">
        <div class="pos2">
            <div class="little_div"></div>
        </div>
        <div class="pos"></div>
    </div>


</body>
</html>

View Code

relative与absolute并用

四.实现小尖角

通过设置边框实现小尖角效果，如

<!DOCTYPE html>
<html lang="en">
<!--下拉尖角-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid green;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down{
            border-top: 30px solid green;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .c1{
            border: 30px solid transparent;
            border-top: 30px solid green;
            display: inline-block;
            margin-top: 40px;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            display: inline-block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
    <div style="height: 100px;background-color: #666666">
        <div class="c1"></div>
    </div>

</body>
</html>

小尖角

五.图标

一般实现制作图标有三种方式：

图片（自定义）
CSS实现
fontawsome

本例引用第三方，fontawsome，网址：http://fontawesome.io/icons/

首先下载解压，引用，使用方法，例：

<!DOCTYPE html>
<html lang="en">
<!--图标-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
    <span class="icon-dollar"></span>
</body>
</html>

View Code

六.important

CSS写在不同的地方有不同的优先级， .css文件中的定义 < 元素style中的属性，但是如果使用!important，事情就会变得不一样

css定义中的用!important限定的定义却是优先级最高的

格式：

Tag：css   !important

例：

<!DOCTYPE html>
<html lang="en">
<!--important-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 16px;
            color: red;
            font-weight: bold;
        }
        .limit{
            color: orchid !important;
        }

    </style>
</head>
<body>
    <div>
        <p>没应用样式</p>
    </div>
    <div >
        <a class="limit">应用了</a>
        <p>hello</p>
    </div>
</body>
</html>

important应用

七.overflow

　　规定溢出元素的首选滚动方法

例：

<!DOCTYPE html>
<html lang="en">
<!--页面布局-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0px}
        .top{
            background-color: #666666;
            height: 30px;
        }
        .center .center_left{
            position: absolute;
            background-color: antiquewhite;
            width: 110px;
            left: 0;
        }
        .center .content{
            position: absolute;
            background-color: #2459a2;
            top: 30px;
            left: 112px;
            right: 0;
            bottom: 0;
            overflow: auto;
        }

    </style>
</head>
<body>
    <div class="top"></div>
    <div class="center">
        <div class="center_left">
            <ul>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </div>
        <div class="content">
            <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
            <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
            <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
            <h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1><h1>标题</h1>
        </div>
    </div>

</body>
</html>

内容溢出滚动

八.小实例

1.登录框

<!DOCTYPE html>
<html lang="en">
<!--登录框-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login_des{
            position: relative;
            width: 200px;
        }
        .login_des .user_info{
            width: 160px;
            height: 30px;
            padding-right: 30px;
        }
        .login_des .user_logo{
            position: absolute;
            top: 8px;
            left: 170px;
        }
    </style>
</head>
<body>
<div class="login_des">
    <input type="text" class="user_info">
    <span class="user_logo">R</span>
</div>

</body>
</html>

2.提示框

边缘标签：relative，absolute

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style>
            a {color: #428bca;
                text-decoration: none;
            }

            .modal-backdrop {
              position: fixed;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 1050;
              background-color: #white;
              opacity: 0.8;
            }

            .modal {
              position: fixed;
              top: 30%;
              left: 50%;
              z-index: 1030;
            }

            .hide {
                display:none; 
            }
</style>

        
    </head>
    <body>
        <div>
            <input type="button" onclick="fadeIn();"  value="模态对话框"/>
        </div>
        <div id="shade" class="modal-backdrop hide">
            <div  class="modal">
                <img src="./images/loading_32.gif"/>
            </div>
        </div>
        <script >
            function fadeIn() {
                document.getElementById('shade').className = 'modal-backdrop';
            }

            function fadeOut() {
                document.getElementById('shade').className = 'modal-backdrop hide';
            }
        </script>
    </body>
</html>

View Code

3.购物产品选择框

<!DOCTYPE html>
<html lang="en">
<!--加减框-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0}
        .left{
            float: left;
        }
        .select{
            background-color: #999999;
            height: 25px;
            width: 140px;
            border: 1px solid darksalmon;
        }
        .select .minus{
            width: 20px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
        }
        .select .plus{
            width: 20px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
        }

        .select .content input{
            width: 88px;
            height: 23px;
            border: 0;
            border-left: 1px solid darksalmon;
            border-right: 1px solid darksalmon;
        }
    </style>
</head>
<body>
    <div class="select">
        <div class="minus left" onclick="Minus()">-</div>
        <div class="content left">
            <input id = "count" type="text" name="num" value="0"/>
        </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