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

苦涩精灵

29545人浏览 · 2021-06-28 15:01:57

苦涩精灵 · 2021-06-28 15:01:57 发布

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.cn </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.cn </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.cn </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;
}

.commend{
	float: left;
	margin: 10px 0 0 0;
}

.commend-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;
}

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

.commend-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太大，图片了）：
在这里插入图片描述

在这里插入图片描述
代码全部手打，图片若有侵权，请联系

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m