HTML+CSS3的购物网站（首页+商品页+购买页）|电子爱好者

admin管理员组
文章数量:1655506

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/index.css" />
		<title></title>
	</head>
	<body>
		<div class="nav_div">
			<div class="d-center">
				<div class="navL">
					品优购欢迎您！
					<a href="#">请登录</a>
					<a class="style-red" href="#">免费注册</a>
				</div>
				<div class="navR">
					<ul>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li>
							<a href="#">我的品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">品优购会员</a>
						</li>
						<li>
							<a href="#">企业采购</a>
						</li>
						<li>
							<a href="#">关注品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">客户服务<span class="downArrow"></span></a>
						</li>
						<li>
							<a class="style-border-none" href="#">网站导航<span class="downArrow"></span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="head d-center">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="head-search">
				<input type="text" placeholder="请输入商品..." />
				<button>搜索</button>
				<ul>
					<li><a class="style-red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="shopCar">
				<span class="car"> </span>
				<span>我的购物车<span class="right-arrow">  </span></span>
				<span class="count">80</span>
			</div>
		</div>

		<div class="d-center">
			<div class="top-type">
				<ul>
					<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>

		<hr class="spacer-red" />

		<div class="d-center">
			<div class="center-left">
				<div class="goods-title">全部商品分类</div>
				<ul>
					<li>家用电器<span class="center-right-arrow">  </span></li>
					<li><a class="phone-link" href="list.html">手机</a>、数码、通信<span class="center-right-arrow">  </span></li>
					<li>电脑、办公<span class="center-right-arrow">  </span></li>
					<li>家居、家具、家装、厨具<span class="center-right-arrow">  </span></li>
					<li>男装、女装、童装、内衣<span class="center-right-arrow">  </span></li>
					<li>个户化妆、清洁用品、宠物<span class="center-right-arrow">  </span></li>
					<li>鞋靴、箱包、珠宝、奢侈品<span class="center-right-arrow">  </span></li>
					<li>运动户外、钟表<span class="center-right-arrow">  </span></li>
					<li>汽车、汽车用品<span class="center-right-arrow">  </span></li>
					<li>母婴、玩具乐器<span class="center-right-arrow">  </span></li>
					<li>食品、酒类、生鲜、特产<span class="center-right-arrow">  </span></li>
					<li>医药保健<span class="center-right-arrow">  </span></li>
					<li>图书、音像、电子书<span class="center-right-arrow">  </span></li>
					<li>彩票、旅行、充值、票务<span class="center-right-arrow">  </span></li>
					<li>理财、众筹、白条、保险<span class="center-right-arrow">  </span></li>
				</ul>
			</div>

			<div class="center-pic">
				<div class="pic-left-arrow">
					<span class="la">
						<</span> </div> <div class="pic-right-arrow">
							<span class="ra">  </span>
				</div>
				<ul>
					<li></li>
					<li class="style-fill"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="center-right">
				<div class="news-title">
					品优购快报
					<span>更多<span class="news-right-arrow">  </span></span>
				</div>
				<div class="news-item">
					<ul>
						<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
						<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
						<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
						<li><a href="#">【特惠】9.9元洗100张照片！</a></li>
						<li><a href="#">【特惠】长虹智能空调立省1000！</a></li>
					</ul>
				</div>
				<div class="news-pic-grid">
					<ul>
						<li class="plane-ticket"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a><img src="img/jian.jpg" /></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
						<li class="style-border"><a href="#">话费</a></li>
					</ul>
				</div>
				<div class="news-advertisement"></div>
			</div>
		</div>

		<div class="float-menu">
			<ul>
				<li class="menu-style-red">家用电器</li>
				<li>手机通讯</li>
				<li>家用电器</li>
				<li>家用电器</li>
				<li>家用电器</li>
			</ul>
		</div>

		<div class="d-center">
			<div class="commend">
				<div class="commend-title">
					<img src="img/clock.png" />
					今日推荐</div>
				<img class="commend-pic" src="upload/pic.jpg" />
				<img class="commend-pic" src="upload/pic.jpg" />
				<img class="commend-pic" src="upload/pic.jpg" />
				<img class="commend-pic" src="upload/pic.jpg" />
			</div>
		</div>
		
		<div class="d-center">
			<div class="electric">
				<h2>家用电器</h2>
				<ul>
					<li><a class="style-red" 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>
					<li><a class="none-right-border" href="#">高端电器</a></li>
				</ul>
			</div>
			
			<div class="electric-column-1">
				<div class="electric-text">
					<div><a href="#">节能补贴</a></div>
					<div><a href="#">4K电视</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">空气净化器</a></div>
					<div><a href="#">IH电饭煲</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">滚筒洗衣机</a></div>
					<div><a href="#">电热水器</a></div>
				</div>
				<img src="upload/floor-1-1.png" />
			</div>
			
			<div class="electric-column-2">
				<img src="upload/floor-1-b01.png" />
				<ul>
					<li class="pic-dot style-white"></li>
					<li class="pic-dot"></li>
					<li class="pic-dot"></li>
				</ul>
			</div>
			
			<div class="electric-column-3">
				<img src="upload/floor-1-2.png" />
				<img src="upload/floor-1-3.png" />
			</div>
			
			<div class="electric-column-4">
				<img src="upload/floor-1-4.png" />
			</div>
			
			<div class="electric-column-5">
				<img src="upload/floor-1-5.png" />
				<img src="upload/floor-1-6.png" />
			</div>
		</div>
		
		<div class="d-center">
			<div class="electric">
				<h2>手机通讯</h2>
				<ul>
					<li><a class="style-red" 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>
					<li><a class="none-right-border" href="#">高端电器</a></li>
				</ul>
			</div>
			
			<div class="electric-column-1">
				<div class="electric-text">
					<div><a href="#">节能补贴</a></div>
					<div><a href="#">4K电视</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">空气净化器</a></div>
					<div><a href="#">IH电饭煲</a></div>
				</div>
				<div class="electric-text">
					<div><a href="#">滚筒洗衣机</a></div>
					<div><a href="#">电热水器</a></div>
				</div>
				<img src="upload/floor-1-1.png" />
			</div>
			
			<div class="electric-column-2">
				<img src="upload/floor-1-b01.png" />
				<ul>
					<li class="pic-dot style-white"></li>
					<li class="pic-dot"></li>
					<li class="pic-dot"></li>
				</ul>
			</div>
			
			<div class="electric-column-3">
				<img src="upload/floor-1-2.png" />
				<img src="upload/floor-1-3.png" />
			</div>
			
			<div class="electric-column-4">
				<img src="upload/floor-1-4.png" />
			</div>
			
			<div class="electric-column-5">
				<img src="upload/floor-1-5.png" />
				<img src="upload/floor-1-6.png" />
			</div>
		</div>
		
		<div class="bottom">
			<div class="d-center">
				<div class="bottom-top">
					<ul>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
					</ul>
				</div>
				
				<div class="bottom-center">
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a class="style-red" href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-code">
						<p>帮助中心</p>
						<img src="upload/erweima.png" />
						<div>品优购客户端</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="readme-div">
			<div class="d-center">
				<ul>
					<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>
					<li><a href="#">品优购社区 </a>|</li>
					<li><a href="#">品优购公益 </a>|</li>
					<li><a href="#">English Site </a>|</li>
					<li><a href="#">Contact U</a></li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast </p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</body>
</html>

list.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/list.css" />
		<title></title>
	</head>
	<body>
		<div class="nav_div">
			<div class="d-center">
				<div class="navL">
					品优购欢迎您！
					<a href="#">请登录</a>
					<a class="style-red" href="#">免费注册</a>
				</div>
				<div class="navR">
					<ul>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li>
							<a href="#">我的品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">品优购会员</a>
						</li>
						<li>
							<a href="#">企业采购</a>
						</li>
						<li>
							<a href="#">关注品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">客户服务<span class="downArrow"></span></a>
						</li>
						<li>
							<a class="style-border-none" href="#">网站导航<span class="downArrow"></span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="head d-center">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="head-search">
				<input type="text" placeholder="请输入商品..." />
				<button>搜索</button>
				<ul>
					<li><a class="style-red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="shopCar">
				<span class="car"> </span>
				<span>我的购物车<span class="right-arrow">  </span></span>
				<span class="count">80</span>
			</div>
		</div>

		<div class="d-center">
			<ul class="goods-title">
				<li>
					<h2><a href="#">品优秒杀</a></h2>
				</li>
				<li>
					<h2><a href="#">即将售罄</a></h2>
				</li>
				<li>
					<h2><a href="#">超值低价</a></h2>
				</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>
				<li><a href="#">更多分类<span class="downArrow"></span></a></li>
			</ul>
		</div>
		<hr class="red-line" />

		<div class="d-center">
			<div class="advertisement"></div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="detail.html">立即抢购</a></button>
			</div>

			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>

			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>

			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>

			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
			<div class="phone-div">
				<img src="upload/mobile.jpg" />
				<div class="phone-title">Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</div>
				<div class="phone-div-column">
					<h2 class="price">￥6088</h2>
					<del class="old-price">￥6988</del>
				</div>
				<div class="phone-div-column">
					<div class="phone-sell">已售<span class="style-red">87%</span></div>
					<div class="degree">
						<div></div>
					</div>
					<div class="phone-remain">剩余<span class="style-red">29</span>件</div>
				</div>
				<button><a href="#">立即抢购</a></button>
			</div>
		</div>

		<div class="d-center control-div">
			<div class="control-bar">
				<button class="btn-pre"><a href="#">&lt;&lt;上一页</a></button>
				<button class="btn-page"><a href="#">1</a></button>
				<button class="btn-dot"><a href="#">2</a></button>
				<button class="btn-page"><a href="#">3</a></button>
				<button class="btn-page"><a href="#">4</a></button>
				<button class="btn-page"><a href="#">5</a></button>
				<button class="btn-dot">...</button>
				<button class="btn-next"><a href="#">下一页&gt;&gt;</a></button>
				<div class="words">共10页 到第</div>
				<input type="text" />
				<div class="words">页</div>
				<button class="btn-confirm">确定</button>
			</div>
		</div>

		<div class="bottom">
			<div class="d-center">
				<div class="bottom-top">
					<ul>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
					</ul>
				</div>

				<div class="bottom-center">
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a class="style-red" href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-code">
						<p>帮助中心</p>
						<img src="upload/erweima.png" />
						<div>品优购客户端</div>
					</div>
				</div>
			</div>
		</div>

		<div class="readme-div">
			<div class="d-center">
				<ul>
					<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>
					<li><a href="#">品优购社区 </a>|</li>
					<li><a href="#">品优购公益 </a>|</li>
					<li><a href="#">English Site </a>|</li>
					<li><a href="#">Contact U</a></li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast </p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</body>
</html>

detail.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/detail.css" />
		<title></title>
	</head>
	<body>
		<div class="nav_div">
			<div class="d-center">
				<div class="navL">
					品优购欢迎您！
					<a href="#">请登录</a>
					<a class="style-red" href="#">免费注册</a>
				</div>
				<div class="navR">
					<ul>
						<li>
							<a href="#">我的订单</a>
						</li>
						<li>
							<a href="#">我的品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">品优购会员</a>
						</li>
						<li>
							<a href="#">企业采购</a>
						</li>
						<li>
							<a href="#">关注品优购<span class="downArrow"></span></a>
						</li>
						<li>
							<a href="#">客户服务<span class="downArrow"></span></a>
						</li>
						<li>
							<a class="style-border-none" href="#">网站导航<span class="downArrow"></span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="head d-center">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="head-search">
				<input type="text" placeholder="请输入商品..." />
				<button>搜索</button>
				<ul>
					<li><a class="style-red" href="#">优惠购首发</a></li>
					<li><a href="#">亿元优惠</a></li>
					<li><a href="#">9.9团购</a></li>
					<li><a href="#">满99减30</a></li>
					<li><a href="#">办公用品</a></li>
					<li><a href="#">电脑</a></li>
					<li><a href="#">通信</a></li>
				</ul>
			</div>
			<div class="shopCar">
				<span class="car"> </span>
				<span>我的购物车<span class="right-arrow">  </span></span>
				<span class="count">80</span>
			</div>
		</div>

		<div class="d-center">
			<div class="top-type">
				<div class="red-top-title"><a href="#">全部商品分类</a></div>
				<ul>
					<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>

		<hr class="spacer-red" />

		<div class="d-center">
			<div class="url-link-word">
				<ul>
					<li><a href="#">手机、数码、通讯 </a></li>
					<li><a href="#">手机 </a>&gt;</li>
					<li><a href="#">Apple苹果 </a>&gt;</li>
					<li><a href="#">iphone 6S Plus系类</a></li>
				</ul>
			</div>
			<div class="goods-pic"></div>

			<div class="goods-detail">
				<h3>Apple iPhone 6S (A1700) 64G玫瑰金色 移动通信电信4G手机</h3>
				<p class="red-tip">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有话费返</p>
				<div class="detail-red">
					<div class="red-col-1">
						<div class="price-tag">价格</div>
						<div class="price">￥5299.00</div>
						<div class="down-price">降价通知</div>
						<div class="total-appraise">累计评价612188</div>
					</div>

					<div class="red-col-2">
						<div class="sale-tag">促销</div>
						<div class="sale-red-text"><a href="#">加购价</a></div>
						<div class="sale-content">满999.00另加20.00元,或满1999.00另加30.00,或满2999.00另加40.00元,即可在购物车换购热销商品 <a href="#">详情</a></div>
					</div>
				</div>

				<div class="col-3">
					<div class="support-tag">支持</div>
					<div class="support-text">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
				</div>

				<div class="col-4">
					<div class="choose-color-tag">选择颜色</div>
					<button id="btn-choose">玫瑰金</button>
					<button>金色</button>
					<button>白色</button>
					<button>土豪色</button>
				</div>

				<div class="col-5">
					<div class="vision-tag">选择版本</div>
					<button id="btn-choose">公开版</button>
					<button>移动4G</button>
				</div>

				<div class="col-6">
					<div class="buy-way-tag">购买方式</div>
					<button id="btn-choose">官方标配</button>
					<button>移动优惠购</button>
					<button>电信优惠购</button>
				</div>

				<div class="col-7">
					<input type="text" />
					<div class="control-num">
						<div class="add">+</div>
						<div class="sub">-</div>
					</div>
					<button class="add-shopcar">加入购物车</button>
				</div>
			</div>
		</div>
		
		<div class="d-center">
			<div class="goods-thumbnail">
				<img class="pre-btn" src="img/arrow-prev.png" />
				<div class="thumbnail"></div>
				<div class="thumbnail red-border"></div>
				<div class="thumbnail"></div>
				<div class="thumbnail"></div>
				<img class="next-btn" src="img/arrow-next.png" />
			</div>
		</div>
		
		<div class="d-center">
			<div class="relative-div">
				<div class="relative-title">
					<button>相关分类</button>
				</div>
				<ul>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
					<li>
						<img src="upload/aside_img.jpg" />
						<p>华为 HUAWEI P20 Pro 全面屏</p>
						<div>￥19</div>
						<button>加入购物车</button>
					</li>
				</ul>
			</div>
			
			<div class="detail-div">
				<div class="detail-nav">
					<ul>
						<li id="cur-nav">商品介绍</li>
						<li>规格与包装</li>
						<li>售后保障</li>
						<li>商品评价(50000)</li>
						<li>手机社区</li>
					</ul>
				</div>
				
				<div class="goods-parame">
					<ul>
						<li>分辨率：1920*1080(FHD)</li>
						<li>前置摄像头：1200万像素</li>
						<li>后置摄像头：500万像素</li>
						<li>核 数：其他</li>
						<li>频 率：以官网信息为准</li>
						<li>品 牌：Apple❤关注</li>
						<li>商品名称：APPLEiPhone 6s Plus</li>
						<li>商品编号：1861098</li>
						<li>商品毛重：0.15kg</li>
						<li>商品产地：中国大陆</li>
						<li>热 点：指纹识别，Apple Pay，金属机身，拍照神器</li>
						<li>系 统：苹果(IOS)</li>
						<li>像 素：1000-1600万</li>
						<li>机身内存：64GB</li>
					</ul>
				</div>
				
				<p class="look-more"><a href="#">查看更多参数<span class="downArrow"></span></a></p>
				
				<div class="goods-pics">
					<ul>
						<li><img src="upload/detail_img1.jpg" /></li>
						<li><img src="upload/detail_img2.jpg" /></li>
						<li><img src="upload/detail_img3.jpg" /></li>
					</ul>
				</div>
			</div>
		</div>
		
		
		<div class="bottom">
			<div class="d-center">
				<div class="bottom-top">
					<ul>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
						<li>
							<div class="ensure-pic"></div>
							<h3>正品保障</h3>
							<span>正品保障，提供发票</span>
						</li>
					</ul>
				</div>
		
				<div class="bottom-center">
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<li><a href="#">购物流程</a></li>
							<li><a href="#">会员介绍</a></li>
							<li><a class="style-red" href="#">生活旅行/团购</a></li>
							<li><a href="#">常见问题</a></li>
							<li><a href="#">大家电</a></li>
							<li><a href="#">联系客服</a></li>
						</ul>
					</div>
					<div class="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-div">
						<p>购物指南</p>
						<ul>
							<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="help-code">
						<p>帮助中心</p>
						<img src="upload/erweima.png" />
						<div>品优购客户端</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="readme-div">
			<div class="d-center">
				<ul>
					<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>
					<li><a href="#">品优购社区 </a>|</li>
					<li><a href="#">品优购公益 </a>|</li>
					<li><a href="#">English Site </a>|</li>
					<li><a href="#">Contact U</a></li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast </p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</body>
</html>

base.css

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消轮廓线 蓝色的*/
    outline: none;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

index.css

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.nav_div{
	height: 30px;
	background-color: rgba(241, 241, 241,1);
	line-height: 30px;
}

.d-center{
	width: 1200px;
	margin: 0 auto;
}

.navL{
	float: left;
}

.navR{
	float: right;
}

.style-red{
	color: rgba(200, 27, 39,1);
}

.navR li{
	float: left;
}

.navR a{
	border-right: 1px solid rgba(111, 111, 111,1);
	padding: 0px 10px 0px 10px;
}

.navR .style-border-none{
	border: 0px;
}

.navR .downArrow{
	font-family: "icomoon";
	font-size: 16px;
	line-height: 25px;
}

.head{
	height: 160px;
}

.logo{
	width: 180px;
	height: 60px;
	margin: 20px 0 0 0px;
	float: left;
	cursor: pointer;
}

.head-search{
	width: 450px;
	height: 60px;
	float: left;
	margin: 20px 0 0 180px;
}

.head-search input{
	width: 380px;
	height: 30px;
	border: 1.5px solid rgba(177, 25, 26,1);
	padding: 0 0 0 10px;
	float: left;
}

.head-search button{
	width: 57px;
	height: 33px;
	border: 1.5px solid rgba(177, 25, 26,1);
	background-color: rgba(177, 25, 26,1);
	color: white;
	float: left;
}

.head-search ul{
	float: left;
}

.head-search li{
	float: left;
	margin: 5px 0 0 15px;
}

.shopCar{
	width: 130px;
	height: 35px;
	float: left;
	margin: 20px 0 0 200px;
	border: 1px solid rgba(223, 223, 223,1);
	background-color: rgba(247, 247, 247,1);
	text-align: center;
	line-height: 32px;
}

.car{
	font-family: "icomoon";
	color: rgba(196, 0, 0,1);
}

.right-arrow{
	font-family: "icomoon";
	font-size: 12px;
}

.count{
	width: 20px;
	height: 16px;
	line-height: 16px;
	position: relative;
	display: block;
	background-color: rgba(196, 0, 0,1);
	color: white;
	border-radius: 50% 50% 50% 0;
	margin: -43px 0 0 100px;
}

.spacer-red{
	border: 1px solid rgba(200, 22, 35,1);
}

.top-type{
	width: 700px;
	height: 40px;
	margin: -45px 0 0 250px;
	line-height: 40px;
	font-size: 17px;
	float: left;
}

.top-type ul{
	float: left;
}

.top-type li{
	float: left;
	width: 85px;
	text-align: center;
}

.center-left{
	width: 220px;
	height: 467px;
	margin: -45px 0 0 0;
	color: white;
	float: left;
}

.goods-title{
	height: 43px;
	background-color: rgba(177, 25, 26,1);
	border: 1px solid rgba(177, 25, 26,1);
	text-align: center;
	line-height: 40px;
	font-size: 17px;
}

.center-right-arrow{
	font-family: "icomoon";
	font-size: 15px;
	float: right;
	margin: 0 15px 0 0;
}

.center-left ul{
	height: 525px;
	overflow: hidden;
}

.center-left li{
	width: 210px;
	height: 30px;
	line-height: 30px;
	padding: 0 0 0 10px;
	font-size: 13px;
	float: left;
	background-color: rgba(200, 22, 35,1);
	cursor: pointer;
	transition: all .5s;
}

.center-left li:hover{
	background-color: white;
	color: red;
	padding-left: 20px;
}

.center-left li:hover a{
	color: red;
}

.center-left li:hover .center-right-arrow{
	color: white;
}

.center-pic{
	height: 441px;
	width: 700px;
	float: left;
	background-image: url(../upload/focus.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 10px 0 0 10px;
}

.pic-left-arrow{
	height: 25px;
	width: 20px;
	background-color: rgba(34, 53, 58,0.6);
	margin: 200px 0 0 0;
	float: left;
	cursor: pointer;
}

.pic-right-arrow{
	height: 25px;
	width: 20px;
	background-color: rgba(34, 53, 58,0.6);
	margin: -20px 0 0 680px;
	float: left;
	cursor: pointer;
}

.la{
	font-family: "icomoon";
	font-size: 16px;
}

.ra{
	font-family: "icomoon";
	font-size: 16px;
}

.center-pic ul{
	float: left;
	margin-left: 50px;
}

.center-pic li{
	width: 10px;
	height: 10px;
	border: 2px solid rgba(255, 252, 243,0.4);
	margin: 190px 0 0 10px;
	float: left;
	border-radius: 50%;
	cursor: pointer;
}

.style-fill{
	background-color: white;
}

.center-right{
	width: 243px;
	height: 440px;
	border: 1px solid rgba(205, 205, 205,1);
	margin: 10px 0 0 10px;
	float: left;
}

.news-title{
	height: 28px;
	line-height: 30px;
	font-size: 13px;
	padding: 0 0 0 10px;
	border-bottom: 1px dashed rgba(0, 0, 0,0.3);
}

.news-title span{
	float: right;
	margin: 0 5px 0 0;
	cursor: pointer;
}

.news-right-arrow{
	font-family: "icomoon";
}

.news-item{
	border-bottom: 1px solid rgba(205, 205, 205,1);
}

.news-item li{
	height: 19px;
	padding: 5px 0 0 5px;
}

.news-pic-grid li{
	height: 70px;
	width: 59.9px;
	border-bottom: 1px solid rgba(0, 0, 0,0.3);
	float: left;
	background: url(../img/icons.png);
	/* background-position: -78px -16px; */
	text-align: center;
	cursor: pointer;
}

.news-pic-grid a{
	margin: 46px 0 0 15px;
	float: left;
}

.style-border{
	border-left: 1px solid rgba(0, 0, 0,0.3);
}

.news-advertisement{
	height: 72px;
	width: 243px;
	float: left;
	background: url(../upload/bargain.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 5px 0 0 0;
}

.float-menu{
	height: 180px;
	width: 70px;
	text-align: center;
	position: fixed;
	top: 100px;
	left: 50%;
	margin-left: -676px;
	z-index: 3;
	background-color: white;
}

.float-menu li{
	height: 30px;
	width: 60px;
	line-height: 30px;
	border-bottom: 1px solid lightgray;
	margin: 5px;
	cursor: pointer;
}

.menu-style-red{
	background-color: rgba(200, 22, 35,1);
	color: white;
}

mend{
	float: left;
	margin: 10px 0 0 0;
}

mend-title{
	position: relative;
	float: left;
	width: 188px;
	height: 143px;
	background-color: rgba(92, 82, 81,1);
	color: white;
	line-height: 220px;
	font-size: 19px;
	text-align: center;
}

mend-title img{
	position: absolute;
	margin: 30px 0 0 10px;
	cursor: pointer;
}

mend-pic{
	float: left;
	border-left: 1px solid rgba(205, 205, 205,1);
}

.electric{
	float: left;
	width: 1185px;
	border-bottom: 2px solid rgba(202, 85, 77,1);
	margin: 15px 0 0 0;
}

.electric h2{
	float: left;
	color: rgba(200, 22, 35,1);
}

.electric ul{
	float: right;
}

.electric li{
	float: left;
}

.electric a{
	padding: 0 8px 0 8px;
	border-right: 1px solid black;
}

.electric .none-right-border{
	border: 0px;
}

.electric-column-1{
	float: left;
	width: 192px;
	height: 360px;
	background-color: rgba(249, 249, 249,1);
	overflow: hidden;
}

.electric-text div{
	width: 80px;
	height: 28px;
	line-height: 28px;
	border-bottom: 1px solid rgba(210, 210, 210,1);
	text-align: center;
	margin: 0 5px 0 5px;
	float: left;
	cursor: pointer;
}

.electric-column-1 img{
	float: left;
	margin-top: 20px;
	transition: all .5s;
	cursor: pointer;
}

.electric-column-1 img:hover{
	padding-left: 8px;
}

.electric-column-2{
	float: left;
	width: 330px;
	background-color: rgba(249, 249, 249,1);
	overflow: hidden;
}

.electric-column-2 img{
	float: left;
	transition: all .5s;
	cursor: pointer;
}

.electric-column-2 img:hover{
	padding-left: 8px;
}

.electric-column-2 ul{
	position: absolute;
	margin: 330px 0 0 138px;
}

.electric-column-2 .pic-dot{
	float: left;
	height: 11px;
	width: 11px;
	background-color: black;
	margin: 0 5px 0 0;
	border-radius: 50%;
	transition: all .5s;
	cursor: pointer;
}

.electric-column-2 .style-white{
	background-color: white;
}

.pic-dot:hover{
	margin-left: 8px;
}

.electric-column-3{
	float: left;
	width: 220px;
	overflow: hidden;
}

.electric-column-3 img{
	float: left;
	border-bottom: 1px solid rgba(207, 207, 207,1);
	border-right: 1px solid rgba(207, 207, 207,1);
	transition: all .5s;
	cursor: pointer;
}

.electric-column-3 img:hover{
	padding-left: 8px;
}

.electric-column-4{
	float: left;
	width: 222px;
	overflow: hidden;
}

.electric-column-4 img{
	float: left;
	border-bottom: 1px solid rgba(207, 207, 207,1);
	border-right: 1px solid rgba(207, 207, 207,1);
	transition: all .5s;
	cursor: pointer;
}

.electric-column-4 img:hover{
	padding-left: 8px;
}

.electric-column-5{
	float: left;
	width: 222px;
	overflow: hidden;
}

.electric-column-5 img{
	float: left;
	border-bottom: 1px solid rgba(207, 207, 207,1);
	border-right: 1px solid rgba(207, 207, 207,1);
	transition: all .5s;
	cursor: pointer;
}

.electric-column-5 img:hover{
	padding-left: 8px;
}

.bottom{
	float: left;
	height: 300px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
}

.bottom-top{
	float: left;
	height: 100px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li{
	width: 180px;
	float: left;
	margin: 20px 55px 0 55px;
}

.ensure-pic{
	width: 60px;
	height: 50px;
	background-color: red;
	background: url(../img/icons.png) no-repeat;
	background-position: -253px -3px;
	float: left;
}

.bottom-top ul{
	height: 100px;
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li h3{
	float: left;
}

.bottom-top li span{
	float: left;
}

.bottom-center{
	float: left;
	height: 180px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}

.help-div{
	width: 100px;
	margin: 10px 30px 0 60px;
	float: left;
}

.help-div p{
	font-size: 17px;
}

.help-code{
	float: right;
	width: 100px;
	margin: 10px 50px 0 0;
}

.help-code p{
	font-size: 16px;
	text-align: center;
}

.help-code div{
	text-align: center;
}

.readme-div{
	float: left;
	height: 120px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}


.readme-div ul{
	float: left;
	margin: 20px 0 20px 220px;
}

.readme-div li{
	float: left;
	margin: 0 2px 0 2px;
}

.readme-div p{
	float: left;
	width: 100%;
	text-align: center;
}

.phone-link{
	color: white;
	transition: all .5s;
}

list.css

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.nav_div{
	height: 30px;
	background-color: rgba(241, 241, 241,1);
	line-height: 30px;
}

.d-center{
	width: 1200px;
	margin: 0 auto;
}

.navL{
	float: left;
}

.navR{
	float: right;
}

.style-red{
	color: rgba(200, 27, 39,1);
}

.navR li{
	float: left;
}

.navR a{
	border-right: 1px solid rgba(111, 111, 111,1);
	padding: 0px 10px 0px 10px;
}

.navR .style-border-none{
	border: 0px;
}

.navR .downArrow{
	font-family: "icomoon";
	font-size: 16px;
	line-height: 25px;
}

.head{
	height: 160px;
}

.logo{
	width: 180px;
	height: 60px;
	margin: 20px 0 0 0px;
	float: left;
	cursor: pointer;
}

.head-search{
	width: 450px;
	height: 60px;
	float: left;
	margin: 20px 0 0 180px;
}

.head-search input{
	width: 380px;
	height: 30px;
	border: 1.5px solid rgba(177, 25, 26,1);
	padding: 0 0 0 10px;
	float: left;
}

.head-search button{
	width: 57px;
	height: 33px;
	border: 1.5px solid rgba(177, 25, 26,1);
	background-color: rgba(177, 25, 26,1);
	color: white;
	float: left;
}

.head-search ul{
	float: left;
}

.head-search li{
	float: left;
	margin: 5px 0 0 15px;
}

.shopCar{
	width: 130px;
	height: 35px;
	float: left;
	margin: 20px 0 0 200px;
	border: 1px solid rgba(223, 223, 223,1);
	background-color: rgba(247, 247, 247,1);
	text-align: center;
	line-height: 32px;
}

.car{
	font-family: "icomoon";
	color: rgba(196, 0, 0,1);
}

.right-arrow{
	font-family: "icomoon";
	font-size: 12px;
}

.count{
	width: 20px;
	height: 16px;
	line-height: 16px;
	position: relative;
	display: block;
	background-color: rgba(196, 0, 0,1);
	color: white;
	border-radius: 50% 50% 50% 0;
	margin: -43px 0 0 100px;
}

.d-center{
	width: 1200px;
	margin: 0px auto;
}

.goods-title{
	float: left;
	margin: -30px 0 0 0;
}

.goods-title li{
	float: left;
	width: 90px;
	height: 30px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
}

.right-arrow{
	font-family: "icomoon";
	font-size: 12px;
}

.downArrow{
	font-family: "icomoon";
	font-size: 16px;
	line-height: 25px;
}

.red-line{
	float: left;
	width: 100%;
	border: 1px solid rgba(196, 0, 0,1);
	margin: 0px 0 0 0;
}

.advertisement{
	height: 120px;
	background: url(../upload/bg_03.png) no-repeat;
	margin: 0px 0 0 0;
}

.phone-div{
	width: 297px;
	height: 430px;
	border: 1px solid rgba(255, 255, 255,0);
	float: left;
	margin: 10px 0 0 0;
}

.phone-div:hover{
	border: 1px solid red;
}

.phone-title{
	font-size: 14px;
	float: left;
	margin: 0 0 8px 0;
	padding: 0 6px 0 6px;
}

.phone-div-column{
	width: 100%;
	float: left;
}

.price{
	float: left;
	color: rgba(231, 0, 18,1);
	padding: 0 6px 0 6px;
}

.old-price{
	float: left;
	color: rgba(164, 164, 164,1);
	font-weight: bold;
	padding: 5px 0 0 3px;
}

.phone-sell{
	float: left;
	padding: 0 6px 0 6px;
}

.degree{
	float: left;
	width: 130px;
	height: 10px;
	border: 1px solid rgba(177, 25, 26,1);
	margin: 3px 5px 0 5px;
	border-radius: 6px 6px 6px 6px;
}

.degree div{
	float: left;
	width: 113px;
	height: 8px;
	border: 1px solid red;
	background-color: rgba(242, 67, 73,1);
	border-radius: 6px 0px 0px 6px;
}

.phone-remain{
	float: left;
}

.phone-div button{
	width: 100%;
	height: 50px;
	background-color: rgba(177, 25, 26,1);
	color: white;
	font-size: 19px;
}

.phone-div a{
	color: white;
}

.phone-div a:hover{
	color: red;
}

.control-div{
	text-align: center;
}

.control-bar{
	display: inline-block;
	height: 40px;
	margin: 20px 0 20px 0;
}

.btn-pre,.btn-next{
	float: left;
	height: 40px;
	width: 80px;
	background-color: rgba(247, 247, 247,1);
	border: 1px solid rgba(204, 204, 204,1);
	margin: 0 2px 0 2px;
}

.btn-page{
	float: left;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(204, 204, 204,1);
	background-color: rgba(247, 247, 247,1);
	margin: 0 2px 0 2px;
}

.btn-dot{
	float: left;
	width: 40px;
	height: 40px;
	border: 0px solid rgba(204, 204, 204,1);
	background-color: rgba(247, 247, 247,0);
	cursor: text;
	margin: 0 2px 0 2px;
}

.words{
	float: left;
	height: 40px;
	line-height: 40px;
	margin: 0 0 0 5px;
}

.control-bar input{
	float: left;
	height: 40px;
	width: 40px;
	margin: 0 5px 0 5px;
	border: 1px solid rgba(204, 204, 204,1);
	text-align: center;
	transition: all .5s;
}

.control-bar input:focus{
	width: 60px;
	border: 1px solid rgba(14, 188, 215,1);
}

.btn-confirm{
	float: left;
	height: 40px;
	width: 50px;
	margin: 0 0 0 5px;
	border: 1px solid rgba(204, 204, 204,1);
	background-color: rgba(247, 247, 247,1);
}

.bottom{
	float: left;
	height: 300px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
}

.bottom-top{
	float: left;
	height: 100px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li{
	width: 180px;
	float: left;
	margin: 20px 55px 0 55px;
}

.ensure-pic{
	width: 60px;
	height: 50px;
	background-color: red;
	background: url(../img/icons.png) no-repeat;
	background-position: -253px -3px;
	float: left;
}

.bottom-top ul{
	height: 100px;
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li h3{
	float: left;
}

.bottom-top li span{
	float: left;
}

.bottom-center{
	float: left;
	height: 180px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}

.help-div{
	width: 100px;
	margin: 10px 30px 0 60px;
	float: left;
}

.help-div p{
	font-size: 17px;
}

.help-code{
	float: right;
	width: 100px;
	margin: 10px 50px 0 0;
}

.help-code p{
	font-size: 16px;
	text-align: center;
}

.help-code div{
	text-align: center;
}

.readme-div{
	float: left;
	height: 120px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}


.readme-div ul{
	float: left;
	margin: 20px 0 20px 220px;
}

.readme-div li{
	float: left;
	margin: 0 2px 0 2px;
}

.readme-div p{
	float: left;
	width: 100%;
	text-align: center;
}

.phone-link{
	color: white;
	transition: all .5s;
}

detail.css

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.nav_div{
	height: 30px;
	background-color: rgba(241, 241, 241,1);
	line-height: 30px;
}

.d-center{
	width: 1200px;
	margin: 0 auto;
}

.navL{
	float: left;
}

.navR{
	float: right;
}

.style-red{
	color: rgba(200, 27, 39,1);
}

.navR li{
	float: left;
}

.navR a{
	border-right: 1px solid rgba(111, 111, 111,1);
	padding: 0px 10px 0px 10px;
}

.navR .style-border-none{
	border: 0px;
}

.navR .downArrow{
	font-family: "icomoon";
	font-size: 16px;
	line-height: 25px;
}

.head{
	height: 160px;
}

.logo{
	width: 180px;
	height: 60px;
	margin: 20px 0 0 0px;
	float: left;
	cursor: pointer;
}

.head-search{
	width: 450px;
	height: 60px;
	float: left;
	margin: 20px 0 0 180px;
}

.head-search input{
	width: 380px;
	height: 30px;
	border: 1.5px solid rgba(177, 25, 26,1);
	padding: 0 0 0 10px;
	float: left;
}

.head-search button{
	width: 57px;
	height: 33px;
	border: 1.5px solid rgba(177, 25, 26,1);
	background-color: rgba(177, 25, 26,1);
	color: white;
	float: left;
}

.head-search ul{
	float: left;
}

.head-search li{
	float: left;
	margin: 5px 0 0 15px;
}

.shopCar{
	width: 130px;
	height: 35px;
	float: left;
	margin: 20px 0 0 200px;
	border: 1px solid rgba(223, 223, 223,1);
	background-color: rgba(247, 247, 247,1);
	text-align: center;
	line-height: 32px;
}

.car{
	font-family: "icomoon";
	color: rgba(196, 0, 0,1);
}

.right-arrow{
	font-family: "icomoon";
	font-size: 12px;
}

.count{
	width: 20px;
	height: 16px;
	line-height: 16px;
	position: relative;
	display: block;
	background-color: rgba(196, 0, 0,1);
	color: white;
	border-radius: 50% 50% 50% 0;
	margin: -43px 0 0 100px;
}

.d-center{
	width: 1200px;
	margin: 0px auto;
}

.spacer-red{
	border: 1px solid rgba(200, 22, 35,1);
}

.top-type{
	height: 40px;
	margin: -40px 0 0 0px;
	line-height: 40px;
	font-size: 17px;
	float: left;
}

.top-type ul{
	float: left;
}

.top-type li{
	float: left;
	padding: 0 20px 0 20px;
	text-align: center;
}

.red-top-title{
	float: left;
	width: 150px;
	background-color: rgba(177, 25, 26,1);
	text-align: center;
	font-size: 14px;
}

.red-top-title a{
	color: white;
}

.url-link-word{
	float: left;
	width: 100%;
}

.url-link-word li{
	float: left;
	margin: 5px 0 0 5px;
}

.goods-pic{
	float: left;
	width: 360px;
	height: 400px;
	border: 1px solid rgba(220, 220, 220,1);
	background: url(../upload/b3_20190731_105344.png) no-repeat;
	background-position: -70px -50px;
	background-size: 140%;
	margin: 10px 0 0 0;
}

.goods-detail{
	float: left;
	width: 750px;
	margin: 10px 0 0 30px;
}

.red-tip{
	color: rgba(225, 34, 40,1);
	font-size: 11px;
	margin: 5px 0 10px 0;
}

.detail-red{
	float: left;
	width: 750px;
	height: 120px;
	background-color: rgba(200, 22, 35,0.1);
}

.red-col-1{
	height: 50px;
}

.red-col-2{
	height: 70px;
}

.price-tag{
	float: left;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.price{
	float: left;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: rgba(225, 34, 40,1);
	font-size: 24px;
	margin: 0 0 0 10px;
}

.down-price{
	float: left;
	height: 50px;
	line-height: 55px;
	color: rgba(225, 34, 40,1);
	margin: 0 0 0 3px;
}

.total-appraise{
	float: right;
	height: 50px;
	line-height: 55px;
	margin: 0 5px 0 0;
}

.sale-tag{
	float: left;
	width: 50px;
	height: 70px;
	line-height: 30px;
	text-align: center;
}

.sale-red-text{
	float: left;
	height: 70px;
	line-height: 30px;
	text-align: center;
	margin: 0 0 0 10px;
}

.sale-red-text a{
	background-color: rgba(200, 22, 35,1);
	color: white;
	padding: 1px;
}

.sale-content{
	float: left;
	height: 70px;
	width: 390px;
	line-height: 30px;
	margin: 0 0 0 5px;
}

.col-3{
	height: 30px;
	margin: 130px 0 0 0;
}

.support-tag{
	float: left;
	height: 30px;
	width: 60px;
	line-height: 30px;
	padding: 0 0 0 13px;
}

.support-text{
	float: left;
	height: 30px;
	width: 350px;
	line-height: 30px;
	font-size: 11px;
}

.col-4{
	height: 40px;
	margin: 10px 0 0 0;
}

.choose-color-tag{
	float: left;
	height: 40px;
	width: 60px;
	line-height: 40px;
	padding: 0 0 0 5px;
	text-align: center;
	margin: 0 5px 0 0;
}

.col-4 button{
	float: left;
	height: 40px;
	width: 75px;
	background-color: rgba(247, 247, 247,1);
	color: rgba(102, 102, 102,1);
	border: 1px solid rgba(0,0,0,0.1);
	margin: 0 2px 0 0;
}

.col-4 button:hover,.col-4 button:focus{
	border: 1px solid rgba(200, 22, 35,1);
}

.col-5{
	height: 30px;
	margin: 10px 0 0 0;
}

.vision-tag{
	float: left;
	height: 30px;
	width: 60px;
	line-height: 30px;
	padding: 0 0 0 5px;
	text-align: center;
	margin: 0 5px 0 0;
}

.col-5 button{
	float: left;
	height: 30px;
	width: 75px;
	background-color: rgba(247, 247, 247,1);
	color: rgba(102, 102, 102,1);
	border: 1px solid rgba(0,0,0,0.1);
	margin: 0 2px 0 0;
}

.col-5 button:hover,.col-5 button:focus{
	border: 1px solid rgba(200, 22, 35,1);
}

.col-6{
	height: 30px;
	margin: 10px 0 0 0;
}

.buy-way-tag{
	float: left;
	height: 30px;
	width: 60px;
	line-height: 30px;
	padding: 0 0 0 5px;
	text-align: center;
	margin: 0 5px 0 0;
}

.col-6 button{
	float: left;
	height: 30px;
	width: 75px;
	background-color: rgba(247, 247, 247,1);
	color: rgba(102, 102, 102,1);
	border: 1px solid rgba(0,0,0,0.1);
	margin: 0 2px 0 0;
}

.col-6 button:hover,.col-6 button:focus{
	border: 1px solid rgba(200, 22, 35,1);
}

.col-7{
	height: 40px;
	margin: 10px 0 0 0;
}

.col-7 input{
	float: left;
	height: 40px;
	width: 30px;
	border: 1px solid rgba(0,0,0,0.1);
	margin: 0 0 0 12px;
	text-align: center;
}

.control-num{
	float: left;
	width: 10px;
	height: 40px;
}

.add,.sub{
	float: left;
	width: 10px;
	height: 20px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: rgba(247, 247, 247,1);
	cursor: pointer;
}

.add-shopcar{
	float: left;
	height: 40px;
	width: 120px;
	background-color: rgba(200, 22, 35,1);
	color: white;
	margin: 0 0 0 15px;
	border: 0px;
	font-weight: bold;
}

#btn-choose{
	border: 1px solid red;
}

.goods-thumbnail{
	float: left;
	height: 80px;
	width: 100%;
	margin: 30px 0 0 0;
}

.pre-btn,.next-btn{
	float: left;
	height: 40px;
	width: 25px;
	margin: 15px 0 0 20px;
}

.thumbnail{
	float: left;
	width: 45px;
	height: 47px;
	margin: 15px 0 0 15px;
	background: url(../upload/b3_20190731_105344.png) no-repeat;
	background-position: -3px -3px;
	background-size: 55px;
}

.red-border{
	border: 1px solid red;
}

.relative-div{
	float: left;
	height: 1355px;
	width: 200px;
	border: 1px solid rgba(0,0,0,0.2);
	margin: 50px 0 0 20px;
}

.relative-title{
	float: left;
	height: 30px;
	width: 200px;
}

.relative-title button{
	float: left;
	height: 30px;
	width: 80px;
	color: rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
	border-top: 0px;
	border-left: 0px;
}

.relative-div li {
	float: left;
	width: 180px;
	height: 220px;
	margin: 0 0 0 10px;
	border-bottom: 1px solid rgba(177, 177, 177,1);
}

.relative-div li div{
	font-weight: bold;
	margin: 5px 0 5px 0;
}

.relative-div li button{
	height: 25px;
	width: 90px;
	margin: 5px 0 0 45px;
	border: 1px solid rgba(177, 177, 177,1);
	color: rgba(0,0,0,0.7);
	font-size: 12px;
}

.detail-div{
	float: left;
	width: 900px;
	height: 1900px;
	margin: 50px 0 0 20px;
}

.detail-nav{
	float: left;
	width: 100%;
	background-color: rgba(241, 241, 241,1);
	border: 1px solid rgba(0,0,0,0.1);
}

.detail-nav li{
	float: left;
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 0 20px 0 20px;
	cursor: pointer;
}

#cur-nav{
	background-color: rgba(200, 22, 35,1);
	color: white;
}

.goods-parame{
	float: left;
	width: 100%;
	margin: 10px 0 0 10px;
}

.look-more{
	float: left;
	width: 730px;
	text-align: right;
	font-weight: bold;
}

.goods-pics li{
	float: left;
}

.downArrow{
	font-family: "icomoon";
	font-size: 16px;
	line-height: 25px;
}

.goods-pics{
	float: left;
	width: 900px;
}

.goods-pics img{
	float: left;
	width: 900px;
}

.bottom{
	float: left;
	height: 300px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	margin: 50px 0 0 0;
}

.bottom-top{
	float: left;
	height: 100px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li{
	width: 180px;
	float: left;
	margin: 20px 55px 0 55px;
}

.ensure-pic{
	width: 60px;
	height: 50px;
	background-color: red;
	background: url(../img/icons.png) no-repeat;
	background-position: -253px -3px;
	float: left;
}

.bottom-top ul{
	height: 100px;
	border-bottom: 1px solid rgba(217, 217, 217,1);
}

.bottom-top li h3{
	float: left;
}

.bottom-top li span{
	float: left;
}

.bottom-center{
	float: left;
	height: 180px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}

.help-div{
	width: 100px;
	margin: 10px 30px 0 60px;
	float: left;
}

.help-div p{
	font-size: 17px;
}

.help-code{
	float: right;
	width: 100px;
	margin: 10px 50px 0 0;
}

.help-code p{
	font-size: 16px;
	text-align: center;
}

.help-code div{
	text-align: center;
}

.readme-div{
	float: left;
	height: 120px;
	width: 100%;
	background-color: rgba(245, 245, 245,1);
	border-bottom: 1px solid rgba(211, 211, 211,1);
}


.readme-div ul{
	float: left;
	margin: 20px 0 20px 220px;
}

.readme-div li{
	float: left;
	margin: 0 2px 0 2px;
}

.readme-div p{
	float: left;
	width: 100%;
	text-align: center;
}

.phone-link{
	color: white;
	transition: all .5s;
}

项目演示（GIF太大，图片了）：

代码全部手打，图片若有侵权，请联系

本文标签：首页购物网站商品 html

版权声明：本文标题：HTML+CSS3的购物网站（首页+商品页+购买页）内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729704131a1210560.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

电子爱好者 - 最新技术资讯及电子产品介绍！

HTML+CSS3的购物网站（首页+商品页+购买页）

更多相关文章

html的a标签disabled禁用处理

ps cs6导出html,Photoshop CS6新功能：软件设置和预置迁移

【商品架构day8】京东几百亿的商品怎么搜索

某点评获取商品数据及方法（超实用）

交互设计软件 html,5款优秀的交互动效设计软件推荐，让你用到爽

html页面导出pdf截断问题,vue页面生成pdf且避免分页截断处理

itextpdf把html转成pdf时，表格table跨页时，整体分页，设置在表格元素内部避免进行分页的分页行为

html打印pdf相关的问题

将html转成pdf加水印,HTML页面转PDF加水印解决截取不全问题

html创建关联程序,如何在控制面板中创建电子邮件默认程序关联

360浏览器保存的html没有图标,电脑360浏览器图标不见了怎么办

Android插件化开发指南——实践之仿酷狗音乐首页（自定义ImageView控件）

多多进宝商品详情页，商品优惠券，商品优惠券id,商品属性id等参数接口代码展示

wps提示无法保存html,加密共享文件夹中的wps文件修改后无法保存，怎么办？

html超链接打开共享文件夹,教你如何访问共享文件夹

移动端+京东移动端首页制作

前端开发，实现B站首页动态banner

项目实战-1号店首页+购物页面

移动端、流式布局、京东移动端首页案例

京东移动端首页 案例

发表评论

推荐文章

CentOS7.9基于Apache2.4+Php7.4+Mysql8.0+Agent2架构部署Zabbix6.0LTS 亲测验证完美通过方案

DiskGenius逻辑分区转换为主分区

博图注册表删除方法_如何恢复回收站中被清空的文件?98%都知道的方法

Thinkpad X1 Carbon Gen1012,Yoga Gen7(21CB,21CC,21CD,21CE)(21KD,21KF,21KC,21KE),原装出厂Windows11系统镜像下载

DirectX12（D3D12）基础教程（二）——理解根签名、初识显存管理和加载纹理、理解资源屏障

热门文章

Autodesk 3DSMax 2014 安装注册说明

教你恢复清空的回收站里面的内容

1.网络基础-发展概述

模型部署之——解决pytorch转onnx模型出现identify

the &quot;true story&quot; about using data mining to identify a relationbetween sales of beer and diapers

i7 13620h和i5 12500h选哪个 酷睿i713620h和i512500h对比

腾讯云服务器硬盘价格,腾讯云服务器价格表（CPU内存带宽云硬盘收费标准）...

Appstore开发者后台https:appstoreconnect.apple.com无法访问的解决办法

转-手机天猫解耦之路

初始流媒体与javacv

最新文章

笔记本电脑会越用越卡，怎么办！！-----阿冬专栏

民用计算机的计算能力,什么时候民用计算机能达到现在排名前十的超级计算机的计算水平？ |...

win10计算机跑分,鲁大师如何跑分_鲁大师跑分详细教程

华硕顽石电脑共享名和计算机名称,华硕顽石五代FL8000UF：如同它的名字，像顽石一般实用...

ThinkPad所有系列分类

Win7怎么使用计划任务定时重新启动电脑

计算机网络什么叫接口,电脑上那么多接口都是干什么用的？接口知识介绍

电脑cpu

程序员下班关闭显示器，却从不关电脑，你知道为什么吗？

计算机cpu的字母,电脑处理器后面的字母你认识几个？不认识跟我来学学（intel篇）...

鲁大师2022年Q3电脑排行：御三家各有千秋，Q4将有大变动？

最佳编程 Linux 发行版：排名前 6

显卡 型号 后缀

根据软件的使用深度分析-运行达索系统SOLIDWORKS，怎么选择合适的工作站

上古可超频神U！超频后单核性能惊人秒i7，高特效畅玩黑神话也不在话下！

小米手机肿么还原时钟

15000流明是多少瓦

一般普通投影机功率多大?

苹果绿联转换器有些投影机不能用

坚果V9投影机具体参数?

有关九年级作文850字精选

80后90后_高一作文

中级卫生专业资格中医全科学主治医师中级模拟题2021年(9)案与解析

(精品)师范大学招考硕士研究生课程八六0试卷

ZXMVC8900(V3

【模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313】模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313 官方免费下载

【生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD】生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD 官方免费下载

【模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311】模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311 官方免费下载

【模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311】模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311 官方免费下载

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改 官方免费下载

如何实现高效的treenode搜索算法

treenode与链表有何本质区别

在哪些场景下应优先考虑使用treenode

treenode在树形结构中的角色是什么

如何通过treenode实现二叉树

京东移动端首页案例

the "true story" about using data mining to identify a relationbetween sales of beer and diapers

i7 13620h和i5 12500h选哪个酷睿i713620h和i512500h对比

显卡型号后缀

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改官方免费下载