学习前端时间不多，看了两晚上就开始赶实训作业，大家看看就行
先来看看效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东</title><style>*{/* margin: 0px auto; */padding: 0px;list-style: none;text-decoration: none}.clear::after{content: "";display: block;clear: both;}.top{width: 1580px;/* border: 2px solid red; */background-color: #e5e3e5;}.top_left{width: 40px;/* border: 2px solid rgb(255, 81, 0); */display:inline;float: left;padding-left:100px;}.top_left .one {display: none;/* border: 2px solid rgb(253, 17, 0); */position: absolute;}.top_left:hover .one{display: block;background-color:#e3e4e5;}.top_right{/* border: 2px solid blue; */border: 0px,0px,0px,0px;float: right;padding-right:100px;display:inline;}.ul1 .li1{float: left;width: 100px;position: relative;}.ul1 .one{display: none;position: absolute; }.li1:hover .one{display: block;background-color:#e3e4e5;}.bottom{width: 1580px;height: 180px;background-color: rgb(255, 255, 255);}.bottom .bottom_left{float: left;/* border: 2px solid blue; */padding-top:50px;padding-left:180px;}.bottom .bottom_middle{/* border: 2px solid blue; */float: left;padding-top:40px;/* padding-left:150px; */padding-right:200px;}.bottom .bottom_right{float: left;/* border: 2px solid blue; */padding-top:50px;padding-right:100px;}/* 外边距 margin *//* 内边距 padding */.bottom_middle input{width:454px;height:32px;border:2px solid #c6;padding-left: 4px;color:rgb(104, 103, 103);font:14px/32px "microsoft yahei";float:left;}.bottom_middle button{width:80px;height:35px;background-color:#e1251b; float:left;font:16px/36px "microsoft yahei";color:#fff;cursor:pointer;}.bottom_middle .button1{width:150px;height:35px;background-color:#ffffff; float:left;font:16px/36px "microsoft yahei";color:#e1251b;cursor:pointer;}.bottom .bottom_middle .bottom_middle_1{/* border: 2px solid rgb(255, 0, 0); */margin-left: 80px;}.bottom .bottom_middle .bottom_middle_2{border: 2px solid rgb(255, 255, 255);margin-top: 20px;margin-left: 80px;}.bottom_middle_2_1{font:16px/36px "microsoft yahei";color:#999999;}.bottom .bottom_middle .bottom_middle_3{/* border: 2px solid rgba(0, 0, 0, 0.396); */margin-left: 60px;padding-top: 0px;}section{background-color: #f4f4f4;padding-top: 12px;width: 1580px;height: 580px;/* border: 2px solid blue; */}section .div2{background-color: rgb(255, 255, 255);margin-left: 120px;padding-left: 10px;width: 200px;height: 580px;/* border: 2px solid blue; */float: left;}section .div3{width: 650px;height: 580px;/* border: 2px solid blue; */margin-left: 5px;margin-right: 5px;float: left;}section .div4{width: 200px;height: 580px;/* border: 2px solid blue; */float: left;}section .div4 .div4-1{margin-bottom: 3px;}section .div4 .div4-2{margin-bottom: 3px;}section .div5{width: 240px;height: 580px;background-color: rgb(255, 255, 255);margin-left: 5px;/* border: 2px solid blue; */float: left;}section .div5 .div5-3{/* border: 2px solid blue; */display: inline-block;}section .div5 .div5-4{/* border: 2px solid blue; */display: inline-block;}section .div5 .div5-4 .table1{border-spacing: 24px 0px;}.r_top_banner {height:115px;border-bottom:1px solid #ccc;}.r_top_banner .top_user {padding-top:15px;padding-left:10px;}.r_top_banner .top_user img {width:45px;height:45px;border-radius:25px;}.r_top_banner .top_user a{float:left;}.r_top_banner .top_user .userinfo {float:left;margin-left:15px;line-height:20px;}.r_top_banner .userinfo a {margin-right:5px;} .bot_btns {padding-left:10px;padding-top:15px;}.bot_btns a {width:80px;height:20px;border:2px solid red;display:block;float:left;text-align:center;line-height:20px;margin-right:10px;}/* 外边距 margin *//* 内边距 padding */footer{background-color: #f4f4f4;padding-top: 12px;width: 1580px;height: 700px;/* border: 2px solid blue; */}.footer_1{/* border: 2px solid blue; */width: 1580px;height: 350px;}.footer_1_1{/* border: 2px solid blue; */margin-left: 115px;width: 215px;float: left;}.footer_1_2{/* border: 2px solid blue; */margin-left: 0px;width: 850px;height: 298px;float: left;}.footer_1_3{/* border: 2px solid blue; */margin-left: 0px;width: 242px;height: 298px;float: left;}.footer_1_4{/* border: 2px solid blue; */background-color: #ffffff;margin-left: 30px;width: 80px;height: 330px;float: left;}.footer_1_4_1{border-spacing: 18px 15px;}.footer_2{/* border: 2px solid blue; */width: 1580px;height: 350px;}.footer_2_1{/* border: 2px solid blue; */margin-left: 115px;width: 160px;height: 210px;float: left;}.footer_2_2{/* border: 2px solid blue; */margin-left: 65px;width: 160px;height: 210px;float: left;}.footer_2_3{/* border: 2px solid blue; */margin-left: 65px;width: 160px;height: 210px;float: left;}.footer_2_4{/* border: 2px solid blue; */margin-left: 65px;width: 160px;height: 210px;float: left;}.footer_2_5{/* border: 2px solid blue; */margin-left: 65px;width: 160px;height: 210px;float: left;}.footer_2_6{/* border: 2px solid blue; */margin-left: 65px;width: 200px;height: 210px;float: left;}.footer_2_7{/* border: 2px solid blue; */margin-left: 115px;width: 1350px;height: 130px;float: left;}.footer_2_7_1{/* border: 2px solid blue; */margin-left: 80px;width: 1100px;height: 50px;float: left;}.footer_2_7_2{/* border: 2px solid rgb(255, 0, 0); */margin-left: 20px;margin-top: 0px;width:100px;height: 100px;float: left;}.footer_2_7_3{/* border: 2px solid rgb(255, 0, 0); */margin-right: 22px;margin-top: 0px;width:120px;height: 30px;float: right ;}</style></head><body><header><div class="top clear"><div class="top_left "><p class="top_left_1"><a href="">甘肃</a></p><div class="one"><ul><div class="li5">   北京      上海    天津    重庆    河北</div><div class="li5">   山西      河南    辽宁    吉林    黑龙江 </div><div class="li5">   内蒙古   江苏    山东    安徽    浙江 </div><div class="li5">   福建      湖北    湖南    广东    广西 </div><div class="li5">   江西      四川    海南    贵州    云南 </div><div class="li5">   西藏      陕西    甘肃    青海    宁夏 </div><div class="li5">   新疆      港澳    台湾    钓鱼岛   海外 </div></ul></div></div> <div class="top_right"><ul class="ul1 " ><li class="li1"><a href="">你好，请登录 </a></li><li class="li1"><a href="">免费注册 |</a> </li><li class="li1"><a href="">我的京东 |</a><div class="one"><ul><li>待处理订单</li><li>我的问答</li><li>降价商品</li><li>返修退换货</li><li>我的商品</li></ul></div></li><li class="li1"><a href="">京东会员 |</a> </li><li class="li1"><a href="">企业采购 |</a><div class="one"><ul><li>企业购</li><li>公共采购</li><li>工业品</li><li>商用场景馆</li><li>微信企业购</li><li>礼品卡</li></ul></div></li><li class="li1"><a href="">商家服务 |</a> </li><li class="li1"><a href="">商家服务 |</a> </li><li class="li1"><a href="">手机京东 |</a> </li><li class="li1"><a href="">网站无障碍</a> </li></ul></div></div><div class="bottom"><div class="bottom_left"><img src="img/logo.png" width="100px" height="100px" alt="logo"></div><div class="bottom_middle"><div class="bottom_middle_1"><input type="text" value="图书开抢"><button>搜索 </button><button class="button1" style="margin-left:30px;"><img src="img/gwc.png" width="30px" height="20px">我的购物车</button></div><div class="bottom_middle_2"><p class="bottom_middle_2_1">100减99 一加手机 京东京造 健康服务 镇店电脑 加氛生活 三星盛典 </p></div><!-- <br> --><div class="bottom_middle_3"><p>京东超市     优惠劵     秒杀     京东家电     京东生鲜     PLUS会员     进口好物     品牌闪购     拍卖     京东五金城</p></div></div><div class="bottom_right"><img src="img/jingdong.png" width="100px" height="100px" alt="京东网站二维码"></div></div> </header><section ><div class="div2"><ul class="ul4"><li class="li4" style="margin-bottom:10px;"><a href="">家用电器</a></li><li class="li4" style="margin-bottom:10px;">手机/运营商/数码</li><li class="li4" style="margin-bottom:10px;">电脑/办公</li><li class="li4" style="margin-bottom:10px;">家居/家具/家装/厨具</li><li class="li4" style="margin-bottom:10px;">男装/女装/童装/内衣</li><li class="li4" style="margin-bottom:10px;">美妆/个护/清洁/宠物</li><li class="li4" style="margin-bottom:10px;">女鞋/箱包/钟表/珠宝</li><li class="li4" style="margin-bottom:10px;">男鞋/运动/户外</li><li class="li4" style="margin-bottom:10px;">房产/汽车/汽车用品</li><li class="li4" style="margin-bottom:10px;">母婴/玩具乐器</li><li class="li4" style="margin-bottom:10px;">食品/酒类/生鲜/特产</li><li class="li4" style="margin-bottom:10px;">艺术/礼品鲜花/农资绿植</li><li class="li4" style="margin-bottom:10px;">医疗保健/计生用品</li><li class="li4" style="margin-bottom:10px;">图书/文娱/教育/电子书</li><li class="li4" style="margin-bottom:10px;">机票/酒店/旅游/生活</li><li class="li4" style="margin-bottom:10px;">众筹/白条/保险/企业金融</li><li class="li4" style="margin-bottom:10px;">安装/维修/清洗/二手</li><li>工业品</li></ul></div><div class="div3"><img src="img/zhu.png" width="650px" height="580px" alt="logo"> </div><div class="div4"><div class="div4-1"><img src="img/4-1.png" width="200px" height="188px" alt="图片4-1"></div><div class="div4-2"><img src="img/4-2.jpg" width="200px" height="188px"alt="图片4-2"></div><div class="div4-3"><img src="img/4-3.png" width="200px" height=" 188px"alt="图片4-3"></div></div><div class="div5"><div class="div5-1"><!-- <img src="img/5-1.png" width="240px" height="150px" alt="图片5-1"> --><div class="r_top_banner"><div class="top_user clearfix"><a href="#"><img src="img/no_login.png"></a><div class="userinfo"><p class="p1">hi~欢迎逛京东！</p><p class="p2"><a href="#">登入</a><a href="#">注册</a></p></div></div><div class="bot_btns"><a href="#">新人福利</a><a href="#">PLUS会员</a></div></div></div><div class="div5-2"><div5-2-1><a href="" style="margin-right: 100px;">京东日报</a> <a href="">更多></a></div5-2-1></div><div class="div5-3"><ul><li><a href="" style="margin-left: 70px;">360度旋转安全座......</a></li><li><a href="" style="margin-left: 70px;">边拖边洗，一步到位....</a></li><li><a href="" style="margin-left: 70px;">嘘！以内家用洗衣机...</a></li><li><a href="" style="margin-left: 70px;">精准避障仿跌落，以...</a></li></ul></div><div class="div5-4"><table border="0" class="table1"><tr ><td><img src="img/礼品卡.png" width="45px" height="45px"alt=""></td><td><img src="img/企业购.png" width="45px" height="45px" alt=""></td><td><img src="img/话费.png" width="45px" height="45px"alt=""></td></tr><tr><td>礼品卡</td><td>企业购</td><td> 话费</td></tr><tr><td><img src="img/游戏.png" width="45px" height="45px"></td><td><img src="img/白条.png" width="45px" height="45px"alt=""></td><td><img src="img/加油卡.png" width="45px" height="45px"alt=""></td></tr><tr><td>游戏</td><td>白条</td><td>加油卡</td></tr><tr><td><img src="img/五金城.png" width="45px" height="45px"alt=""></td><td><img src="img/机票.png" width="45px" height="45px"alt=""></td><td><img src="img/火车票.png" width="45px" height="45px"alt=""></td></tr><tr><td>五金城</td><td>机票</td><td>火车票</td></tr><tr><td><img src="img/电影票.png" width="45px" height="45px"alt=""></td><td><img src="img/酒店.png" width="45px" height="45px"alt=""></td><td><img src="img/云主机.png" width="45px" height="45px"alt=""></td></tr><tr><td>电影票</td><td>酒店</td><td>云主机</td></tr></table></div></div></section><footer><div class="footer_1"><div class="footer_1_1"><img src="img/京东秒杀.png" width="215px" height="298"alt=""></div><div class="footer_1_2"><img src="img/商品.png" width="850px" height="298"alt=""></div><div class="footer_1_3"><img src="img/美妆.png" width="242px" height="298" alt=""></div><div class="footer_1_4"><table table border="1" class="footer_1_4_1"><tr><td><a href="">京东秒杀</a></td></tr><tr><td><a href="">特色优选</a></td></tr><tr><td><a href="">频道广场</a></td></tr><tr><td><a href="">为你推荐</a></td></tr><tr><td><a href="">客服</a></td></tr><tr><td><a href="">反馈</a></td></tr></table></div></div><div class="footer_2"><div class="footer_2_1"><ul><li>购物指南</li><br><li>购物流程</li><li>会员介绍</li><li>生活旅行</li><li>常见问题</li><li>大家电</li><li>联系客服</li></ul></div><div class="footer_2_2"><ul><li>配送方式</li><br><li>上门自提</li><li>211限时达</li><li>配送服务查询</li><li>配送费收取标准</li></ul></div><div class="footer_2_3"><ul><li>支付方式</li><br><li>货到付款</li><li>在线支付</li><li>分期付款</li><li>公司转账</li></ul></div><div class="footer_2_4"><ul><li>售后服务</li><br><li>售后政策</li><li>价格保护</li><li>退款说明</li><li>返修\退换货</li><li>取消订单</li></ul></div><div class="footer_2_5"><ul><li>特色服务</li><br><li>夺宝岛</li><li>DIY装机</li><li>延保服务</li><li>京东E卡</li><li>京东通信</li><li>京鱼座智能</li></ul></div><div class="footer_2_6"><ul><li>京东自营覆盖区县</li><br><li>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</li></ul></div><div class="footer_2_7"><div class="footer_2_7_1"><p>关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 隐私政策 | 京东公益 | Media & IR</p></div><div class="footer_2_7_2"><img src="img/公众号二维码.png" width="100px" height="100"alt=""></div><div class="footer_2_7_3"><p>欢迎关注作者</p></div></div></div></footer></body></html>
相关资源可以在主页资源查看
