小米商城首页导航

原创 2019-08-29 14:51:41 581
摘要:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, in

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>小米商城首页</title>

   <style>

       *{

           margin: 0;

           padding: 0;

       }

       html{

           list-style: none;

           text-decoration: none;

       }

       a{

           color: #ccc;

           cursor: pointer;

       }

       .clear{

           clear:both;

       }

   .header{

       width: 100%;

       height: 40px;

       background: black;

   }

   .header_menu{

       width: 1226px;

       height: 40px;

       /* background: pink;  */

       margin:0 auto;

       color:white;

       

    }

    .content-menu-right ul li{

         float: left;

         list-style: none;

         font-size: 10px;

         line-height: 40px;

         

    }

    .content-menu-left{

        float:right;

        font-size: 12px;

    }

    .content-menu-left ul li{

          float:left;

          list-style: none;

          height: 40px;

          line-height: 40px;

          right:0px;

         

    }

    span{


    }

    .content-top{

        width: 1226px;

        height: 66px;

        line-height: 66px;

        margin: 10px auto;

        float:left;

    }

    .content_menu_ul{


    }

    .content_menu_ul li{

       list-style:none;

       float: left;

       margin-right:10px;

       

    }

    .content_form{

        width: 1226px;

        height: 460px;

        background: pink;

    }

    .content_form_menu{

        width: 246px;

        height: 460px;;

        background: #ccc;

    }

    .content-picshop{

        width: 1226px;

        height: 170px;

        background:yellow;

    }

   

    .content-picshop_1{

        width: 235px;height: 170px;background: lightblue;margin-right:14px;float: left

    }

    .content-picshop_2,.content-picshop_3,.content-picshop_4{

       height: 170px;width: 310px;background: red;float: left;margin-right: 14px;

    }

    .content-pixsg{

        width: 1226px;height: 420px;background: #ccc;

    }

    .content-pixsg_1,.content-pixsg_2,.content-pixsg_3,.content-pixsg_4,.content-pixsg_5{

        width: 235px;height:340px;background: lightblue;margin-right: 10px;float: left;

    }

    .content-bottom{

        width: 100%;

        height: 100px;

        background: #ccc;

    }

    .content-bottom1{

        margin:0 auto;

        width: 1226px;

        height: 76px;

        background: pink;


    }

    .foot-top_li_1{

       

    }

   </style>

</head>

<body>

   <div>

    <!-- 头部 -->

    <div class="header">

        <div class="header_menu">

           <div class="content-menu-right">

               <ul>

                   <li><a href="#">小米商城<span>|</span></a></li>

                   <li><a href="#">MIUI<span>|</span></a></li>

                   <li><a href="#">云服务<span>|</span></a></li>

                   <li><a href="#">小爱分享平台<span>|</span></a></li>

                   <li><a href="#">金融<span>|</span></a></li>

                   <li><a href="#">产品<span>|</span></a></li>

                   <li><a href="#">企业服务<span>|</span></a></li>

                   <li><a href="#">SelctRegion</a></li>

               </ul>

            </div>

            <div class="content-menu-left">

                <ul>

                    <li><a href="#">登陆<span>|</span></a></li>

                    <li><a href="#">注册<span>|</span></a></li>

                    <li><a href="#">我的订单<span>|</span></a></li>

                    <li><a href="#">购物车</a></li>

                </ul>

            </div>

        </div>

    </div>

    内容页

    <div class="content-top">

        <div class="content">

            <div class="content_menu">

                <div class="content_menu_pic" style="float: left">

                    <img src="static/img/footlogo.png" alt="">

                    <img src="static/img/logoAD.gif" alt="">

                </div>

                <div class="content_menu_ul">

                    <ul>

                        <li>小米手机</li>

                        <li>红米</li>

                        <li>电视</li>

                        <li>笔记本</li>

                        <li>盒子</li>

                        <li>新品</li>

                        <li>路由器</li>

                        <li>智能硬件</li>

                        <li>服务</li>

                        <li>社区</li>

                    </ul>

                </div>

                <div class="clear"></div>

                <div class="content_form" >

                    <div class="content_form_menu" ></div>

                    <div class="content_form_pic">


                    </div>

                </div>

                <div class="clear"></div>

                <div class="content-picshop">

                   

                    <div class="content-picshop_1"></div>

                    <div class="content-picshop_2"></div>

                    <div class="content-picshop_3"></div>

                    <div class="content-picshop_4"></div>

                </div>

                <div class="clear"></div>

                <div class="content-pixsg">

                    <h2>小米闪购</h2>

                    <div class="content-pixsg_1"></div>

                    <div class="content-pixsg_2"></div>

                    <div class="content-pixsg_3"></div>

                    <div class="content-pixsg_4"></div>

                    <div class="content-pixsg_5"></div>

                </div>

               

               

            </div>

           

           

        </div>

    </div>

   

</body>

</html>


批改老师:天蓬老师批改时间:2019-08-29 15:33:47
老师总结:代码应该放在代码块中提交, 下次留意 一下

发布手记

热门词条