欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 HTML+CSS案例——几行代码解决京东购物界面

程序员文章站 2022-03-13 07:58:42
文章目录完整项目界面展示GIF界面代码index.htmlindex.css(中间主要部分)base.css(头部,尾部)normal.css图片资源完整项目https://download.csdn.net/download/weixin_45525272/12596801界面展示GIF界面代码index.html...

完整项目

https://download.csdn.net/download/weixin_45525272/12596801

界面展示

荐
                                                        HTML+CSS案例——几行代码解决京东购物界面

GIF

荐
                                                        HTML+CSS案例——几行代码解决京东购物界面

界面代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
	<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
	<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
	<!-- 网页图标 -->
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<!-- normalize 里面css 初始化 针对浏览器 -->
	<link rel="stylesheet" href="css/normalize.css" />
	<!-- base 里面只写公共样式 是对京东网页 头部和底部样式 -->
	<link rel="stylesheet" href="css/base.css" />
	<!-- 京东首页的css  只写首页的 独有的-->
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
		<!-- 京东头部广告开始 -->
		<div class="J_event">
			<a href="#" class="w">
				<!-- 小错号 -->
				<i></i>
			</a>
		</div>
		<!-- 头部广告结束 -->

		<!-- 快捷导航栏开始 -->
		<div class="shortcut">
			<div class="w">
				<ul class="fl">
					<li>
						<i class="pos"></i>
						沧州
					</li>
				</ul>
				<ul class="fr"> 
					<li>
						<a href="#">
							你好,请登录&nbsp;&nbsp;
						</a>
						<a href="#" class="style-red">
							免费注册
						</a>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">
							我的订单
						</a>
					</li>
					<li class="spacer"></li>
					<li class="dropdown">
						<a href="#">
							我的京东
							<i></i>
						</a>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">
							京东会员
						</a>
					</li>
					<li class="spacer"></li>
					<li>
						<a href="#">
							企业采购
						</a>
					</li>
					<li class="spacer"></li>
					<li class="dropdown">
						<a href="#">
							客户服务
							<i></i>
						</a>
					</li>
					<li class="spacer"></li>
					<li class="dropdown">
						<a href="#">
							网站导航
							<i></i>
						</a>
					</li>
					<li class="spacer"></li>
					<li style="position: relative; z-index: 1;">
						<a href="#">
							手机京东
						</a>
					<div class="erweima">
						<img src="images/erweima.png" alt="">
					</div>
				</li>
				</ul>
			</div>
		</div>
		<!-- 快捷导航栏结束 -->
		<!-- header 部分 开始 -->
		<div class="header">
			<div class="w inner">
				<!-- logo部分 -->
				<div class="logo">
					<h1>
						<a href="#" title="京东网">京东</a>
					</h1>
				</div>
				<!-- 搜索部分 -->
				<div class="search">
					<input type="text" value="单反相机">
					<button>
						<i></i>
					</button>
					<em></em>
				</div>
							 <!-- 热词部分 -->
				<div class="hotwords">
					<a href="#" class="style-red">学生专享</a>
					<a href="#">300减160</a>
				 	<a href="#">七折返场</a>
				 	<a href="#">骑行运动</a>
				 	<a href="#">家电榜单</a>
				 	<a href="#">无损播放器</a>
				 	<a href="#">汽车脚垫</a>
				 	<a href="#">巧克力</a>
				 	<a href="#">铝合金门窗</a>
				</div>
				<!-- 购物车 -->
				<div class="myCar">
					<i></i>
					<a href="#">我的购物车</a>
					<s>0</s>
				</div>
				<!-- 电脑 -->
				<div class="computer">
					<a href="#">
						<img src="images/computer.jpg" height="40" width="190" alt="">
					</a>
				</div>
				<!-- 导航栏信息 -->
				<div class="navitems">
					<ul>
						<li><a href="#">秒杀</a></li>
						<li><a href="#">秒杀</a></li>
						<li><a href="#">秒杀</a></li>
						<li><a href="#">秒杀</a></li>
					</ul>
					<div class="spacer"></div>
					<ul>
						<li><a href="#">京东服饰</a></li>
						<li><a href="#">京东服饰</a></li>
						<li><a href="#">京东服饰</a></li>
						<li><a href="#">京东服饰</a></li>
					</ul>
					<div class="spacer"></div>
					<ul>
						<li><a href="#">京东金融</a></li>
					</ul>
				</div>
			</div>
		
		</div>
		<!-- header 部分 end-->

		 <!-- 页面主要部分开始 -->
		 <div class="jd">
		 	<div class="w jd-inner">
		 		<div class="jd-clo1">
		 			<ul>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 				<li>
		 					<a href="#">手机</a>
		 					<span>/</span>
		 					<a href="#">运营商</a>
		 					<span>/</span>
		 					<a href="#">数码</a>
		 				</li>
		 			</ul>
		 		</div>
		 		<div class="jd-clo2">
		 			<div class="jd-clo2-hd">
		 				<a href="#" class="arr-l"></a>
		 				<a href="#" class="arr-r"></a>

		 				<ol>
		 					<li class="current"></li>
		 					<li></li>
		 					<li></li>
		 					<li></li>
		 					<li></li>
		 					<li></li>
		 					<li></li>
		 					<li></li>
		 				</ol>

		 				<ul>
		 					<li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
		 				</ul>
		 			</div>
		 			<div class="jd-clo2-bd">
	    				<div class="firstPic">
	    					<img src="images/pic1.jpg" >
	    				</div>
	    				<div>
	    					<img src="images/pic2.jpg" >
	    				</div>
    				</div>
		 		</div>
		 		<div class="jd-clo3">
		 			<!-- 用户部分 -->
		 			<div class="user">
		 				 <div class="user-info">
	                        Hi, 欢迎来到京东!  <br />
	                        <a href="#">登录</a> 
	                        <a href="#">注册</a> 
	                        <a href="#" class="info-img">
	                            <img src="images/no_login.jpg">
	                        </a>
                        </div>
                        <div class="user-profit">
                        	<a href="#">新人福利</a>
                        	<a href="#">PLUS会员</a>
                        </div>
                    </div>
		 			
		 			<!-- 新闻部分 -->
		 			<div class="news">
		 				 <div class="tab-hd">
	                        <a href="javascript:;" class="cuxiao">促销</a>
	                        <a href="javascript:;">公告</a>
	                        <a href="#" class="more1">更多</a>
	                        <div class="line"></div>
                    	</div>
                   		 <div class="tab-bd">
	                        <ul>
	                            <li><a href="#">蓄电池专场下单立减100元</a></li>
	                            <li><a href="#">蓄电池专场下单立减100元</a></li>
	                            <li><a href="#">蓄电池专场下单立减100元</a></li>
	                            <li><a href="#">蓄电池专场下单立减100元</a></li>
	                        </ul>
                    	</div>
		 			</div>
					<!-- 服务部分 -->
					<div class="jd-service">
						<ul>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>
	                        <li>
	                            <a href="#">
	                                <i></i>
	                                <p>机票</p>
	                            </a>
	                        </li>

                    	</ul>
					</div>
		 		</div>
		 	</div>
		 		<!-- 广告结束 -->
	    	<div class="ad">
	    		<a href="#"></a>
	    	</div>
		 </div>
		<!-- 页面主要部分结束 -->

		 <!-- 页面底部分开始 -->
		 <div class="w footer">
		 	<!-- 多快好省模块 -->
		 	<div class="footer-service">
		 		<div class="footer-service-inner">
		 			<ul>
		 				<li>
		 					<div class="service_unit">
		 						<h5></h5>
		 						<p>品类齐全,轻松购物</p>
		 					</div>
		 				</li>
		 				<li>
		 					<div class="service_unit">
		 						<h5 class="kuai"></h5>
		 						<p>多仓直发,极速配送</p>
		 					</div>
		 				</li>
		 				<li>
		 					<div class="service_unit">
		 						<h5 class="hao"></h5>
		 						<p>正品行货,精致服务</p>
		 					</div>
		 				</li>
		 				<li>
		 					<div class="service_unit">
		 						<h5 class="sheng"></h5>
		 						<p>天天低价,畅选无忧</p>
		 					</div>
		 				</li>
		 			</ul>
		 		</div>
		 	</div>
		 	<!-- 帮助模块 -->
		 	<div class="help">
		 		<dl>
     	  	 		<dt>购物指南</dt>
     	  	 		<dd><a href="#">购物流程</a></dd>
     	  	 		<dd><a href="#">会员介绍</a></dd>
     	  	 		<dd><a href="#">生活旅行</a></dd>
     	  	 		<dd><a href="#">常见问题</a></dd>
     	  	 		<dd><a href="#">大家电</a></dd>
     	  	 		<dd><a href="#">联系客服</a></dd>
     	  	 	</dl>
     	  	 	<dl>
     	  	 		<dt>购物指南</dt>
     	  	 		<dd><a href="#">购物流程</a></dd>
     	  	 		<dd><a href="#">会员介绍</a></dd>
     	  	 		<dd><a href="#">生活旅行</a></dd>
     	  	 		<dd><a href="#">常见问题</a></dd>
     	  	 		<dd><a href="#">大家电</a></dd>
     	  	 		<dd><a href="#">联系客服</a></dd>
     	  	 	</dl>
     	  	 	<dl>
     	  	 		<dt>购物指南</dt>
     	  	 		<dd><a href="#">购物流程</a></dd>
     	  	 		<dd><a href="#">会员介绍</a></dd>
     	  	 		<dd><a href="#">生活旅行</a></dd>
     	  	 		<dd><a href="#">常见问题</a></dd>
     	  	 		<dd><a href="#">大家电</a></dd>
     	  	 		<dd><a href="#">联系客服</a></dd>
     	  	 	</dl>
     	  	 	<dl>
     	  	 		<dt>购物指南</dt>
     	  	 		<dd><a href="#">购物流程</a></dd>
     	  	 		<dd><a href="#">会员介绍</a></dd>
     	  	 		<dd><a href="#">生活旅行</a></dd>
     	  	 		<dd><a href="#">常见问题</a></dd>
     	  	 		<dd><a href="#">大家电</a></dd>
     	  	 		<dd><a href="#">联系客服</a></dd>
     	  	 	</dl>
     	  	 	<dl>
     	  	 		<dt>购物指南</dt>
     	  	 		<dd><a href="#">购物流程</a></dd>
     	  	 		<dd><a href="#">会员介绍</a></dd>
     	  	 		<dd><a href="#">生活旅行</a></dd>
     	  	 		<dd><a href="#">常见问题</a></dd>
     	  	 		<dd><a href="#">大家电</a></dd>
     	  	 		<dd><a href="#">联系客服</a></dd>
     	  	 	</dl>
     	  	 	<dl class="cover">
     	  	 		<dt>京东自营覆盖区县</dt>
     	  	 		<dd class="info">京东已向全国2661个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。
     	  	 		</dd>
     	  	 		<dd class="more">
     	  	 			<a href="#">查看详情 > </a>
     	  	 		</dd>
     	  	 		
     	  	 	</dl>
		 	</div>
		 	<!-- 版权模块 -->
		 	<div class="copyright">
		 		<div class="links">
					<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</a>
					<span>|</span>
					<a href="#">Site</a>
					<span>|</span>
					<a href="#">Media & IR</a>
					<span>|</span>
				</div>

				<div class="c-info">
					<p>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</p>
					<p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话:4006561155</p>
					<p>Copyright © 2004 - 2017  京东JD.com 版权所有|消费者维权热线:4006067733经营证照</p>
					<p>京东旗下网站:京东支付|京东云</p>
				</div>
				<div class="tupian">
					<a href="#"></a>
					<a href="#" class="kexin"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
		 	</div>
		 </div>
		 <!-- 页面底部分结束 -->
</body>
</html>

index.css(中间主要部分)

/*广告*/
.ad {
	height: 480px;
	background: url(../images/bg.png) no-repeat top center;
	position: absolute;  /* 行内块转换 */
	top: 0;
	left: 0;
	width: 100%;  /* 强制显示宽度 */
}
.ad a {
	/*display: block;*/
	height: 100%;
}

/*广告结束*/



/* 主界面开始*/
.jd	{
	/*background-color: pink;*/
	position: relative;
}

.jd-inner {
	height: 480px;
	/*background-color: skyblue;*/
	/*为了不被盖住*/
	z-index: 999;  /* 只有定位的盒子才有 z-index */
	position: relative;
}

.jd-clo1 {
	width: 190px;
	height: 465px;
	background-color: #6E6568;
	float: left;
	padding-top: 15px;
}
.jd-clo1 li {
	padding-left: 10px;
	height: 28px;
	line-height: 28px;
}
.jd-clo1 li:hover {
	background-color: #999395;
}
.jd-clo1 li a {
	color: #fff;
	font-size: 14px;
}
.jd-clo1 li span {
	color: #fff;
	font-size: 12px;
}

.jd-clo2 {
	width: 790px;
	height: 480px;
	float: left;
	margin-left: 10px;
	/*background-color: yellow;*/
}
.jd-clo2-hd {
	height: 340px;
	margin-bottom: 10px;
	position: relative;
}
.jd-clo2-bd div {
	width: 390px;
	height: 130px;
	float: left;
}
.jd-clo2-bd div img {
	width: 100%;
}
.firstPic {
	margin-right: 10px;
}

.arr-l, .arr-r {
	position: absolute;
	top: 50%;
	margin-top: -30px;
	width: 30px;
	height: 60px;
	background:rgba(0,0,0,.3);
	font-family: "icomoon";
	color: #fff;
	text-align:center;
	line-height: 60px;
	font-size: 25px;
}
.arr-l {
	left: 0;
}
.arr-r {
	right: 0;
}

.jd-clo2-hd ol {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -90px;
	width: 180px;
	height: 20px;
	background: rgba(255,255,255,0.3);
	border-radius: 10px;
}
.jd-clo2-hd ol  li {
	width: 12px;
	height: 12px;
	background-color: #fff;
	border-radius: 50%;
	float: left;
	margin: 4px 5px;
	cursor: pointer;
}
.jd-clo2-hd .current {
	background-color: #f10215;
}
.jd-clo3 {
	width: 190px;
	height: 480px;
	float: right;
}
.jd-clo3 a {
	font-size: 12px;
	color: #747474;
}

.user {
	height: 95px;
	padding: 20px 15px 0;
}

.user-info {
	height: 40px;
	padding-left: 54px;
	font-size: 12px;
	color: #747474;
	line-height: 22px;
	position: relative;
}
.user-info a  {
	font-size: 12px;
	color: #747474;
}
.user-info a:hover  {
	
	color: #f10215;
}

.info-img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	overflow: hidden;
}
.info-img  img {
	width: 100%;
	/*自动跟随宽度一起缩放*/
	height: auto;
}
.user-profit {

	margin-top: 14px;
}
.user-profit a {
	float: left;
   width: 70px;
   height: 20px;
   border: 2px solid #f10215;
   display: inline-block;
   font-size: 12px;
   color: #f10215;
   text-align: center;
   line-height: 20px;
   margin-right: 4px;
}
.user-profit a:hover {
	background-color: #f10215;
	color: #fff;
}
.news {
	height: 149px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px 15px 0;
}

.tab-hd {
	border-bottom: 1px solid #CCC;
	padding: 3px 0;
	position: relative;
}
.tab-hd a {
	margin: 0 4px;
}
.cuxiao {
	border-right: 1px solid #ccc;
	padding-right: 10px;
}
.news .more1 {
	position: absolute;
	top: 6px;
	right: 0;

}
.line {
	width: 28px;
	height: 2px;
	background-color: #f10215;
	position: absolute;
	bottom: -1px;
	left: 0;
}
.tab-bd {
	margin-top: 10px;
}
.tab-bd li {
	height: 23px;
	line-height: 23px;
}

.jd-service  ul {
	width: 195px;
}
.jd-service li {
	width: 47px;
	height: 69px;
	/* background-color: purple; */
	float: left;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.jd-service li a {
	width: 100%;
	height: 100%;  /* 根据父亲 */
	/* height: auto; 针对于自己的高度和宽度 */
	display: block;
}
.jd-service  i {
	display: block;
	width: 24px;
	height: 24px;
	margin: 15px auto 8px;
	background: url(../images/sprite_fs@1x.png) no-repeat;
}
.jd-service  p {
	text-align: center;
}

base.css(头部,尾部)

/*版心主要通用*/
.w {
	width: 1190px;
	margin: auto;
}

.fr {
	float: right;
}
.fl {
	float: left;
}
.style-red {
	color: #f10215!important;
}
li {
	list-style: none;
}
ul {
	margin: 0;
	padding: 0;
}
input, button {
	padding: 0;
	margin: 0;
}
a {
	text-decoration: none;
}
img {
	vertical-align: top;
}
.clearfix:before,.clearfix:after { 
  content:"";
  display: table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?axvffw');
  src:  url('../fonts/icomoon.eot?axvffw#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?axvffw') format('truetype'),
    url('../fonts/icomoon.woff?axvffw') format('woff'),
    url('../fonts/icomoon.svg?axvffw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #F6F6F6;
}

/*京东顶部*/
.J_event {
	background-color: #000;
}

.J_event a {
	display: block;
	height: 88px;
	background: url(../images/top.jpg) no-repeat;
	position: relative;
}

.J_event a i {
	width: 20px;
	height: 20px;
	font-family: "icomoon";
	position:absolute;
	right: 0;
	top: 6px;
	font-style: normal;
	text-align:center;
	line-height: 20px;
	color: #fff;
	background: rgba(0,0,0, .3);
}

.J_event a i:hover {
	color: #F10215;
}

/*京东导航栏*/
.shortcut {
	height: 30px;
	line-height: 30px;
	background-color: #E3E4E5;
	border-bottom: 1px solid #DDDDDD;
	color:#9D9D9D;
	font-size: 12px;
}

.shortcut a {
	color: #9D9D9D;
	font-size: 12px;
	text-decoration: none;
}

.shortcut a:hover {
	color: #c81623;
}

.pos {
	font-family: "icomoon";
	font-style: normal;
	font-size: 14px;
	color: #f10215;
}

.shortcut .fl li {
	margin-left: 200px;
	height: 30px;
	overflow: hidden;
}

.shortcut .fr li {
	float: left;
}

.spacer {
	width: 1px;
	height: 10px;
	background-color: #CCC;
	margin: 10px 10px 0;
}

.dropdown {
	padding-right: 15px;
	/*子绝父相*/
	position: relative; 
}

.dropdown i{
	font-family: "icomoon";
	font-style: normal;
	font-size: 16px;
	position: absolute;
	/*这俩是测出来的*/
	right: -2px;
	top: -2px;
}
.erweima {
	width: 60px;
	height: 60px;
	border: 1px solid #ccc;
	padding: 3px;
	position: absolute;
	top: 35px;
	left: -8px;
}

/*  header 部分 start  */
.header {
	height: 140px;
}
.inner {
	height: 140px;
	/*background-color: pink;*/
	position: relative;
}
/* logo模块 */
.logo {
	width: 190px;
	height: 170px;
	position: absolute;
	top: -30px;
	left: 0;
	background-color: red;
	box-shadow: 0 -12px 10px rgba(0,0,0,.3);
}

.logo h1 {
	margin: 0px;
}
.logo a {
	display: block;
	width: 190px;
	height: 170px;
	background:url(../images/logo.jpg) no-repeat;
	text-indent: -9999999px;
}
/* 搜索模块 */
.search {
	width: 550px;
	height: 35px;
	position: absolute;
	top: 25px;
	left: 320px;
}
.search input{
	width: 493px;
	height: 33px;
	border: 1px solid #F10215;
	padding-left: 5px;
	outline: none;
	color: #989898;
	float: left;
}
.search button {
	width: 50px;
	height: 35px;
	background-color: #F10215;
	float: left;
	cursor: pointer; /* 鼠标变成小手 */
	outline: none;
}
.search i {
	font-family: "icomoon";
	color: #fff;
	font-style: normal;
	font-size: 16px;
}
.search em {
	position: absolute;
	top: 10px;
	right: 65px;
	width: 19px;
	height: 15px;
	cursor: pointer;
	background: url(../images/sprite-search.png) no-repeat;
}
.search em:hover {
	background-position: -30px 0;
}
/* 热点模块 */
.hotwords {
	position: absolute;
	top: 70px;
	left: 320px;
}
.hotwords a {
	color: #9E9B99;
	font-size: 12px;
}
.hotwords a:hover {
	color: #f10215;
}

/* 购物车模块 */
.myCar {
	width: 188px;
	height: 33px;
	border: 1px solid #ccc;
	position: absolute;
	top: 25px;
	right: 100px;
	text-align: center;
	line-height: 33px;
}
.myCar a {
	font-size: 12px;
	color: #f10215;
}
.myCar i {
	font-family: "icomoon";
	font-style: normal;
	color: #f10215;
	margin-right: 3px;
}
.myCar s {
	position: absolute;
	top: 5px;
	left: 140px;
	text-decoration: none;
	background-color: #f10215;
	height: 16px;
	line-height: 16px;
	font-size: 12px;
	padding: 0 3px;
	border-radius: 5px;
	color: #fff;
}
/*电脑模块*/
.computer {
	position: absolute;
	right: 0;
	bottom: 10px;
}
/* 导航栏信息模块 */
.navitems {
	position: absolute;
	left: 200px;
	bottom: 0;
}
.navitems ul {
	float: left;
}
.navitems ul li {
	float: left;
	margin-left: 30px;
}
.navitems li a {
	font-size: 16px;
	color: #555A5F;
	font-weight: 700;
	height: 40px;
	line-height: 40px;
	display: block;
}
.navitems li a:hover {
	color: #f10215;
}
.navitems .spacer {
	float: left;
	margin-top: 15px;
	margin-left: 20px;
	margin-right: -10px;
}
/* footer 开始 */

.footer {
	height: 560px;
	background-color: #EAEAEA;
}
.footer-service {
	border-bottom: 1px solid #DEDEDE;
}
.footer-service-inner {
	padding: 30px 0;

}
.footer-service-inner li {
	float: left;
	width: 297px;
	height: 42px;
}
.service_unit {
	width: 225px;
	height: 42px;
	margin: 0 auto;
	position: relative;
}
.service_unit h5 {
	width: 36px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/ico_service.png) no-repeat;
	text-indent: -999px;
	overflow: hidden;
}
.service_unit p {
	line-height: 42px;
	margin-left: 45px;
	font-size: 18px;
	font-weight: 700;

}
.service_unit .kuai {
	background-position: 0 -44px;
}
.service_unit .hao {
	background-position: 0 -86px;
}
.service_unit .sheng {
	background-position: 0 -128px;
}
.help {
	height: 180px;
	padding-top: 20px;
}
.help dl {
	float: left;
	width: 195px;
}
.help dt {
	font-size: 14px;
	font-weight: 700;
	color: #666;
	height: 30px;
}
.help dd {
	height: 22px;
}
.help dd a{
	color: #727272;
	font-size: 12px;
}
.help dd a:hover {
	color: #f10215;
}

.help .cover {
	float: right;
	width: 207px;
	height: 150px;
	background: url(../images/ico_footer.png) no-repeat;
}
.cover dt {
	text-align: center;
}
.help .info {
	width: 175px;
	height: 50px;
	font-size: 12px;
	margin-top: 5px;
	margin-left: 10px;
	line-height: 18px;
	color: #727272;
}
.more {
	text-align: right;
	padding-right: 10px;
}
/* 版权模块 */
.copyright {
	border-top: 1px solid #ccc;
	padding-top: 15px;
}
.links {
	text-align: center;
}
.links a {
	color: #727272;
	font-size: 12px;
}
.links span {
	font-size: 12px;
	color: #D4CDCD;
	margin: 0 6px;
}
.c-info {
	font-size: 12px;
	color: #9E9E9B;
	text-align: center;
	line-height: 20px;
	margin-top: 10px;
}
.tupian {
	text-align: center;
	margin-top: 10px;
}
.tupian a{
	width: 103px;
	height: 32px;
	display: inline-block;
	background: url(../images/ico_footer.png) no-repeat 0 -151px;
}
.tupian .kexin {
	background-position: -104px -151px;
}

normal.css


html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

图片资源

荐
                                                        HTML+CSS案例——几行代码解决京东购物界面
荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面荐
                                                        HTML+CSS案例——几行代码解决京东购物界面

本文地址:https://blog.csdn.net/weixin_45525272/article/details/107243039