HTML、CSS基础补充

输入框默认值设置

<!--单行与多行输入框默认值-->
<input value="xxx" />
<textarea>123</textarea>

下拉框默认值设置

<!--select下拉框默认选择设置-->
<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"/>
<input type="checkbox" name="c1" checked="checked"/>

 CSS 强制优先级为最高设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            /*使用!important 强制此样式优先级最高*/
            background-color: red !important;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">testxxxxxxxxxxx</div>
</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>

 CSS实现用户名密码登录框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--登录输入input时，input框中的用户和密码图标-->
    <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: 19px;
        width: 14px;
        display: inline-block;
    }
    </style>
</head>
<body>
    <!--定义一个标签，设置relative，并设置absolute的span-->
    <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>
    <div style="width: 200px;position: relative">
        <input type="password" style="width: 180px;padding-right: 20px;" />
        <span class="icon-pwd" style="position: absolute;top: 2px;right: 0;"></span>
    </div>
</body>
</html>

 CSS利用伪类清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .clearer:after{
            /*增加一个点，撑起一行*/
            content: '.';
            clear: both;
            /*使用块级*/
            display: block;
            /*隐藏增加点*/
            visibility: hidden;
            height: 0;
        }
    </style>
</head>　　
<body>
    <!--清除浮动-->
    <div style="background-color: red" class="clearer">
        <div class="left" style="height: 100px;background-color: green">
            1
        </div>
        <div class="left">
            1
        </div>
    </div>
</body>
</html>

CSS自制小三角符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*使用css做出小三角*/
        .icon{
            display: inline-block;
            border-top: 15px solid aqua;
            border-right: 15px solid red;
            border-bottom: 15px solid blue;
            border-left: 15px solid saddlebrown;
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

CSS超出标签范围后出现滚动条设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后台管理页面布局*/
        /*实现内容超出标签后，出现滚动条*/
        body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background-color: blue;
        }
        .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: 200px;
            right: 0;
            bottom: 0;
            background-color: green;
            /*overflow auto  当内容超过高度时，在右侧增加滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="body-menu"></div>
        <div class="body-content">
            testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
            testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
            testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
            testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>testmain<br/>
        </div>
    </div>
</body>
</html>
demo
posted @ 2016-08-20 00:57  Cool_King  阅读(202)  评论(0)  编辑  收藏  举报