用HTML和CSS制作简单的静态网页_南柯_用html与css制作网页大全

irpas 02-07 2593

用HTML和CSS制作简单的静态网页（小米商城）

网页效果如下：

代码如下

（第一次写静态网页，中间css代码和html代码没有分离，所以代码可能有点乱还请见谅） 1、css代码

/*--------------------------------------------01-----------------------------------------------------------*/ *{ margin: 0; padding: 0; } /*清除标志*/ li{ list-style: none; } /*清除下划线*/ a{ text-decoration: none; } .tp{ height: 120px; width: 1360px; } /*把li向左浮动，然后设置一个右边的外边距（就是空格）*/ .ul li{ float: left; padding-right: 15px; } .ul li a{ color: rgb(176,176,176); } .ul li a:hover{ color: white; } /*------------------------------------------02-------------------------------------------------------------*/ .shopping{ float: right; } /*a是内联元素，先改成块元素，然后设置外边距*/ .shopping a{ display: block; padding: 0px 50px; color: rgb(176,176,176); } .shopping a:hover{ background-color: saddlebrown; } .right{ float: right; } .right a{ padding-right: 10px; color: rgb(176,176,176); } .right a:hover{ color: white; } .all{ width: 90%;/* 只占父标签的百分之90的宽度 */ margin: 0 auto; overflow: hidden;/*清除浮动*/ } .top-boss{ background-color: black; line-height: 40px; } /*-------------------------------------------03------------------------------------------------------------*/ .img{ float: left; margin: 23px 190px 0 0; } .second-ul li{ float: left; padding-right: 25px; } .second-ul li a:hover{ color: coral; } .input{ float: right; } .input input{ width: 249px; height: 45px; border:1px solid #dfdfdf; } .input input:focus{ background-color: whitesmoke; } .ss{ float: right; margin: 27px 0 0 0; } .all2{ /*解决高度塌陷*/ overflow: hidden; background-color: white; height: 100px; /*li高度居中*/ line-height: 100px; width: 90%; /*宽度居中*/ margin: 0 auto; } /*---------------------------------------------04----------------------------------------------------------*/ .center-img{ float: right; } .left0 ul{ margin: 20px 0 ; } .left0 li a { display: block; line-height: 42px; background-color: rgb(114,135,157); color: white; } .left0 li a:hover{ background-color: rgb(255,103,0); } .center-boss{ overflow: hidden; width: 90%; height: 460px; /*宽度居中*/ margin: 0 auto; background-color: rgb(114,135,157); } /*----------------------------------------------05---------------------------------------------------------*/ .center-two{ background-color: rgb(95,87,80); height: 170px; width: 220px; margin: 15px 15px 15px 0; } .center-two ul div li{ font-size: 12px; } .center-two ul div { float: left; margin: 5px; } .center-two ul{ overflow: hidden; margin: 0 0 0 15px; } .center-two-one ul li{ float: right; margin: 15px 0 0 15px; } .center-two-one ul li img{ height: 170px; width: 317px; } #a{ overflow: hidden; width: 90%; /*height: 170px;*/ margin: 0 auto; } #a{ background-color: white; } /*----------------------------------------------小米闪购---------------------------------------------------------*/ .zifu{ height: 58px; background-color: rgb(245,245,245); overflow: hidden; } .zifu h2{ float: left; line-height: 58px; font-size: 22px; font-weight: 200; } .zifu a{ line-height: 58px; display: block; float: right; background-color: rgb(245,245,245); } .sangou-one{ float: left; /*margin: 0 0 15 0px;*/ width: 100px; } .sangou-two ul li{ float: right; margin: 0 0 10px 10px; } .sangou{ overflow: hidden; background-color: rgb(245,245,245); width: 90%; margin: 0 auto; } #q a img{ margin: 0 0 10px 0; } /*----------------------------------------------手机---------------------------------------------------------*/ .phone-one{ height: 58px; background-color: rgb(245,245,245); overflow: hidden; } .phone-one h2{ float: left; line-height: 58px; font-size: 22px; font-weight: 200; } .phone-one a{ display: block; color: black; float: right; line-height: 58px; } .phone-one a:hover{ color: orangered; } .phone-two{ float: left; } .phone-three a img{ padding: 0 0 10px 9px; float: right; } .phone{ overflow: hidden; background-color: rgb(245,245,245); width: 90%; margin: 0 auto; } .phone-bottom{ margin-bottom: 9px; } /*----------------------------------------------家电-搭配--智能-----------------------------------------------------*/ .jiadian-top{ background-color: rgb(245,245,245); overflow: hidden; } .jiadian-top h2{ float: left; line-height: 58px; font-size: 22px; font-weight: 200; } .jiadian-top a{ /*display: block;*/ color: black; float: right; line-height: 58px; } .jiadian-top a:hover{ color: orange; text-decoration: underline; } .jiadian{ overflow: hidden; background-color: rgb(245,245,245); width: 90%; margin: 0 auto; } .jiadian-left{ float: left; } .jiadian-left a img{ margin-bottom: 9px; } .jiadian-right a img{ float: right; margin: 0 0 9px 9px; } .much{ float: right; margin: 0 0 9px 9px; } .jiadian-buttom{ margin-bottom: 9px; } /*--------------------------------------------底部导航条----------------------------------------*/ .last-top{ overflow: hidden; background-color: white; width: 90%; margin: 0 auto; } .last-top ul li { float: left; height: 80px; line-height: 80px; margin: 0 70px; } .last-top ul li a{ color: rgb(97,97,97); } .last-top ul li a:hover{ color: orange; } .last-center .dl dt{ margin: 40px 0 26px; font-size: 14px; } .last-center .dl{ float: left; width: 160px; } .last-center .dl dd{ font-size: 12px; margin: 10px 0 0 0; } .last-center{ overflow: hidden; width: 90%; margin: 0 auto; background-color: white; margin-bottom: 45px; } .last-center .dl a dd{ color: rgb(97,97,97); } .last-center .dl a dd:hover{ color: orange; } /*--------------------------------------最底部----------------------------------------*/ .img{ float: left; margin: 30px 13px 0 0; } .list{ margin: 30px 0 0 0 ; float: left; } .p a{ font-size:11px ; color: rgb(97,97,97); } .p a:hover{ color: orange; } .p1 a{ font-size:11px ; color: rgb(97,97,97); } .p1 a:hover{ color: orange; } .p2 a{ font-size:11px ; color: rgb(176,176,176); } .p2 a:hover{ color: orange; } .p2 span{ font-size:11px ; color: rgb(176,176,176); } .last-last{ overflow: hidden; /*background-color: deepskyblue;*/ width: 90%; margin: 0 auto; }

2、HTML代码

<div class="tp"> <img src="img/tp.png"/> </div>  <div class="top-boss"> <div class="all"> <div class="left"> <ul class="ul"> <li><a href="">小米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">loT</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> <li><a href="">下载app</a></li> <li><a href="">智能生活</a></li> </ul> </div> <div class="shopping"> <a href="" >购物车</a> </div> <div class="right"> <a href="">登录</a> <a href="">注册</a> <a href="">消息通知</a> </div> </div> </div>  <div class="top-boss-2"> <div class="all2"> <div class="img"> <a href=""><img src="img/logo-footer.png"/></a> </div> <div class="second-ul"> <ul> <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> <li><a href="">服务</a></li> <li><a href="">社区</a></li> </ul> </div> <div class="ss"> <a href=""><img src="img/ss.png" style="display: block;"/></a> </div> <div class="input"> <form action="" method="post"> <input type="text" size="1"/> </form> </div> </div> </div>  <div > <div class="center-boss"> <div class="center-img"> <img src="img/cen.png"/> </div> <div class="left0"> <ul> <li><a href=""><span class="li">      手机电话卡</span><span id="litwo">            ></span></a></li> <li><a href=""><span class="li">      电视盒子</span><span id="litwo">               ></span></a></li> <li><a href=""><span class="li">      笔记本平板</span><span id="litwo">            ></span></a></li> <li><a href=""><span class="li">      家电插线板</span><span id="litwo">            ></span></a></li> <li><a href=""><span class="li">      出行穿戴</span><span id="litwo">               ></span></a></li> <li><a href=""><span class="li">      智能路由器</span><span id="litwo">            ></span></a></li> <li><a href=""><span class="li">      电源配件</span><span id="litwo">               ></span></a></li> <li><a href=""><span class="li">      健康儿童</span><span id="litwo">               ></span></a></li> <li><a href=""><span class="li">      耳机音响</span><span id="litwo">               ></span></a></li> <li><a href=""><span class="li">      生活箱包</span><span id="litwo">               ></span></a></li> </ul> </div> </div> </div>  <div > <div id="a"> <div class="center-two-one"> <ul> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340"/></a></li> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340"/></a></li> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340"/></a></li> </ul> </div> <div class="center-two""> <ul> <div > <li><a href="" id="lia"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48"/></a></li> <li><a href=""style=" color: rgb(207,204,202);;"id="lia">企业团购</a></li> </div> <div> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"/></a></li> <li><a href=""style="color: rgb(207,204,202);">小米秒杀</a></li> </div> <div> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48"/></a></li> <li><a href=""style="color: rgb(207,204,202);">F码通道</a></li> </div> <div> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48"/></a></li> <li><a href=""style="color: rgb(207,204,202);">米粉卡</a></li> </div> <div> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48"/></a></li> <li><a href=""style="color: rgb(207,204,202);">以旧换新</a></li> </div> <div> <li><a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48"/></a></li> <li><a href=""style="color: rgb(207,204,202);">话费充值</a></li> </div> </ul> </div> </div> </div>  <div style="background-color: rgb(245,245,245);"> <div class="sangou"> <div class="zifu"> <h2>小米闪购</h2> <a href="">< ></a> </div> <div class="sangou-one"> <img src="img/5.png"/> </div> <div class="sangou-two"> <ul> <li><a href=""><img src="img/1.png"/></a></li> <li><a href=""><img src="img/2.png"/></a></li> <li><a href=""><img src="img/3.png"/></a></li> <li><a href=""><img src="img/4.png"/></a></li> </ul> </div> <div id="q"> <a href=""><img src="img/1.1.png"/></a> </div> </div> </div>  <div style="background-color: rgb(245,245,245);" > <div class="phone"> <div class="phone-one"> <h2>手机</h2> <a href="">查看全部</a> </div> <div class="phone-two"> <a href=""><img src="img/phone-left.png"/></a> </div> <div class="phone-three"> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> <a href=""><img src="img/phone1.png"/></a> </div> <div class="phone-bottom"> <a href=""><img src="img/phont-bottom.png"/></a> </div> </div> </div>  <div style="background-color: rgb(245,245,245);"> <div class="jiadian"> <div class="jiadian-top"> <h2>家电</h2> <a href="">热门影音</a> <a href="" style="margin: 0 20px 0 0 ;">家电</a> </div> <div class="jiadian-left" style="width: 235px;"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c4de5f15f6dc9946e5d0827fd96d71.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e03c0fe4af4d613603f22aaa8e0ea00.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> </div> <div class="jiadian-right"> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <div class="much" style="width: 235px;"> <a href=""><img src="img/jia.png"/></a> <a href=""><img src="img/much.png"/></a> </div> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> </div> <div class="jiadian-buttom"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a> </div> </div> </div>  <div style="background-color: rgb(245,245,245);"> <div class="jiadian"> <div class="jiadian-top"> <h2>智能</h2> <a href="">安防</a> <a href="" style="margin: 0 20px 0 0;">出行</a> <a href="" style="margin: 0 20px 0 0 ;">热门</a> </div> <div class="jiadian-left" style="width: 235px;"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> </div> <div class="jiadian-right"> <a href=""><img src="img/zhi.png"/></a> <a href=""><img src="img/zhi.png"/></a> <a href=""><img src="img/zhi.png"/></a> <a href=""><img src="img/zhi.png"/></a> <div class="much" style="width: 235px;"> <a href=""><img src="img/zhin.png"/></a> <a href=""><img src="img/much.png"/></a> </div> <a href=""><img src="img/zhi.png"/></a> <a href=""><img src="img/zhi.png"/></a> <a href=""><img src="img/zhi.png"/></a> </div> <div class="jiadian-buttom"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45207e414f661234bfc3909d11ad2bab.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a> </div> </div> </div>  <div style="background-color: rgb(245,245,245);"> <div class="jiadian"> <div class="jiadian-top"> <h2>搭配</h2> <a href="">耳机音箱</a> <a href="" style="margin: 0 20px 0 0 ;">热门</a> </div> <div class="jiadian-left" style="width: 235px;"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a00bdd568dbc2b02f8fe0fa8d1b46f28.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?thumb=1&w=234&h=300&f=webp&q=90"/></a> </div> <div class="jiadian-right"> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <div class="much" style="width: 235px;"> <a href=""><img src="img/jia.png"/></a> <a href=""><img src="img/much.png"/></a> </div> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> <a href=""><img src="img/jiadian.png"/></a> </div> <div class="jiadian-buttom"> <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg?thumb=1&w=1226&h=120&f=webp&q=90"/></a> </div> </div> </div>  <div > <div class="last"> <div class="last-top"> <ul> <li><a href="">预约维修服务</a></li> <li><a href="">7天无理由退货</a></li> <li><a href="">15天免费换新</a></li> <li><a href="">满99包邮</a></li> <li><a href="">520余家售后网点</a></li> </ul> </div> <hr /> <div class="last-center"> <dl class="dl"> <dt>帮助中心</dt> <a href=""><dd>账户管理</dd></a> <a href=""><dd>购物指南</dd></a> <a href=""><dd>订单操作</dd></a> </dl > <dl class="dl"> <dt>服务支持</dt> <a href=""><dd>售后政策</dd></a> <a href=""><dd>自动服务</dd></a> <a href=""><dd>相关下载</dd></a> </dl> <dl class="dl"> <dt>线下门店</dt> <a href=""><dd>小米之家</dd></a> <a href=""><dd>服务网点</dd></a> <a href=""><dd>授权体验店</dd></a> </dl> <dl class="dl"> <dt>关于小米</dt> <a href=""><dd>加入小米</dd></a> <a href=""><dd>了解小米</dd></a> <a href=""><dd>投资者关系</dd></a> <a href=""><dd>企业社会责任</dd></a> <a href=""><dd>廉洁举报</dd></a> </dl> <dl class="dl"> <dt>关注我们</dt> <a href=""><dd>新浪微博</dd></a> <a href=""><dd>官方微信</dd></a> <a href=""><dd>联系我们</dd></a> <a href=""><dd>公益基金会</dd></a> </dl> <dl class="dl"> <dt>特色服务</dt> <a href=""><dd>F码通道</dd></a> <a href=""><dd>礼物码</dd></a> <a href=""><dd>防伪查询</dd></a> </dl> </div> </div> </div>  <div style="background-color: rgb(245,245,245); "> <div class="last-last"> <div class="img"> <img src="img/logo-footer.png"/> </div> <div class="list"> <p class="p"> <a href="">小米商城</a> <a href="">MIUI</a> <a href="">米家</a> <a href="">米聊</a> <a href="">多看</a> <a href="">游戏</a> <a href="">政企服务</a> <a href="">小米天猫店</a> <a href="">小米集团隐私政策</a> <a href="">小米公司儿童信息保护规则</a> <a href="">小米商城隐私政策</a> <a href="">小米商城用户协议</a> <a href="">问题反馈</a> </p> <p class="p1"> <a href="">北京互联网法院法律服务工作站</a> <a href="">中国消费者协会</a> <a href="">北京市消费者协会</a> </p> <p class="p2"> <a href="">Mi.com</a> <span>京ICP证110507号</span> <a href="">京icp备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2020]0276-042号</a> <br /> <a href="">（京）网械平台备字（2018）第00005号</a> <a href="">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="">营业执照</a> <a href="">医疗器械质量公告</a> <br /> <a href="">增值电信业务许可证</a> <a href=""> 网络食品经营备案京食药网食备202010048 </a> <a href="">食品经营许可证</a> <br /> <span>违法和不良信息举报电话：171-5104-4404</span> <a href="">知识产权侵权投诉</a> <a href="">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</a> </p> </div> </div> </div> </body>