美文网首页
网页布局

网页布局

作者: 张露锋 | 来源:发表于2018-11-23 09:01 被阅读0次

    主页:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>识货-高性价比商品导购</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .body{
                width: 1519px;
                height:3191px;
                background-color:orange;
                margin: 0 auto;
            }
            .shihuo-nav-area{
                width: 1519px;
                height: 125px;
                background-color: yellowgreen;
                margin: 0 auto;
            }
            
            
            .top-nva-list-small-index{
                width: 1519px;
                height: 75px;
                background-color: yellow;
                margin-top:3px;
                margin-bottom: 3px;
                
            }
            .shihuo-content-warp{
                width: 1519px;
                height: 2532px;
                background-color: green;
                margin-top:6px;
                margin-bottom: 6px;
                
            }
            .main{
                width: 1080px;
                height: 2512px;
                background-color: blue;
                margin: 0 auto;
            }
            .top-block{
                width: 1080px;
                height: 340px;
                background-color: red;
                margin: 0 auto;
            }
            .left-menu{
                width: 250px;
                height: 340px;
                background-color: brown;
                float: left;
                
            }
            .center-banner{
                width: 540px;
                height: 340px;
                background-color: orange;
                float: left;
                margin-left:10px;
                margin-right:10px;
            }
            .right-block{
                width: 270px;
                height: 340px;
                background-color: brown;
                float: left;
                
            }
            .list-block{
                width: 1080px;
                height: 2162px;
                background-color:yellow;
                margin-top:5px;
                
            }
            .list-array{
                width: 800px;
                height: 2102px;
                background-color:red;
                
            }
            .list-youhui{
                width: 770px;
                height: 302px;
                background-color:brown;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
                
            }
            .list-v1{
                width: 770px;
                height: 210px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .list-v2{
                width: 770px;
                height: 210px;
                background-color:brown;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .list-v3{
                width: 770px;
                height: 210px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .list-v0{
                width: 770px;
                height: 350px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                
            }
            .a1{
                width: 200px;
                height: 310px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
                float: left;
            }
            .a2{
                width: 200px;
                height: 310px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
                float: left;
            }
            .a3{
                width: 200px;
                height: 310px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
                float: left;
            }
            .list-v4{
                width: 770px;
                height: 210px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .list-v5{
                width: 770px;
                height: 210px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .list-v6{
                width: 770px;
                height: 210px;
                background-color:orange;
                margin: 6px 6px 6px 6px;
                border: white solid 6px;
            }
            .jxhw{
                width: 260px;
                height: 504px;
                background-color:orange;
                margin-bottom: 10px;
                border: white solid 6px;
                float: right;
            }
            .hot-group{
                width: 260px;
                height: 504px;
                background-color:orange;
                
                border: white solid 6px;
                float: right;
            }
    
    
            .right-block1{
                width: 300px;
                height: 1223px;
                background-color:orange;
                margin-left:10px;
                float: right;
                
            }
            .footer{
                width: 1519px;
                height: 448px;
                background-color:yellow;
                
                
            }
            .logos-box{
                width: 1080px;
                height: 85px;
                background-color: #edd6d6;
                margin: 0 auto;
            }
            .nav-area{
                width: 1519px;
                height: 40px;
                background-color:red;
                margin: 0 auto;
            }
            .area-min{
                width: 1080px;
                height: 40px;
                background-color:red;
                margin: 0 auto;
            }
            .nav-area-right{
                width: 102px;
                height: 40px;
                background-color:red;
                float: right;
            }
            .unsign{
                width: 87px;
                height: 40px;
                background-color:red;
                text-align: center;
                line-height: 35px;
                margin: 0 auto; 
                float: left;
            }
            .unsign a{
                /* display: block; */
                width: 100%;
                text-decoration: none;
                color: white;
                font-weight: bold;
    
                
            }
             .nav{
                
                list-style: none;
                background-color: red;
                width: 768px;
                float: left;
                overflow: hidden;
            }
            .nav li{
                
                float: left;
                width: 12.5%;
                margin: 5px 0 0 0;
            }
            .nav a{
                
                                                                                                                                     
                width: 100%;
                text-align: center;
                padding: 5px 0;
                text-decoration: none;
                color: white;
                font-weight: bold
            }
        </style>
    </head>
    <body>
        <div class="body">
            <div class="shihuo-nav-area">
                <div class="logos-box"></div>
                <div class="nav-area">
                    <div class="area-min">
                        <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>
                            <li><a href="#">晒物</a></li>
                            <li><a href="#">推荐店铺</a></li>
                            <li><a href="#">兑换中心</a></li>
                        </ul>
                        <div class="nav-area-right">
                            <div class="unsign">
                                <a href="登录识货社区.html">登录&nbsp;|&nbsp;</a><a href="#">注册</a>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-nva-list-small-index"></div>
            <div class="shihuo-content-warp">
                <div class="main">
                    <div class="top-block">
                        <div class="left-menu"></div>
                        <div class="center-banner"></div>
                        <div class="right-block"></div>
                    </div>
                    <div class="list-block">
                        
                        <div class="right-block1">
                            <div class="jxhw"></div>
                            <div class="hot-group"></div>
                        </div>
                        <div class="list-array">
                            <div class="list-youhui"></div>
                            
                            <div class="list-v1"></div>
                            <div class="list-v2"></div>
                            <div class="list-v3"></div>
                            <div class="list-v0">
                                <div class="a1"></div>
                                <div class="a2"></div>
                                <div class="a3"></div>
                            </div>
                            <div class="list-v4"></div>
                            <div class="list-v5"></div>
                            <div class="list-v6"></div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="footer">
    
                    <img src="img/1.png" height="448" width="1519" >
            </div>
        </div>
        
    </body>
    </html>
    
    
    

    登录:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>登录识货社区</title>
            <style type="text/css">
                .bg-img{
                    width: 1503px;
                    height: 668px;
                }
                .user-login{
                    width: 540px;
                    height: 623px;
                    background-color: white;
                    margin: 0 auto;
                    padding: 15px 0 0 0;
                }
                .back-title{
                    width: 540px;
                    height: 28px;
                    background-color: yellow;
                }
                .back-title a{
                    color: white;
    
                }
                .login-warp{
                    width: 380px;
                    height: 510px;
                    padding: 40px 80px 30px 80px;
                    background-color: red;
                }
                .logo{
                    width: 380px;
                    height: 54px;
                    margin-bottom: 40px;
                    background-color: yellow;
                }
                .lo{
                    width: 220px;
                    height: 54px;
                    margin: 0 auto;
                }
                .login{
                    width: 380px;
                    height: 337px;
                    background-color: white;
                }
                .login-metnod{
                    width: 540px;
                    height: 26px;
                    
                }
                .login-metnod a{
                    display: block;
                    color: blue;
                    text-decoration: none;
                    float: left;
                }
            </style>
        </head>
        <body>
            <div class="bg-img">
                <div class="user-login">
                    <div class="back-title">
                        <a href="xiangmu.html">
                            <b><<</b>
                            返回上页
                        </a>
                    </div>
                    <div class="login-warp">
                        <div class="logo">
                            <div class="lo">
                                <img src="img/logo-shihuo.png">
                            </div>
                        </div>
                        <div class="login"></div>
                        <div class="login-metnod">
                            <a href="#">微信登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                            <a href="#">qq登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                            <a href="#">手机短信快捷登录</a>
                        </div>
                    </div>
                </div>
            </div>  
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:网页布局

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