html中的faker

2018-03-29  本文已影响0人  v_c61b
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style type ="text/css">
    *{
        margin:0;
        padding:0;

    }
    .nav{

        list-style:none;
        width:1000px;
        background-color:red;
        margin:100px auto;
        overflow:hidden;



    }

    .nav li{


            float:left;
            width:20%;
        
    }
    .nav a{
            display:block;
            text-align:center;
            padding:5px 0;
            text-decoration:none;
            font-weight:bold;
            color:white;

        }

    .nav a:hover{

        background-color:black;


        }
        </style>
</head>
<body>
        <ul class="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">社会</a></li>
            <li><a href="#">生活</a></li>
            <li><a href="#">奇闻</a></li>

        </ul>


</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
    *{
        padding:0;
        margin:0;
    }


    .q{
        height:80px;
        width:1133px;
        background-color:white;
        border:gold 2px solid;
                margin:50px auto;

    }
    .w{

        width:120px;
        height:60px;

        float:left;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;



    }

    .e{

        width:120px;
        height:60px;
        float:left;
        border-left:2px gold solid;
        border-right:2px gold solid;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;

    }


    .r{

        width:120px;
        height:60px;
        float:left;
        border-right:1px gold solid;
        font-size:25px;
        font-family:"微软雅黑";
        font-weight:bold;
        color:pink;
        padding:10px 20px;



    }





    .t{
        width:120px;
        height:60px;
        float:left;
        border-left:1px gold solid;
        border-right:1px gold solid;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;






    }


    .y{
        width:120px;
        height:60px;
        float:left;
        border-left:1px gold solid;
        border-right:1px gold solid;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;



    }


    .u{

        width:120px;
        height:60px;
        float:left;
        border-left:1px gold solid;
        border-right:1px gold solid;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;



    }
    .i{

        width:120px;
        height:60px;
        float:left;
        border-left:1px gold solid;
        font-size:25px;
        font-weight:bold;
        font-family:"微软雅黑";
        color:pink;
        text-align:center;
        padding:10px 20px;

    }


    </style>
    </head>
<body>
        <div class="q">
            <div class="w">首页</div>
            <div class="e">公司简介</div>
            <div class="r">解决方案</div>
            <div class="t">公司新闻</div>
            <div class="y">行业动态</div>
            <div class="u">招贤纳才</div>
            <div class="i">联系我们</div></div>


</body>
</html>
image.png

...

上一篇 下一篇

猜你喜欢

热点阅读