HTML+CSS3的购物网站（首页+商品页+购买页）_苦涩精灵

大大的周 02-07 809

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="#"><<上一页</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="#">下一页>></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>></li> <li><a href="#">Apple苹果 </a>></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

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太大，图片了）：

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