京东
京东热卖品页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" href="./css/iconfont.css"/>
</head>
<body>
上导航部分
<div class="top_title">
<div class="title">
<ul class="title_left">
<li><i class="iconfont">󰊕</i><a href="#">北京</a></li>
</ul>
<ul class="title_right">
<li style=" margin-right: 8px;"><a href="#">你好，请登录</a> <a href="#" style="color: #dd0000;">免费注册</a></li>
<li class="v_line"></li>
<li class="dt"><a href="#">我的订单</a></li>
<li class="v_line"></li>
<li class="dt titlehover"><a href="#">我的京东</a><i class="iconfont">󰊩</i></li>
<li class="v_line"></li>
<li class="dt"><a href="#">京东会员</a></li>
<li class="v_line"></li>
<li class="dt titlehover"><a href="#">企业采购</a><i class="iconfont">󰊩</i></li>
<li class="v_line"></li>
<li class="dt titlehover"><a href="#">客户服务</a><i class="iconfont">󰊩</i></li>
<li class="v_line"></li>
<li class="dt titlehover"><a href="#">网站导航</a><i class="iconfont">󰊩</i></li>
<li class="v_line"></li>
<li class="dt"><a href="#">手机京东</a></li>
</ul>
</div>
</div>
header部分
<div class="header">
<div class="w">
<a href="#">
<div class="logo"></div>
</a>
<div class="search">
<div class="sea_form">
<input type="text"/>
<span class="c_p"><i class="iconfont">󰂒</i></span>
<span class="search_btn"><i class="iconfont">󰄬</i></span>
</div>
<div class="search_list">
<span><a href="#" style=" color: #f20000;">每满千减百</a></span>
<span><a href="#">坚果零食</a></span>
<span><a href="#">0元试用</a></span>
<span><a href="#">1元秒杀</a></span>
<span><a href="#">每100-40</a></span>
<span><a href="#">一加6T</a></span>
<span><a href="#">空调好物</a></span>
<span><a href="#">家装建材</a></span>
<span><a href="#">组装电脑</a></span>
</div>
</div>
<div class="cart">
<i class="iconfont">󰅹</i>
我的购物车
<span class="number">0</span>
</div>
<div class="menu">
<a href="#">秒杀</a>
<a href="#">优惠券</a>
<a href="#">PLUS会员</a>
<a href="#">闪购</a>
<span class="v_menu"></span>
<a href="#">拍卖</a>
<a href="#">京东时尚</a>
<a href="#">京东超市</a>
<a href="#">京东生鲜</a>
<span class="v_menu"></span>
<a href="#">全球购</a>
<a href="#">京东金融</a>
</div>
</div>
</div>
banner 部分
<div class="fsbanner">
<div class="fs">
<div class="fs_col1">
<ul class="fs_menu">
<li><a href="#">女装</a><span class="h_i">/</span><a href="#">男装</a><span class="h_i">/</span><a href="#">内衣</a>
</li>
<li><a href="#">鞋靴</a><span class="h_i">/</span><a href="#">箱包</a><span class="h_i">/</span><a href="#">配饰配件</a>
</li>
<li><a href="#">童装玩具</a><span class="h_i">/</span><a href="#">孕产</a><span class="h_i">/</span><a
href="#">用品</a></li>
<li><a href="#">家电</a><span class="h_i">/</span><a href="#">数码</a><span class="h_i">/</span><a href="#">手机</a>
</li>
<li><a href="#">美妆</a><span class="h_i">/</span><a href="#">洗护</a><span class="h_i">/</span><a href="#">保健品</a>
</li>
<li><a href="#">饰品</a><span class="h_i">/</span><a href="#">珠宝</a><span class="h_i">/</span><a href="#">手表眼镜</a>
</li>
<li><a href="#">运动</a><span class="h_i">/</span><a href="#">户外</a><span class="h_i">/</span><a href="#">乐器</a>
</li>
<li><a href="#">游戏</a><span class="h_i">/</span><a href="#">动漫</a><span class="h_i">/</span><a href="#">影视</a>
</li>
<li><a href="#">美食</a><span class="h_i">/</span><a href="#">生鲜</a><span class="h_i">/</span><a href="#">零食</a>
</li>
<li><a href="#">鲜花</a><span class="h_i">/</span><a href="#">宠物</a><span class="h_i">/</span><a href="#">农资</a>
</li>
<li><a href="#">工具</a><span class="h_i">/</span><a href="#">装修</a><span class="h_i">/</span><a href="#">建材</a>
</li>
<li><a href="#">家具</a><span class="h_i">/</span><a href="#">家饰 </a><span class="h_i">/</span><a href="#">家纺</a>
</li>
<li><a href="#">汽车</a><span class="h_i">/</span><a href="#">二手 车</a><span class="h_i">/</span><a
href="#">用品</a></li>
<li><a href="#">办公</a><span class="h_i">/</span><a href="#">DIY</a><span class="h_i">/</span><a
href="#">五金电子</a></li>
<li><a href="#">百货</a><span class="h_i">/</span><a href="#">餐厨 </a><span class="h_i">/</span><a href="#">家庭保健</a>
</li>
<li><a href="#">学习</a><span class="h_i">/</span><a href="#">卡券 </a><span class="h_i">/</span><a href="#">本地服务</a>
</li>
<li><a href="#">家用电器工业品</a></li>
<li><a href="#">安装</a><span class="h_i">/</span><a href="#">维修 </a></li>
</ul>
</div>
<div class="fs_col2">
<img src="./img/5bee57b6N7c4888dd.jpg" alt=""/>
</div>
<div class="fs_col3">
<div class="fs_col3_list" style=" margin: 10px 0;">
<img src="./img/5bed1009N5aa3c0ba.jpg" alt=""/>
</div>
<div class="fs_col3_list" style=" margin-bottom: 10px">
<img src="./img/5bed1009N5aa3c0ba.jpg" alt=""/>
</div>
<div class="fs_col3_list">
<img src="./img/5bed1009N5aa3c0ba.jpg" alt=""/>
</div>
</div>
<div class="fs_col4">
<div class="fs_col4_1">
<div class="userface">
<img src="./img/no_login.jpg" alt=""/>
</div>
<span class="userhi">Hi~欢迎来到京东！</span><br/>
<a class="userbtn" href="#">登录</a>
<a class="userbtn" href="#">注册</a>
<div style=" margin-top: 8px">
<a class="newp" href="#">新人福利</a>
<a class="plus" href="#">PLUS会员</a>
</div>
</div>
<div class="fs_col4_2"><span>促销</span><span>公告</span>
<div class="fs_col4_2_xiegang"><span>|</span></div>
<div class="fs_col4_2_shuiping"><hr/></div>
<div class="fs_col4_2_wenben">
<ul>
<li class="dian">电脑数码 享白条免息</li>
<li class="hua">华为爆款直降</li>
<li class="shu"> 数码好物0元试用</li>
<li class="tian">天际厨电感恩专场豪礼免费拿</li>
</ul>
<div class="gengduo">更多</div>
</div>
<div class="fs_col4_3"></div>
</div>
</div>
</div>
<div style="height: 2000px">
</div>
</body>
</html>
其中样式和图标可通过上述途径连接：
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" href="./css/iconfont.css"/>
iconfont.css：
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot'); /* IE9*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:14px;
font-style:normal;
display:inline;
height:auto;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
vertical-align:baseline;
text-decoration:inherit;
}
index.css：
*{
margin: 0;
padding: 0;
}
body{
background-color: #F0F3EF;
}
.top_title{
background-color: #E3E4E5;
}
.title{
width: 1190px;
margin: 0 auto;
height: 30px;
line-height: 30px;
}
.title_left{
margin-left: 200px;
float: left;
}
.title_left>li{
border-left: 1px solid #E3E4E5;
border-right: 1px solid #E3E4E5;
padding: 0 7px;
list-style: none;
font-size: 12px;
color: #a3a3a3;
}
.title_right{
float: right;
}
.title_right>li{
float: left;
list-style: none;
font-size: 12px;
}
.v_line{
margin: 11px 5px 0;
height: 10px;
border-left: 1px solid #a3a3a3;
}
.title_right>li>a{
text-decoration: none;
color: #a3a3a3;
}
.title_right>li>a:hover{
color: #dd0000;
}
.title_right>li>i{
margin-left: 5px;
color: silver !important;
}
.title_left>li>a{
text-decoration: none;
color:#a3a3a3 ;
}
.title_left>li>i{
font-size: 12px;
color: red;
margin-right: 5px;
}
.title_left>li:hover{
border-left: 1px solid silver;
border-right: 1px solid silver;
background-color: white;
}
.titlehover{
border-left: 1px solid #E3E4E5;
border-right: 1px solid #E3E4E5;
}
.titlehover:hover{
border-left: 1px solid silver;
border-right: 1px solid silver;
background-color: white;
}
.dt{
padding: 0 7px;
}
.w{
position: relative;
width: 1190px;
height: 140px;
margin: 0 auto;
}
.logo{
position: absolute;
top:-30px;
width: 190px;
height: 170px;
background-image: url("../img/5b5edd7eNc217df1c.gif");
background-size: 190px 170px;
background-repeat: no-repeat;
background-color: white;
border-bottom: 1px solid silver;
box-shadow: 0px -5px 10px silver;
}
.search{
position: relative;
width: 550px;
height: 60px;
left: 320px;
top: 30px;
}
.sea_form{
position: absolute;
top: 0;
width: 550px;
height: 35px;
background-color: white;
}
.sea_form>input{
width: 450px;
height: 35px;
outline: none;
border-style: none;
padding-left: 5px;
}
.search_btn{
position: absolute;
right: 0;
display: inline-block;
width: 60px;
height: 35px;
text-align: center;
line-height: 35px;
background-color: #ff0000;
}
.search_btn>i{
font-size: 25px;
color: white;
}
.c_p{
position: absolute;
top: 2px;
right: 60px;
width: 40px;
height: 35px;
line-height: 35px;
text-align: center;
}
.c_p>i{
font-size: 25px;
color: #808080;
}
.c_p>i:hover{
color: red;
}
.search_list{
position: absolute;
top: 35px;
}
.search_list>span{
font-size: 12px;
margin-right: 6px;
}
.search_list a{
text-decoration: none;
color: grey;
}
.search_list a:hover{
color: #f20000;
}
.cart{
position: absolute;
top: 30px;
right: 100px;
z-index: 10;
width: 188px;
height: 33px;
border: 1px solid silver;
background-color: white;
text-align: center;
line-height: 33px;
font-size: 13px;
color: #ff426f;
}
cart>i{
font-size: 18px;
margin-right: 5px;
}
.number{
position: relative;
top: -8px;
display: inline-block;
color: white;
width: 12px;
height: 15px;
border-radius: 50%;
background-color: red;
line-height: 15px;
text-align: center;
}
.menu{
position: absolute;
bottom: 0;
left: 220px;
}
.menu>a{
text-decoration: none;
color: #656565;
font-size: 14px;
padding: 0 11px;
}
.v_menu{
display: inline-block;
border-left: 1px solid silver;
height: 10px;
width: 1px;
}
.menu>a:hover{
color: red;
}
.fs{
position: relative;
width: 1190px;
height: 480px;
margin: 0 auto;
}
.fs_col1{
float: left;
width: 190px;
height: 479px;
background-color: white;
margin-right: 10px;
border-top: 1px solid silver;
}
.fs_col2{
position: relative; /*后期写代码使用 相对*/
float: left;
width: 590px;
height: 470px;
margin-top: 10px;
margin-right: 10px;
}
.fs_col3{
float: left;
width: 190px;
height: 480px;
margin-right: 10px;
}
.fs_col4{
float: left;
width: 190px;
height: 470px;
margin-top: 10px;
background-color: white;
}
.fs_menu>li{
list-style: none;
padding-left: 20px;
height: 26px;
line-height: 26px;
}
.fs_menu>li:hover{
background-color: #c5c5c5;
}
.fs_menu>li>a{
color: #747474;
font-size: 14px;
text-decoration: none;
}
.fs_menu>li>a:hover{
color: red;
}
.h_i{
font-size: 13px;
color: #747474;
padding: 0 2px;
}
.fs_col2>img{
width: 100%;
height: 100%;
}
.fs_col3_list{
width: 190px;
height: 150px;
}
.fs_col3_list>img{
width: 100%;
height: 100%;
}
.fs_col4_1{
width: 190px;
height: 150px;
text-align: center;
}
.fs_col4_2{
width: 190px;
height: 130px;
background-color: blue;
}
.fs_col4_3{
width: 190px;
height: 190px;
background-color: red;
}
.userface{
position: relative;
top: -10px;
margin: 0 auto;
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #dbdbdb;
box-shadow: 5px 5px 25px silver;
}
.userface>img{
width: 100%;
height: 100%;
}
.userhi{
font-size: 13px;
color: grey;
}
.userbtn{
font-size: 14px;
color: grey;
text-decoration: none;
}
.userbtn:hover{
color: red;
}
.newp{
background-color: white;
color: red;
display: inline-block;
width: 70px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
text-decoration: none;
box-shadow: 5px 10px 20px silver;
border-radius: 20px;
}
.plus{
background-color: #2d2d2d;
color: #dbca1c;
display: inline-block;
width: 70px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
text-decoration: none;
box-shadow: 5px 10px 20px silver;
border-radius: 20px;
}
.newp:hover,.plus:hover{
background-color: red;
color: white;
}
执行结果：后面只需导入链接就可以看到每个商品的就情况。进行页面制作时，只需先进性区域性分行，然后进行每行的分块，用div写出，然后添加内容，在另一个路径上进行样式的设置就可以了。