京东商城主页效果图
京东商城部分代码展示
导航栏
<!--导航开始-->
<div class="nav">
<div class="center">
<div class="location">
<span class="iconfont icon-coordinates_fill"></span>
<span>山东</span>
<div class="childMenu">
<a href="#"><span>北京</span></a>
<a href="#"><span>上海</span></a>
<a href="#"><span>天津</span></a>
<a href="#"><span>重庆</span></a>
<a href="#"><span>河北</span></a>
<a href="#"><span>山西</span></a>
<a href="#"><span>河南</span></a>
<a href="#"><span>辽宁</span></a>
<a href="#"><span>吉林</span></a>
<a href="#"><span>黑龙江</span></a>
<a href="#"><span>内蒙古</span></a>
<a href="#"><span>江苏</span></a>
<a class="red" href="#"><span>山东</span></a>
<a href="#"><span>安徽</span></a>
<a href="#"><span>浙江</span></a>
<a href="#"><span>福建</span></a>
<a href="#"><span>湖北</span></a>
<a href="#"><span>湖南</span></a>
<a href="#"><span>广东</span></a>
<a href="#"><span>广西</span></a>
<a href="#"><span>江西</span></a>
<a href="#"><span>四川</span></a>
<a href="#"><span>海南</span></a>
<a href="#"><span>贵州</span></a>
<a href="#"><span>云南</span></a>
<a href="#"><span>西藏</span></a>
<a href="#"><span>陕西</span></a>
<a href="#"><span>甘肃</span></a>
<a href="#"><span>青海</span></a>
<a href="#"><span>宁夏</span></a>
<a href="#"><span>新疆</span></a>
<a href="#"><span>港澳</span></a>
<a href="#"><span>台湾</span></a>
<a href="#"><span>钓鱼岛</span></a>
<a href="#"><span>海外</span></a>
</div>
</div>
<div class="r_nav">
<ul>
<li>
<a href="#">你好，请登录</a>
<a href="#" style="color: red">免费注册</a>
</li>
<li class="line"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="line"></li>
<li>
<div class="location">
<a href="#"><span>我的京东</span></a>
<span class="iconfont icon-unfold"></span>
<div class="myjd">
<div class="myjd-top">
<a href="#"><span>待处理订单</span></a>
<a href="#"><span>我的问答</span></a>
<a href="#"><span>返修退换货</span></a>
<a href="#"><span>我的关注</span></a>
<a href="#"><span>降价商品</span></a>
</div>
<div class="myjd-bottom">
<a href="#"><span>我的京豆 </span></a>
<a href="#"><span>我的优惠券</span></a>
<a href="#"><span>我的白条 </span></a>
<a href="#"><span>我的理财</span></a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li>
<a href="#">京东会员</a>
</li>
<li class="line"></li>
<li>
<div class="location">
<a href="#" style="color: red"><span>企业采购</span></a>
<span class="iconfont icon-unfold"></span>
<div class="qycg">
<div class="qycg-top">
<a href="#"><span>企业购</span></a>
<a href="#"><span>商用场景馆</span></a>
<a href="#"><span>工业品</span></a>
<a href="#"><span>丰客多商城</span></a>
<a href="#"><span>礼品卡</span></a>
<a href="#"><span>微信企业购</span></a>
<a href="#"><span>工品优选</span></a>
<a href="#"><span>京东锦礼</span></a>
</div>
<div class="qycg-bottom">
<a href="#"><span>大中型企业采购</span></a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li>
<div class="location">
<a href="#"><span>客户服务</span></a>
<span class="iconfont icon-unfold"></span>
<div class="khfw">
<div class="client">
<a href="#"><span><strong>客户</strong></span></a>
</div>
<div class="khfw-top">
<a href="#"><span>帮助中心</span></a>
<a href="#"><span>售后服务</span></a>
<a href="#"><span>在线客服</span></a>
<a href="#"><span>意见建议</span></a>
<a href="#"><span>电话客服</span></a>
<a href="#"><span>客服邮箱</span></a>
<a href="#"><span>金融咨询</span></a>
<a href="#"><span>全球售客服</span></a>
<a href="#"><span>企业客服</span></a>
</div>
<div class="business">
<a href="#"><span><strong>商户</strong></span></a>
</div>
<div class="khfw-bottom">
<a href="#"><span>合作招商</span></a>
<a href="#"><span>成长中心</span></a>
<a href="#"><span>商家后台</span></a>
<a href="#"><span>京麦工作台</span></a>
<a href="#"><span>商家帮助</span></a>
<a href="#"><span>规则平台</span></a>
</div>
</div>
</div>
</li>
<li class="line"></li>
<li>
<a href="#">
<span>网站导航</span>
<span class="iconfont icon-unfold"></span>
</a>
</li>
<li class="line"></li>
<li>
<span class="qrcode-wrapper">
<a href="">手机京东</a>
<div class="qrcode">
<img src="./images/qrcode/1.png">
<div class="qrcode-drop">
<div>
<img src="./images/qrcode/1.png">
<p>手机京东</p>
<p>新人专享大礼包</p>
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div>
<img src="./images/qrcode/2.png">
<p>关注京东</p>
<p>抢5元红包</p>
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div>
<img src="./images/qrcode/3.png">
<p>京东金融客户端</p>
<p>新人专享大礼包</p>
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div>
<img src="./images/qrcode/4.png">
<p>关注京东小程序</p>
<p>新人0.1元购</p>
<a href="#">
</div>
</div>
</div>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
搜索栏
<div class="m_nav w">
<div class="logo">
<a href="#">京东</a>
</div>
<div class="search_box">
<input type="text" class="search" placeholder="Dell显示器" autofocus>
<input type="button" class="btn">
<b class="iconfont search_img"></b>
<a href=""><i class="iconfont"></i></a>
</div>
<div class="cart">
<b class="iconfont"></b>
<a href="#">我的购物车</a>
<span>0</span>
</div>
<div class="hot_word">
<ul>
<li><a href="#" style="color: red">家装建材</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="nav_item ">
<ul>
<li>
<a href="#" style="color: red;font-weight: 700;">秒杀</a>
</li>
<li>
<a href="#" style="color: red;font-weight: 700;">优惠券</a>
</li>
<li>
<a href="#">PLUS会员</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>
底部
<div class="footer ">
<div class="top_footer">
<div class="w">
<ul>
<li>
<b>多</b>
<span>品类齐全，轻松购物</span>
</li>
<li>
<b class="fast">快</b>
<span>多仓直发，极速配送</span>
</li>
<li>
<b class="good">好</b>
<span>正品行货，精致服务</span>
</li>
<li>
<b class="save">省</b>
<span>天天低价，畅选无忧</span>
</li>
</ul>
</div>
</div>
<div class="middle_footer w">
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅行</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>上门自提</dd>
<dd>211限时达</dd>
<dd>配送服务查询</dd>
<dd>配送费收取标准</dd>
<dd>海外配送</dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd>货到付款</dd>
<dd>在线支付</dd>
<dd>分期付款</dd>
<dd>公司转账</dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd>售后政策</dd>
<dd>价格保护</dd>
<dd>退款说明</dd>
<dd>返修/退换货</dd>
<dd>取消订单</dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd>夺宝岛</dd>
<dd>DIY装机</dd>
<dd>延保服务</dd>
<dd>京东E卡</dd>
<dd>京东通信</dd>
<dd>京鱼座智能</dd>
</dl>
<dl class="last-dl">
<dt>京东自营覆盖区县</dt>
<dd>
<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<a href="#">查看详情</a>
</dd>
</dl>
</div>
<div class="bottom_footer">
<p>
<a href="#">关于我们</a><span>|</span>
<a href="#">联系我们</a><span>|</span>
<a href="#">联系客服</a><span>|</span>
<a href="#">合作招商</a><span>|</span>
<a href="#">商家帮助</a><span>|</span>
<a href="#">营销中心</a><span>|</span>
<a href="#">手机京东</a><span>|</span>
<a href="#">友情链接</a><span>|</span>
<a href="#">销售联盟</a><span>|</span>
<a href="#">京东社区</a><span>|</span>
<a href="#">风险监测</a><span>|</span>
<a href="#">隐私政策</a><span>|</span>
<a href="#">京东公益</a><span>|</span>
<a href="#">English Site</a><span>|</span>
<a href="#">Media & IR</a>
</p>
<p class="public">
<a href="">京公网安备 11000002000088号</a><span>|</span>
<a href="">京ICP证070359号</a><span>|</span>
<a href="">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span>|</span>
<a href="">新出发京零 字第大120007号</a>
</p>
<p class="public">
<a href="">互联网出版许可证编号新出网证(京)字150号</a><span>|</span>
<a href="">出版物经营许可证</a><span>|</span>
<a href="">网络文化经营许可证京网文[2014]2148-348号</a><span>|</span>
<a href="">违法和不良信息举报电话：4006561155</a>
</p>
<p class="public">
<a href="">Copyright © 2004 - 2020 京东JD.com 版权所有</a><span>|</span>
<a href="">消费者维权热线：4006067733经营证照</a><span>|</span>
<a href="">(京)网械平台备字(2018)第00003号</a><span>|</span>
<a href="">营业执照</a>
</p>
<p class="public">
<a href="">Global Site|Сайт России</a><span>|</span>
<a href="">Situs Indonesia</a><span>|</span>
<a href="">Sitio de España</a><span>|</span>
<a href="">เว็บไซต์ประเทศไทย</a>
</p>
<p class="public">
<a href="">京东旗下网站：京东钱包</a><span>|</span>
<a href="">京东云</a>
</p>
<img src="images/footer.png" alt="">
</div>
</div>
CSS
p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑";
color: #666666;
list-style: none;
}
img,input{
outline-style: none;
padding: 0;
margin: 0;
border: none;
vertical-align: middle;
}
.clearfix::after{
content: "";
height: 0px;
line-height: 0px;
clear: both;
visibility: hidden;
display: block;
}
.clearfix{
*zoom:1;
}
a{
text-decoration: none;
color: #666666;
}
a:hover{
color:#e4393c;
}
/*登录的版心*/
.login_w{
width: 990px;
margin: 0 auto;
}
/*首页的版心*/
.w{
width: 1190px;
margin: 0 auto;
}
/* 京东导航栏 开始 */
div.nav {
width: 100%;
height: 30px;
border-bottom: #cccccc solid 1px;
background-color: #e3e4e5;
}
div.nav .center {
width: 1190px;
height: 30px;
line-height: 30px;
margin: 0 auto;
}
div.nav .center .location {
line-height: 28px;
border: #e3e4e5 solid 1px;
padding: 0 7px;
font-size: 12px;
color: #f10215;
float: left;
position: relative;
border-bottom: #cccccc solid 1px;
}
div.nav .center .childMenu {
position: absolute;
background-color: #fff;
border: #cccccc solid 1px;
z-index: 3;
}
div.nav .center .location .childMenu {
width: 320px;
height: 220px;
top: 29px;
left: -1px;
display: none;
}
div.nav .center .location:hover .childMenu {
display: block;
}
div.nav .center .location:hover {
background-color: #fff;
border: #cccccc solid 1px;
}
div.nav .center .location:hover::after {
content: "";
width: 100%;
height: 0;
border-bottom: #fff solid 1px;
position: absolute;
left: 0;
bottom: -1px;
z-index: 3;
}
div.nav .center .location .childMenu a {
display: block;
float: left;
width: 59px;
height: 24px;
padding-left: 5px;
line-height: 24px;
margin: 2px 0;
}
div.nav .center .location .childMenu a span {
display: block;
height: 100%;
padding: 0 8px;
float: left;
}
div.nav .center .location .childMenu a span:hover {
background-color: #f4f4f4;
color: #f10215;
}
div.nav .center .location .childMenu a.red span {
background-color: #f10215;
color: #fff;
}
div.nav .center .myjd {
position: absolute;
background-color: #fff;
border: #cccccc solid 1px;
z-index: 1;
}
div.nav .center .location .myjd {
width: 280px;
height: 162px;
top: 29px;
left: -1px;
display: none;
}
div.nav .center .location:hover .myjd {
display: block;
}
div.nav .center .location .myjd a {
display: block;
float: left;
width: 126;
height: 24px;
padding-left: 5px;
line-height: 24px;
margin: 2px 0;
}
div.nav .center .location .myjd a span {
display: block;
height: 100%;
padding: 0 20px;
float: left;
}
div.nav .center .location .myjd a span:hover {
color: #f10215;
}
div.nav .center .location .myjd a.red span {
background-color: #f10215;
color: #fff;
}
div.nav .center .location .myjd .myjd-top {
width: 260px;
height: 77px;
padding: 10px 0;
border-bottom: 1px solid rgb(241, 241, 241);
}
div.nav .center .location .myjd .myjd-bottom {
width: 280px;
height: 69px;
}
div.nav .center .qycg {
position: absolute;
background-color: #fff;
border: #cccccc solid 1px;
z-index: 1;
}
div.nav .center .location .qycg {
width: 157px;
height: 142px;
top: 29px;
left: -1px;
display: none;
}
div.nav .center .location:hover .qycg {
display: block;
}
div.nav .center .location .qycg a {
display: block;
float: left;
width: 78px;
height: 24px;
line-height: 24px;
}
div.nav .center .location .qycg a span {
display: block;
width: 84px;
height: 100%;
padding: 6px 8px;
float: left;
}
div.nav .center .location .qycg a span:hover {
color: #f10215;
}
div.nav .center .location .qycg a.red span {
background-color: #f10215;
color: #fff;
}
div.nav .center .khfw {
position: absolute;
background-color: #fff;
border: #cccccc solid 1px;
z-index: 1;
}
div.nav .center .location .khfw {
width: 172px;
height: 273px;
top: 29px;
left: -1px;
display: none;
}
div.nav .center .location:hover .khfw {
display: block;
}
div.nav .center .location .khfw a {
display: block;
float: left;
width: 78px;
height: 24px;
line-height: 24px;
}
div.nav .center .location .khfw a span {
display: block;
height: 100%;
padding: 6px 8px;
float: left;
}
div.nav .center .location .khfw a span:hover {
color: #f10215;
}
div.nav .center .location .khfw a.red span {
background-color: #f10215;
color: #fff;
}
div.nav .center .location .khfw .client {
width: 170px;
height: 24px;
}
div.nav .center .location .khfw .khfw-top {
width: 170px;
height: 130px;
}
div.nav .center .location .khfw .business {
width: 170px;
height: 24px;
border-top: 1px solid rgb(241, 241, 241);
}
.qrcode-wrapper{
position: relative;
}
.qrcode{
width: 76px;
height: 76px;
position: absolute;
z-index: 1;
right: 0;
top: 35px;
right: -10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.qrcode img{
width: 60px;
height: 60px;
margin: 8px;
}
.qrcode-drop{
position: absolute;
left: -116px;
top: -12px;
z-index: 1;
width: 190px;
height: 404px;
border: 1px solid #DDDDDD;
border-bottom: 3px solid #000;
background-color: #fff;
display: none;
}
.qrcode-drop::after{
position: absolute;
top: -4px;
right: 29px;
content: '';
width: 0;
height: 0;
border: 4px solid #fff;
border-top: none;
border-color: transparent transparent #fff transparent;
}
.qrcode-wrapper:hover .qrcode-drop{
display: block;
}
.qrcode:hover .qrcode-drop{
display: block;
}
.qrcode-drop div{
width: 190px;
height: 70px;
padding: 15px 0;
border-bottom: 1px solid #ddd;
position: relative;
}
.qrcode-drop div img{
position: absolute;
width: 70px;
height: 70px;
padding: 3px;
margin: 0;
border: 1px solid #ddd;
top: 12px;
left: 5.5px;
}
.qrcode-drop div p,
.qrcode-drop div a{
position: absolute;
font-size: 12px;
}
.qrcode-drop div p{
width: 94px;
height: 16.8px;
line-height: 16.8px;
}
.qrcode-drop div p:nth-of-type(1){
top: 14px;
right: 10px;
font-weight: bold;
color: #666;
}
.qrcode-drop div p:nth-of-type(2){
top: 33px;
right: 10px;
color: #D6291D;
}
.qrcode-drop div a{
width: 94px;
height: 25px;
line-height: 25px;
right: 10px;
bottom: 20px;
}
.qrcode-drop div a span{
display: inline-block;
width: 25px;
height: 25px;
background-image: url(../images/qrcode/sprite.png);
}
.qrcode-drop div a span:nth-of-type(2){
background-position: center;
}
.qrcode-drop div a span:nth-of-type(3){
background-position: bottom;
}
p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "微软雅黑";
color: #666666;
list-style: none;
}
.nav{
height: 30px;
border-bottom: 1px solid #ccc;
background-color: #e3e4e5;
}
.r_nav {
float: right;
line-height: 30px;
}
.r_nav li {
float: left;
position: relative;
}
.r_nav .line {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 10px 10px 0px 10px;
}
/* 京东导航栏 结束 */
.m_nav {
height: 140px;
position: relative;
}
.m_nav .logo {
float: left;
}
.m_nav .logo a {
width: 190px;
height: 140px;
display: block;
background:url("../images/logo.v3.jpg") no-repeat -5px -10px;
text-indent: -2000em;
}
.search_box {
float: left;
border:2px solid red;
margin-left: 70px;
margin-top: 25px;
position: relative;
}
.search_box .search {
width: 498px;
height: 33px;
padding-left: 25px;
box-sizing: border-box;
float: left;
}
.search_box .btn {
width: 60px;
height: 33px;
background-color: #f10215;
float: left;
}
.search_box .search_img {
position: absolute;
right: 15px;
top: 5px;
font-size: 20px;
color: #fff;
}
.search_box>a i {
position: absolute;
left: 460px;
bottom: 4px;
font-size: 23px;
color: #999;
}
.cart {
float: left;
width: 122px;
height: 31px;
border: 1px solid #ccc;
line-height: 24px;
text-align: center;
background-color: #fff;
margin-top: 25px;
margin-left: 22px;
position: relative;
}
.cart a{
padding-left: 6px;
}
.cart b {
font-size: 20px;
color: red;
position: relative;
top: 2px;
}
.cart span {
width: 14px;
height: 14px;
line-height: 14px;
background-color: red;
text-align: center;
color: #fff;
border-radius: 50%;
display: block;
position: absolute;
right: 78px;
top: 0px;
}
.hot_word ul{
float: left;
margin-left: -708px;
margin-top: 65px;
}
.hot_word li {
float: left;
margin-right: 10px;
}
.nav_item {
float: left;
margin-left: -42px;
margin-top: 50px;
}
.nav_item ul {
float: left;
padding-left: 60px;
}
.nav_item li {
float: left;
font-size: 15px;
}
.nav_item a {
padding: 0 10px;
}
.footer{
/*margin-top: 100px;*/
background-color: #f6f6f6;
}
.top_footer{
height: 100px;
border-bottom: 1px solid rgb(222, 222, 222);
}
.top_footer ul{
display: flex;
}
.top_footer li{
flex: 1;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 18px;
font-weight: 700;
position: relative;
}
.top_footer b{
width: 36px;
height: 42px;
line-height: 42px;
display: block;
background: url("../images/ico_service.png") no-repeat;
position: absolute;
top: 30px;
left: 25px;
text-indent: -2000em;
}
.top_footer .fast {
background-position: 0px -42px;
}
.top_footer .good {
background-position: 0px -85px;
}
.top_footer .save {
background-position: 0px bottom;
}
.middle_footer {
height: 220px;
border-bottom: 1px solid #ccc;
}
.middle_footer dl {
float: left;
width: 198px;
margin-top: 28px;
}
.middle_footer dt {
height: 30px;
font-size: 16px;
font-weight: 700;
}
.middle_footer dd {
height: 25px;
font-size: 13px;
}
.middle_footer .last-dl {
height: 147px;
background: url("../images/ico_footer.png") no-repeat;
}
.middle_footer .last-dl dt {
text-align: center;
}
.middle_footer .last-dl p {
padding: 0 5px;
line-height: 20px;
}
.middle_footer .last-dl a {
float: right;
margin-right: 10px;
margin-top: 5px;
}
.bottom_footer {
height: 300px;
padding-top: 10px;
text-align: center;
}
.bottom_footer p{
font-size: 13px;
}
.bottom_footer span {
margin: 0 10px;
}
.bottom_footer .public {
margin-top: 10px;
}
.bottom_footer .public span{
margin: 0 8px;
}
.bottom_footer img{
width: 583px;
height: 39px;
margin-top: 50px;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
