HTML+CSS仿写京东页面附代码（web前端大作业）

学习前端时间不多，看了两晚上就开始赶实训作业，大家看看就行

先来看看效果：

*{/* 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 #c62020;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 ;}
甘肃
&nbsp&nbsp&nbsp北京 &nbsp&nbsp&nbsp&nbsp&nbsp上海 &nbsp&nbsp&nbsp天津 &nbsp&nbsp&nbsp重庆 &nbsp&nbsp&nbsp河北&nbsp&nbsp&nbsp山西 &nbsp&nbsp&nbsp&nbsp&nbsp河南 &nbsp&nbsp&nbsp辽宁 &nbsp&nbsp&nbsp吉林 &nbsp&nbsp&nbsp黑龙江&nbsp&nbsp&nbsp内蒙古 &nbsp&nbsp江苏 &nbsp&nbsp&nbsp山东 &nbsp&nbsp&nbsp安徽 &nbsp&nbsp&nbsp浙江&nbsp&nbsp&nbsp福建 &nbsp&nbsp&nbsp&nbsp&nbsp湖北 &nbsp&nbsp&nbsp湖南 &nbsp&nbsp&nbsp广东 &nbsp&nbsp&nbsp广西&nbsp&nbsp&nbsp江西 &nbsp&nbsp&nbsp&nbsp&nbsp四川 &nbsp&nbsp&nbsp海南 &nbsp&nbsp&nbsp贵州 &nbsp&nbsp&nbsp云南&nbsp&nbsp&nbsp西藏 &nbsp&nbsp&nbsp&nbsp&nbsp陕西 &nbsp&nbsp&nbsp甘肃 &nbsp&nbsp&nbsp青海 &nbsp&nbsp&nbsp宁夏 &nbsp&nbsp&nbsp新疆 &nbsp&nbsp&nbsp&nbsp&nbsp港澳 &nbsp&nbsp&nbsp台湾 &nbsp&nbsp&nbsp钓鱼岛 &nbsp&nbsp海外
你好，请登录 
免费注册 |
我的京东 |
待处理订单
我的问答
降价商品
返修退换货
我的商品
京东会员 |
企业采购 |
企业购
公共采购
工业品
商用场景馆
微信企业购
礼品卡
商家服务 |
商家服务 |
手机京东 |
网站无障碍
 
 搜索 我的购物车
100减99 一加手机 京东京造 健康服务 镇店电脑 加氛生活 三星盛典 
<!-- 
 -->
京东超市 &nbsp&nbsp&nbsp&nbsp优惠劵 &nbsp&nbsp&nbsp&nbsp秒杀 &nbsp&nbsp&nbsp&nbsp京东家电 &nbsp&nbsp&nbsp&nbsp京东生鲜 &nbsp&nbsp&nbsp&nbspPLUS会员 &nbsp&nbsp&nbsp&nbsp进口好物 &nbsp&nbsp&nbsp&nbsp品牌闪购 &nbsp&nbsp&nbsp&nbsp拍卖 &nbsp&nbsp&nbsp&nbsp京东五金城
 
家用电器
手机/运营商/数码
电脑/办公
家居/家具/家装/厨具
男装/女装/童装/内衣
美妆/个护/清洁/宠物
女鞋/箱包/钟表/珠宝
男鞋/运动/户外
房产/汽车/汽车用品
母婴/玩具乐器
食品/酒类/生鲜/特产
艺术/礼品鲜花/农资绿植
医疗保健/计生用品
图书/文娱/教育/电子书
机票/酒店/旅游/生活
众筹/白条/保险/企业金融
安装/维修/清洗/二手
工业品
 
<!--  --> 
hi~欢迎逛京东！
登入注册
新人福利 PLUS会员京东日报更多>
360度旋转安全座......
边拖边洗，一步到位....
嘘！以内家用洗衣机...
精准避障仿跌落，以...
 
礼品卡
企业购
&nbsp话费
游戏
白条
加油卡
五金城
机票
火车票
电影票
酒店
云主机

相关资源可以在主页资源查看