链条传动

砥砺前行,不忘初心!

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

CSS引用说明

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
        <!--css外部引用-->
        <link rel="stylesheet" href="css/common.css" />

        <!--css内部引用-->
        <style>
            <!--标签中class名为logo时使用‘.’-->
            .logo{
                background-color: blue;
                font-size: 18px;
                border: 1px solid #fff;
            }
            <!--标签中所有id名为alex时使用‘#’-->
            #alex{
                background-color: yellow;
                font-size: 18px;
                border: 1px solid #fff;
                }
            <!--对所有div、a标签生效-->
            div,a{
                color: red;
                }
            <!--对所有a标签下的div标签生效-->
            a div{
                color: red;
                }
            <!--对所有类型为text的input标签生效-->
            input[type='text']{

            }
        </style>
        
    </head>

    <body>
        <!--css标签内引用-->
        <div style="background-color: red">123</div>
        <div class="logo">456</div>

        <div id="alex">789</div>

    </body>
</html>

 

常用属性示例

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
        <style>
            .logo{
                background-color: red;
                font-size: 18px;
                border: 1px solid #fff;
            }

            .logo a,.logo p{
                background-color: aqua;
                font-size: 50px;
            }
        </style>
        
    </head>

    <body>
        <div class="logo">
            <div>div标签</div>
            <a>a标签</a>
            <p>p标签</p>
        </div>


    </body>
</html>
1.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
        <style>
            .logo{
                top: 9px;
                left: 18px;
                width: 18px;
                height: 16px;
                background: url("img/1.png") 0 -58px no-repeat ;

            }

        </style>
        
    </head>

    <body>
        <div class="logo"></div>


    </body>
</html>
2.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>

    </head>

    <body>
        <div style="border: 1px solid red;">hello</div><br/>
        <div style="border: 1px dotted red;">hello</div><br/>

        <div style="border: 1px solid red;height: 70px;background-color: red">
            <div style="border: 1px dotted blue;height: 30px;margin-top: 30px;background-color: blue"></div>
        </div>

        <div style="border: 1px solid red;height: 70px;background-color: red">
            <div style="border: 1px dotted blue;height: 30px;padding-top: 30px;background-color: gray">hello</div>
        </div>
    </body>
</html>
3.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
    </head>

    <body>
        <!--设置float属性后,要让父div能自适应float块的高度,需添加一个子元素并设置clear属性
            或者父div添加overflow和zoom属性-->
        <div style="overflow: hidden;zoom: 1">
            <div style="background-color: red;float: left;width: 20%">div1</div>
            <div style="background-color: gray;float: left;width: 80%">div2</div>

            <div style="clear:both"></div>
        </div>
    </body>
</html>
4.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
    </head>

    <body>
        <!--
        position:relative、absolute、fixed <br/>
        fixed:固定标签位置
        relative/absolute总是成对出现
        -->
        <!--
        <div style="position: fixed;height: 45px;width: 100%;background-color: red;top: 0px"></div>

        <div style="margin-top: 50px">
            <div style="width: 200px;background-color: gray;position: fixed;top: 50px;bottom:0">left</div>
            <div style="margin-left: 220px;">
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
            </div>
        </div>
        -->

        <div style="position: relative;width: 500px;height: 200px;background-color:gray ">
            <div style="width: 20px;height: 20px;
            position: absolute;left: 0;top: 0;bottom: 0;background-color: red">
            </div>
        </div>
    </body>
</html>
5.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
    </head>

    <body>
        <img src="img/2.jpg">
        <!--透明度属性:opacity,值的范围:0-1-->
        <img src="img/2.jpg" style="opacity: 0.5">
    </body>
</html>
6.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>标题</title>
        <style>
            .shade{
                position: fixed;
                top: 0;
                right:0;
                bottom: 0;
                left: 0;
                background-color: #333;
                opacity: 0.6;
            }
            .delete{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 400px;
                height: 200px;
                background-color: white;
                margin-left: -200px;
                margin-top: -100px;
            }
            .hide{
                display: none;
            }
        </style>
    </head>

    <body>

        <table>
            <tr>
                <th>IP</th>
                <th>编辑</th>
            </tr>
            <tr>
                <td>1.1.1.1</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>2.2.2.2</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>3.3.3.3</td>
                <td>删除</td>
            </tr>
        </table>

        <!--遮罩层-->
        <div class="shade"></div>

        <!--删除层-->
        <div class="delete">
            <div>提示</div>
            <div>确定要删除吗?</div>
            <div>
                <input type="button" value="确定">
                <input type="button" value="取消">
            </div>
        </div>
    </body>
</html>
7.html

 

posted on 2016-09-20 15:17  链条君  阅读(190)  评论(0编辑  收藏  举报