前端css--补充

input 默认勾选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <input value="112"/>
        <textarea>123</textarea>
        <select>
            <option>上海</option>
            <option selected="selected">广州</option>
            <option>背景</option>
        </select>
        男：<input type="radio" name="g1" />
        女：<input type="radio" name="g1" checked="checked" />

        <input type="checkbox" name="c1" checked="checked" />
        <input type="checkbox" name="c1" />
        <input type="checkbox" name="c1" checked="checked"/>
        <input type="checkbox" name="c1" />

</body>
</html>

 显示效果：

 

 

 

css 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[alex='a']{
            color:red;
        }
    </style>
</head>
<body>
    <div class="c1" alex="a">1</div>
    <div class="c1" alex="b">2</div>
    <div class="c1">3</div>
    <div class="c1" alex="a">4</div>


</body>
</html>

 显示效果：

 

 3.设置class优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;!important;
        }
        .c2{
            color:green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">asdfdfasfdasdf</div>
</body>
</html>

显示效果

 

 

 4.输入框中的小图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon-name{
            background-image: url('i_name.jpg');
            height: 16px;
            width: 16px;
            display: inline-block;
        }
        .icon-pwd{
            background-image: url('i_pwd.jpg');
            height: 16px;
            width: 16px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div style="width: 200px;position: relative">
        <input style="width: 180px;padding-right: 20px;"/>
        <span class="icon-name" style="position: absolute;top:2px;right:0;"></span>
    </div>

</body>
</html>

显示效果：

 

 

5.图标插件fontawesome

官网下载地址

http://www.bootcss.com/p/font-awesome/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css" />
</head>
<body>
    <i style="color: red;" class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>
</body>
</html>

 

显示效果

 

6.清除浮动格式，填充背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }
    </style>

</head>
<body>

    <div style="background-color:red" class="clearfix">
        <div class="left" style="height: 100px; background-color: green">1</div>
        <div class="left">2</div>
    </div>

</body>
</html>

显示效果

 7.css制作尖角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .icon{
                display: inline-block;
                border-top: 15px solid red;
                border-right: 15px solid green;
                border-bottom: 15px solid blue;
                border-left: 15px solid black;


            }

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

</body>
</html>

显示效果：

 

8.网站后台页面布局

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top:48px;
            left:210px;
            right: 0;
            /*bottom:0;*/
            background-color: green;

        }

    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>

        </div>
    </div>
</body>
</html>

显示效果：

 

 内容滚动，上栏和左侧栏始终显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
        }
        .pg-body .body-menu{
            position: absolute;
            top:48px;
            left:0;
            bottom:0;
            width: 200px;
            background-color: red;
        }
        .pg-body .body-content{
            position: absolute;
            top:48px;
            left:210px;
            right: 0;
            bottom:0;
            background-color: green;
            overflow: auto;
        }

    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
     adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
            adafasfsdfasfd<br/>adafasfsdfasfd<br/>adafasfsdfasfd<br/>
        </div>
    </div>
</body>
</html>

 

显示效果：

 

posted @ 2016-08-18 19:41  不是云  阅读(120)  评论(0)  编辑  收藏  举报