一、.clearfix:after

　　通过设置插件：.clearfix{} ，实现float之后，仍保留父类样式

　　使用clear：both，可实现同样效果，但是在每次需要使用的时候，添加<div>标签clear，很麻烦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>something else</title>
    <style>
        .cfix{
            background-color:red;
            color:pink;
            }
        .cfix .item{
            float:left;
        }

    </style>
</head>
<body>
    <!--here is something else about HTML and CSS-->
    <!--clearifx-->
    <div class="cfix">
        <div class="item">
            没有添加任何样式时，所有items在float后，
        </div>
        <div class="item">
            父类样式的背景消失
        </div>
        <div class="item">
            使用clear：both；可以保留父类样式，同时实现float；
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="cfix">
        <div class="item">
            没有添加任何样式时，所有items在float后，
        </div>
        <div class="item">
            父类样式的背景消失
        </div>
        <div class="item">
            使用clear：both；可以保留父类样式，同时实现float；
        </div>
    </div>

</body>
</html>
View Code

　　推荐：使用伪类的方式，定义插件，实现此功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .father{background-color:red;}
        .item{float:left;height:30px;background-color:pink;}
        .clearfix:after{
            content:'111';
            display:block;
            clear:both;
            visibility:hidden;
            height:0px;
        }
    </style>
</head>
<body>
<!--&lt;!&ndash;方式一：&ndash;&gt;-->
    <!--<div class="father">-->
        <!--<div class="item">-->
            <!--float之后，父层样式消失,-->
        <!--</div>-->
        <!--<div class="item">-->
            <!--想要保留父层样式，可使用clear,-->
        <!--</div>-->
        <!--<div class="item">-->
            <!--但是需要在每一组后面添加标签clear，很麻烦-->
        <!--</div>-->
        <!--<div style="clear:both;"></div>-->
    <!--</div>-->
<!--方式二：-->
    <div class="father clearfix">
        <div class="item">
            使用伪类实现：float之后，保留父类样式；
        </div>
        <div class="item">
            伪类after:添加content内容，设为block并clear，然后隐藏，并将高度设置为0；
        </div>
    </div>
    <div>之后可以紧挨着添加内容</div>
</body>
</html>
View Code

 二、强调

<em>强调时斜体、<strong>强调时加粗、<span>强调时无额外效果

三、hover

（一）hover后加选择器，可设置标签内部元素样式变化

标签使用hover时，不但标签整体样式有所变化，期间各元素也可以设置相应的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .father:hover{border:1px solid red;}
        .father:hover .son{color:blue;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            使用伪类hover时，标签里的内容发生样式变化
        </div>
        <a>上面字体颜色发生变化了</a>
    </div>
</body>
</html>
View Code

（二）hover添加边框时，为保证内容不上下跳动，可提前设置透明边框占位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .father{border:1px solid transparent;}
        .father:hover{border:1px solid red;}
        .father:hover .son{color:blue;}
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            使用伪类hover时，标签里的内容发生样式变化
        </div>
        <a>上面字体颜色发生变化了</a>
        <p>hover添加边框时，为保证内容不上下跳动，可提前设置透明边框，</p>
    </div>
</body>
</html>
View Code

 （三）鼠标hover在一张图片上，显示另一张图的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .touch{
            height:200px;
            width:200px;
            overflow:hidden;
            position:relative;
        }
        .touch .content{
            position:absolute;
            top:0;
            left:0;
            bottom:0px;
            right:0px;
            background-color:rgba(0,0,0,.6);
            color:white;
            text-align:center;
            padding-top:40px;
            font-size:14px;
            visibility:hidden;
        }
        .touch:hover .content{
            visibility: visible;
        }

    </style>
</head>
<body>
    <div class="touch">
        <img src="bu.png">
        <div class="content">
            hover current pic
            show another pic
        </div>
    </div>
</body>
</html>
View Code

四、尖角

不使用图片，直接用代码border相关属性进行设置，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .up{
            border:10px solid transparent;
            border-top:10px solid red;
            display:inline-block;
        }
        .bottom{
            border:10px solid transparent;
            border-bottom:10px solid red;
            display:inline-block;
        }
        .left{
            border:10px solid transparent;
            border-left:10px solid red;
            display:inline-block;
        }
        .right{
            border:10px solid transparent;
            border-right:10px solid red;
            display:inline-block;
        }

        .right:hover{
            border:10px solid transparent;
            border-left:10px solid red;
            margin-left:10px;
        }

    </style>
</head>
<body>
    <div class='up'></div>
    <div class='bottom'></div>
    <div class='left'></div>
    <div class='right'></div>
</body>
</html>
View Code

五、图标

在没有美工特别制作图标时，可以使用开源FONT Awesome，

使用方法：将下载好的数据包添加至项目文件夹，然后在html代码中link导入css文件，便可添加样式使用了，使用时注意在图标前添加：fa fa-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css" >
</head>
<body>
    <div class="fa fa-bath">图标font awesome</div>
</body>
</html>
View Code

六‘、优先级

使用：！important，设置最高优先级，不被任何后续添加的样式覆盖；

另外：style>id>class,与书写的先后顺序无关。

七、后台布局

关于快速布局，常用如下代码中的方式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height:100px;
            background-color:blue;
        }
        .pg-body .menu{
            position:absolute;
            left:0;
            width:100px;
            background-color:pink;
        }
        .pg-body .content{
            position:absolute;
            top:100px;
            right:0;
            left:105px;
            bottom:0;
            overflow:scroll;
            background-color:red;
        }

    </style>

</head>
<body>
    <div class="pg-header">
        <a>关于布局</a>
    </div>
    <div class="pg-body">
        <div class="menu">
            <ul>
                <li>12233</li>
                <li>12233</li>
                <li>12233</li>
                <li>12233</li>
            </ul>
        </div>
        <div class="content">
            <p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
            <p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
            <p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
            <p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
    </div>
    </div>

</body>
</html>
View Code

 八、边缘提示框

边缘提示框，主要使用button按钮的position样式，进行控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .del{
            position:relative;

        }
        .choice{
            position:absolute;
            left:50px;
            top:-20px;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>第一行</td>
            <td>第一行</td>
            <td>
                <div class="del">
                    <input type="button" value="删除">
                    <div class="choice">
                        <input type="button" value="取消">
                        <input type="button" value="确定">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>第二行</td>
            <td>第二行</td>
            <td>
                <div class="del">
                    <input type="button" value="删除">
                    <div class="choice">
                        <input type="button" value="取消">
                        <input type="button" value="确定">
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第三行</td>
            <td>第三行</td>
            <td>第三行</td>
            <td>
                <div class="del">
                    <input type="button" value="删除">
                    <div class="choice">
                        <input type="button" value="取消">
                        <input type="button" value="确定">
                    </div>
                </div>
            </td>
        </tr>
    </table>

</body>
</html>
View Code

九、input中的图标

在用户名或者密码的input栏目中，通常有一个小人图标，按如下方式添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        .regin{
            position:relative;
            width:130px;
        }
        .regin input{
            position:absolute;
            width:110px;
            left:0;
            padding-right:25px;
        }
        .regin .ren{
            position:absolute;
            left:120px;
        }

    </style>

</head>
<body>
    <div class="regin">
        <input type="text">
        <span class="ren">pic</span>
    </div>
</body>
</html>
View Code

十、在屏幕正中显示图片

在屏幕上加蒙板，并始终在屏幕正中显示图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        body{margin:0;}
        .pg-body{
            height:1000px;
            background-color:pink;
            }
        .mengban{
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            background-color:rgba(0,0,0,0.3);
            z-index:2;
        }
        .pic{
            position:fixed;
            height:200px;
            width:200px;
            top:50%;
            left:50%;
            z-index:3;
            background-color:white;
            margin-top:-100px;
            margin-left:-100px;
        }

    </style>

</head>
<body>
    <div class="pg-body">
       <a>屏幕加蒙板，并始终在中心位置显示图片</a>
    </div>
    <div class="mengban"></div>
    <div class="pic"></div>
</body>
</html>
View Code

 十一、加减框

设置加减框，当鼠标指向加、减图标时，鼠标变成手形：cursor：pointer；

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

    </style>

</head>
<body>
    <div class="wrap left">
        <div class="minus left">-</div>
        <div class="content left">
            <input type="text" value="0">
        </div>
        <div class="plus left">+</div>
    </div>

</body>
</html>
View Code