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>

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>

六.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>

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>