美文网首页
页面布局

页面布局

作者: neko233 | 来源:发表于2018-09-12 10:15 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .nav{
                list-style: none;
                background-color: #AFA;
                width: 1000px;
                margin: 50px auto;
                overflow: hidden;
            }
            .nav li{
                float: left;
                width: 25%;
            }
            .nav a{
                display: block;
                width: 100%;
                text-align: center;
                padding: 10px 0;
                text-decoration: none;
                color: #FF34EE;
                font-weight: bold;
            }
            .nav a:hover{
                background-color: #cc0000;
                color:yellow;
            }
            .header{
                margin: 0 auto;
                background-color: red;
                width: 1000px;
                height: 150px;
            }
            .content{
                width: 1000px;
                height: 400px;
                background-color: orange;
                margin: 0 auto;
                margin-top: 20px;
            }
            .footer{
                width: 1000px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
                margin-top: 20px;
            }
            div .left{
                width: 200px;
                height: 400px;
                background-color: blue;
                float: left;
            }
            div .center{
                width: 500px;
                height: 400px;
                background-color: yellow;
                float: left;
                margin-left: 20px;
            }
            div .right{
                width: 260px;
                height: 400px;
                background-color: #FF34EE;
                float: right;
            }
            div .top{
                width: 100%;
                height: 30%;
                background-color:#dd36ff; 
            }
            div .mid{
                width: 100%;
                height: 40%;
                background-color: #23ddff;
            }
        </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>
        </ul>
        <div class="header"></div>
        <div class="content">
            <div class="left"></div>
            <div class="center">
                <div class="top"></div>
                <div class="mid"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </body>
    </html>
    
    页面布局.png

    相关文章

      网友评论

          本文标题:页面布局

          本文链接:https://www.haomeiwen.com/subject/edimgftx.html