学习前端时间不多，看了两晚上就开始赶实训作业，大家看看就行
先来看看效果：
文章来源：https://www.toymoban.com/news/detail-504541.html
<!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 #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 ;
}
</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>相关资源可以在主页资源查看文章来源地址https://www.toymoban.com/news/detail-504541.html
到了这里，关于HTML+CSS仿写京东页面附代码（web前端大作业）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
