HTML+CSS综合案例：品优购电商项目--代码
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /> <!-- 引入facicon.ico网页图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引入公共样式的css 文件 --> <link rel="stylesheet" href="css/common.css"> <!-- 引入 首页的css文件 --> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的品优购</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">品优购会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注品优购</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end --> <!-- header制作 --> <div class="header w"> <!-- logo --> <div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div> <!-- search --> <div class="search"> <input type="text" class="text" value="请搜索内容..."> <button class="btn">搜索</button> </div> <!-- hotwrods --> <div class="hotwrods"> <a href="#" class="style-red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> <div class="shopcar"> <i class="car"> </i>我的购物车 <i class="arrow"> </i> <i class="count">80</i> </div> </div> <!-- header 结束 --> <!-- nav start --> <div class="nav"> <div class="w"> <div class="dropdown fl"> <div class="dt"> 全部商品分类 </div> <div class="dd"> <ul> <li class="menu_item"><a href="#">家用电器</a> <i> </i> </li> <li class="menu_item"> <a href="list.html">手机</a> 、 <a href="#">数码</a> 、 <a href="#">通信</a> <i> </i> </li> <li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li> <li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li> <li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li> <li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li> <li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li> <li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li> <li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li> <li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li> <li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li> <li class="menu_item"><a href="#">医药保健</a> <i> </i> </li> <li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li> <li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li> <li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li> </ul> </div> </div> <!-- 右侧导航 --> <div class="navitems fl"> <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> </div> <!-- nav end --> <!-- main 模块 --> <div class="w"> <div class="main"> <div class="focus fl"> <a href="#" class="arrow-l"> < </a> <a href="#" class="arrow-r"> </a> <ul> <li> <a href="#"><img src="upload/focus.jpg" alt=""></a> </li> </ul> <ol class="circle"> <li></li> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <div class="newsflash fr"> <div class="news"> <div class="news-hd"> 品优购快报 <a href="#">更多</a> </div> <div class="news-bd"> <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> <div class="lifeservice"> <ul> <li> <a href="#"> <i class="service_ico service_ico_huafei"></i> <p>话费</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> <span class="hot"></span> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> <li> <a href="#"> <i class="service_ico service_ico_feiji"></i> <p>机票</p> </a> </li> </ul> </div> <div class="bargain"> <img src="upload/bargain.jpg" alt=""> </div> </div> </div> </div> <!-- 推荐服务模块 start --> <div class="recommend w"> <div class="recom-hd fl"> <img src="img/clock.png" alt=""> <h3>今日推荐</h3> </div> <div class="recom-bd fl"> <ul> <li> <a href="#"> <img src="upload/pic.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="upload/pic.jpg" alt=""> </a> </li> <li> <a href="#"> <img src="upload/pic.jpg" alt=""> </a> </li> <li class="last"> <a href="#"> <img src="upload/pic.jpg" alt=""> </a> </li> </ul> </div> </div> <!-- 推荐服务模块 end --> <!-- 楼层区 start --> <div class="floor"> <div class="jiadian w"> <div class="box-hd"> <h3>家用电器</h3> <div class="tab-list"> <ul> <li><a href="#" class="style-red">热门</a>|</li> <li><a href="#">大家电</a>|</li> <li><a href="#">生活电器</a>|</li> <li><a href="#">厨房电器</a>|</li> <li><a href="#">个护健康</a>|</li> <li><a href="#">应季电器</a>|</li> <li><a href="#">空气/净水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#">高端电器</a></li> </ul> </div> </div> <div class="box-bd"> <ul class="tab-con"> <li class="w209"> <ul class="tab-con-list"> <li> <a href="#">节能补贴</a> </li> <li> <a href="#">4K电视</a> </li> <li> <a href="#">空气净化器</a> </li> <li> <a href="#">IH电饭煲</a> </li> <li> <a href="#">滚筒洗衣机</a> </li> <li> <a href="#">电热水器</a> </li> </ul> <img src="upload/floor-1-1.png" alt=""> </li> <li class="w329"> <img src="upload/pic1.jpg" alt=""> </li> <li class="w219"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-2.png" alt=""> </a> </div> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-3.png" alt=""> </a> </div> </li> <li class="w220"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-4.png" alt=""> </a> </div> </li> <li class="w220"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-5.png" alt=""> </a> </div> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-6.png" alt=""> </a> </div> </li> </ul> <!-- <ul class="tab-con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> --> </div> </div> <div class="shouji w"> <div class="box-hd"> <h3>手机通讯</h3> <div class="tab-list"> <ul> <li><a href="#" class="style-red">热门</a>|</li> <li><a href="#">大家电</a>|</li> <li><a href="#">生活电器</a>|</li> <li><a href="#">厨房电器</a>|</li> <li><a href="#">个护健康</a>|</li> <li><a href="#">应季电器</a>|</li> <li><a href="#">空气/净水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#">高端电器</a></li> </ul> </div> </div> <div class="box-bd"> <ul class="tab-con"> <li class="w209"> <ul class="tab-con-list"> <li> <a href="#">节能补贴</a> </li> <li> <a href="#">4K电视</a> </li> <li> <a href="#">空气净化器</a> </li> <li> <a href="#">IH电饭煲</a> </li> <li> <a href="#">滚筒洗衣机</a> </li> <li> <a href="#">电热水器</a> </li> </ul> <img src="upload/floor-1-1.png" alt=""> </li> <li class="w329"> <img src="upload/pic1.jpg" alt=""> </li> <li class="w219"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-2.png" alt=""> </a> </div> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-3.png" alt=""> </a> </div> </li> <li class="w220"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-4.png" alt=""> </a> </div> </li> <li class="w220"> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-5.png" alt=""> </a> </div> <div class="tab-con-item"> <a href="#"> <img src="upload/floor-1-6.png" alt=""> </a> </div> </li> </ul> <!-- <ul class="tab-con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> --> </div> </div> </div> <!-- 楼层区 end --> <!-- 固定电梯导航 --> <div class="fixedtool"> <ul> <li class="current">家用电器</li> <li>手机通讯</li> <li>家用电器</li> <li>家用电器</li> <li>家用电器</li> <li>家用电器</li> </ul> </div> <!-- footer start --> <div class="footer"> <div class="w"> <!-- mod_service --> <div class="mod_service"> <ul> <li> <i class="mod-service-icon mod_service_zheng"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_kuai"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> </ul> </div> <!-- mod_help --> <div class="mod_help"> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item mod_help_app"> <dt>帮助中心</dt> <dd> <img src="upload/erweima.png" alt=""> <p>品优购客户端</p> </dd> </dl> </div> <!-- mod_copyright --> <div class="mod_copyright"> <p class="mod_copyright_links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p> </div> </div> </div> <!-- footer end --> </body> </html>
list.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表页-手机页面！</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /> <!-- 引入facicon.ico网页图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引入公共样式的css 文件 --> <link rel="stylesheet" href="css/common.css"> <!-- 引入 列表页面的css文件 --> <link rel="stylesheet" href="css/list.css"> </head> <body> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的品优购</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">品优购会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注品优购</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end --> <!-- header制作 --> <div class="header w"> <!-- logo --> <div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div> <!-- sk --> <div class="sk"> <img src="upload/sk.png" alt=""> </div> <!-- search --> <div class="search"> <input type="text" class="text" value="请搜索内容..."> <button class="btn">搜索</button> </div> <!-- hotwrods --> <div class="hotwrods"> <a href="#" class="style-red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> <div class="shopcar"> <i class="car"> </i>我的购物车 <i class="arrow"> </i> <i class="count">80</i> </div> </div> <!-- header 结束 --> <!-- nav start --> <div class="nav"> <div class="w"> <div class="sk_list fl"> <ul> <li><a href="#">品优秒杀</a></li> <li><a href="">即将售罄</a></li> <li><a href="">超值低价</a></li> </ul> </div> <div class="sk_con fl"> <ul> <li><a href="#">女装</a></li> <li><a href="#" class="style-red">女鞋</a></li> <li><a href="#">男装</a></li> <li><a href="#">男鞋</a></li> <li><a href="#">母婴童装</a></li> <li><a href="#">食品</a></li> <li><a href="#">智能数码</a></li> <li><a href="#">运动户外</a></li> <li><a href="#">更多分类</a></li> </ul> </div> </div> </div> <!-- nav end --> <!-- 列表页的内容区域 --> <div class="sk_container w"> <div class="sk_hd"> <img src="upload/bg_03.png" alt=""> </div> <div class="sk_bd clearfix"> <ul> <li class="sk_goods"> <a href="detail.html"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> </a> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> <li class="sk_goods"> <img src="upload/mobile.jpg" alt=""> <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5> <p class="sk_goods_price"><em>¥6088</em> <del>￥6988</del></p> <div class="sk_goods_progress"> 已售<i>87%</i> <div class="bar"> <div class="bar_in"></div> </div> 剩余<em>29</em>件 </div> <a href="#" class="sk_goods_buy">立即抢购</a> </li> </ul> </div> <!-- page分页制作 --> <div class="page"> <span class="page_num"> <a href="#" class="pn_prev"><<上一页 </a> <a href="#">1</a> <a href="#" class="current">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#" class="dotted">...</a> <a href="#" class="pn_next">下一页>></a> </span> <span class="page_skip"> 共10页 到第 <input type="text"> 页 <button>确定</button> </span> </div> </div> <!-- 列表页的内容区域 --> <!-- footer start --> <div class="footer"> <div class="w"> <!-- mod_service --> <div class="mod_service"> <ul> <li> <i class="mod-service-icon mod_service_zheng"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_kuai"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> </ul> </div> <!-- mod_help --> <div class="mod_help"> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item mod_help_app"> <dt>帮助中心</dt> <dd> <img src="upload/erweima.png" alt=""> <p>品优购客户端</p> </dd> </dl> </div> <!-- mod_copyright --> <div class="mod_copyright"> <p class="mod_copyright_links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p> </div> </div> </div> <!-- footer end --> </body> </html>
detail.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机详情页！</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" /> <!-- 引入facicon.ico网页图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引入公共样式的css 文件 --> <link rel="stylesheet" href="css/common.css"> <!-- 引入详情页面的css文件 --> <link rel="stylesheet" href="css/detail.css"> </head> <body> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的品优购</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">品优购会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注品优购</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end --> <!-- header制作 --> <div class="header w"> <!-- logo --> <div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div> <!-- search --> <div class="search"> <input type="text" class="text" value="请搜索内容..."> <button class="btn">搜索</button> </div> <!-- hotwrods --> <div class="hotwrods"> <a href="#" class="style-red">优惠购首发</a> <a href="#">亿元优惠</a> <a href="#">9.9元团购</a> <a href="#">美满99减30</a> <a href="#">办公用品</a> <a href="#">电脑</a> <a href="#">通信</a> </div> <div class="shopcar"> <i class="car"> </i>我的购物车 <i class="arrow"> </i> <i class="count">80</i> </div> </div> <!-- header 结束 --> <!-- nav start --> <div class="nav"> <div class="w"> <div class="dropdown fl"> <div class="dt"> 全部商品分类 </div> <div class="dd" style="display: none;"> <ul> <li class="menu_item"><a href="#">家用电器</a> <i> </i> </li> <li class="menu_item"> <a href="list.html">手机</a> 、 <a href="#">数码</a> 、 <a href="#">通信</a> <i> </i> </li> <li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li> <li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li> <li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li> <li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li> <li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li> <li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li> <li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li> <li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li> <li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li> <li class="menu_item"><a href="#">医药保健</a> <i> </i> </li> <li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li> <li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li> <li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li> </ul> </div> </div> <!-- 右侧导航 --> <div class="navitems fl"> <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> </div> <!-- nav end --> <!-- 详情页内容部分 --> <div class="de_container w"> <!-- 面包屑导航 --> <div class="crumb_wrap"> <a href="#">手机、数码、通讯</a> 〉 <a href="#">手机 </a> 〉 <a href="#">Apple苹果 </a> 〉 <a href="#">iphone 6S Plus系类</a> </div> <!-- 产品介绍模块 --> <div class="product_intro clearfix"> <!-- 预览区域 --> <div class="preview_wrap fl"> <div class="preview_img"> <img src="upload/s3.png" alt=""> </div> <div class="preview_list"> <a href="#" class="arrow_prev"></a> <a href="#" class="arrow_next"></a> <ul class="list_item"> <li> <img src="upload/pre.jpg" alt=""> </li> <li class="current"> <img src="upload/pre.jpg" alt=""> </li> <li> <img src="upload/pre.jpg" alt=""> </li> <li> <img src="upload/pre.jpg" alt=""> </li> <li> <img src="upload/pre.jpg" alt=""> </li> </ul> </div> </div> <!-- 产品详细信息 --> <div class="itemInfo_wrap fr"> <div class="sku_name"> Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机 </div> <div class="news"> 推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返 </div> <div class="summary"> <dl class="summary_price"> <dt>价格</dt> <dd> <i class="price">￥5299.00 </i> <a href="#">降价通知</a> <div class="remark">累计评价612188</div> </dd> </dl> <dl class="summary_promotion"> <dt>促销</dt> <dd> <em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》 </dd> </dl> <dl class="summary_support"> <dt>支持</dt> <dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd> </dl> <dl class="choose_color"> <dt>选择颜色</dt> <dd> <a href="javascript:;" class="current">玫瑰金</a> <a href="javascript:;">金色</a> <a href="javascript:;">白色</a> <a href="javascript:;">土豪色</a> </dd> </dl> <dl class="choose_version"> <dt>选择版本</dt> <dd> <a href="javascript:;" class="current">公开版</a> <a href="javascript:;">移动4G</a> </dd> </dl> <dl class="choose_type"> <dt>购买方式</dt> <dd> <a href="javascript:;" class="current">官方标配</a> <a href="javascript:;">移动优惠购</a> <a href="javascript:;">电信优惠购</a> </dd> </dl> <div class="choose_btns"> <div class="choose_amount"> <input type="text" value="1"> <a href="javascript:;" class="add">+</a> <a href="javascript:;" class="reduce">-</a> </div> <a href="#" class="addcar">加入购物车</a> </div> </div> </div> </div> <!-- 产品细节模块 product_detail --> <div class="product_detail clearfix"> <!-- aside --> <div class="aside fl"> <div class="tab_list"> <ul> <li class="first_tab ">相关分类</li> <li class="second_tab current">推荐品牌</li> </ul> </div> <div class="tab_con"> <ul> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> <li> <img src="upload/aside_img.jpg" alt=""> <h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5> <div class="aside_price">¥19</div> <a href="#" class="as_addcar">加入购物车</a> </li> </ul> </div> </div> <!-- detail --> <div class="detail fr"> <div class="detail_tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="detail_tab_con"> <div class="item"> <ul class="item_info"> <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.51kg</li> <li>商品产地：中国大陆</li> <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li> <li>系统：苹果（IOS）</li> <li>像素：1000-1600万</li> <li>机身内存：64GB</li> </ul> <p> <a href="#" class="more">查看更多参数</a> </p> <img src="upload/detail_img1.jpg" alt=""> <img src="upload/detail_img2.jpg" alt=""> <img src="upload/detail_img3.jpg" alt=""> </div> <!-- <div class="item">规格与包装</div> <div class="item">售后保障</div> --> </div> </div> </div> </div> <!-- 详情页内容部分 --> <!-- footer start --> <div class="footer"> <div class="w"> <!-- mod_service --> <div class="mod_service"> <ul> <li> <i class="mod-service-icon mod_service_zheng"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_kuai"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_bao"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> </ul> </div> <!-- mod_help --> <div class="mod_help"> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item"> <dt>购物指南</dt> <dd> <a href="#">购物流程 </a></dd> <dd> <a href="#">会员介绍 </a></dd> <dd> <a href="#">生活旅行/团购 </a></dd> <dd> <a href="#">常见问题 </a></dd> <dd> <a href="#">大家电 </a></dd> <dd> <a href="#">联系客服 </a></dd> </dl> <dl class="mod_help_item mod_help_app"> <dt>帮助中心</dt> <dd> <img src="upload/erweima.png" alt=""> <p>品优购客户端</p> </dd> </dl> </div> <!-- mod_copyright --> <div class="mod_copyright"> <p class="mod_copyright_links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p> </div> </div> </div> <!-- footer end --> </body> </html>
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 初始化css --> <link rel="stylesheet" href="css/base.css"> <!-- register css文件 --> <link rel="stylesheet" href="css/register.css"> </head> <body> <div class="w"> <!-- header --> <div class="header"> <div class="logo"> <a href="index.html"> <img src="img/logo.png" alt=""> </a> </div> </div> <!-- registerarea --> <div class="registerarea"> <h3> 注册新用户 <em> 我有账号，去<a href="login.html">登陆</a> </em> </h3> <div class="reg_form"> <form action="demo.php"> <ul> <li> <label for="tel">手机号:</label> <input type="text" class="inp" id="tel"> <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span> </li> <li> <label for="">短信验证码:</label> <input type="text" class="inp"> </li> <li> <label for="">登陆密码:</label> <input type="text" class="inp"> <span class="success"> <i class="success_icon"></i> 恭喜您输入正确 </span> </li> <li class="safe"> 安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li> <li> <label for="">确认密码:</label> <input type="text" class="inp"> <span class="success" > <i class="success_icon"></i> 恭喜您输入正确 </span> </li> <li class="agree"> <input type="checkbox" >同意协议并注册 <a href="#">《知果果用户协议》</a> </li> <li> <input type="submit" value="完成注册" class="over"> </li> </ul> </form> </div> </div> <div class="footer"> <p class="links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="copyright"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京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 }
common.css
/*公共样式*/ .fl { float: left; } .fr { float: right; } @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; } .fr .icomoon { font-family: 'icomoon'; font-size: 16px; line-height: 26px; } /*版心*/ .w { width: 1200px; margin: 0 auto; } .style-red { color: #c81623; } .spacer { width: 1px; height: 12px; background-color: #666; margin: 9px 12px 0; } /*顶部快捷导航*/ .shortcut { height: 31px; background-color: #f1f1f1; line-height: 31px; } .shortcut li { float: left; } /*header区域*/ .header { position: relative; height: 105px; } .logo { position: absolute; top: 25px; left: 0; width: 175px; height: 56px; } .logo a { display: block; /*overflow: hidden;*/ width: 175px; height: 56px; background: url(../img/logo.png) no-repeat; /*text-indent: -999px;*/ font-size: 0; } .search { position: absolute; top: 25px; left: 348px; } .text { float: left; width: 445px; height: 32px; border: 2px solid #b1191a; padding-left: 10px; color: #ccc; } .btn { float: left; width: 82px; height: 36px; background-color: #b1191a; border: 0; font-size: 16px; color: #fff; } .hotwrods { position: absolute; top: 65px; left: 348px; } .hotwrods a { margin: 0 10px; } .shopcar { position: absolute; top:25px; right: 64px; width: 138px; height: 34px; border: 1px solid #dfdfdf; background-color: #f7f7f7; line-height: 34px; text-align: center; } .car { font-family: 'icomoon'; color: #da5555; } .arrow { font-family: 'icomoon'; margin-left: 5px; } .count { position: absolute; top: -5px; /*应该是左侧对齐 文字才能往右走显示*/ left: 100px; background-color: #e60012; height: 14px; padding: 0 3px; line-height: 14px; color: #fff; /*border-radius: 左上角 右上角 右下角 左下角;*/ border-radius: 7px 7px 7px 0; } /*nav start*/ .nav { height: 45px; border-bottom: 2px solid #b1191a; } .dropdown { width: 209px; height: 45px; } .dropdown .dt { height: 100%; background-color: #b1191a; font-size: 16px; color: #fff; text-align: center; line-height: 45px; } .dropdown .dd { height: 465px; background-color: #c81623; margin-top: 2px; } .menu_item:hover { background-color: #fff; } /*鼠标经过li 里面的 a变颜色*/ .menu_item:hover a { color: #c81623; } .menu_item { height: 31px; line-height: 31px; margin-left: 1px; padding: 0 10px; transition: all .5s; } .menu_item:hover { padding-left: 20px; } .menu_item a { font-size: 14px; color: #fff; } .menu_item i { float: right; font-family: 'icomoon'; font-size: 18px; color: #fff; } .navitems { margin-left: 10px; } .navitems li { float: left; } .navitems li a { display: block; height: 45px; padding: 0 25px; line-height: 45px; font-size: 16px; } /*footer 部分*/ .footer { height: 386px; background-color: #f5f5f5; padding-top: 30px; } .mod_service { height: 79px; border-bottom: 1px solid #ccc; } .mod_service li { float: left; width: 240px; height: 79px; } .mod-service-icon { /*浮动的盒子 可以直接给大小的 不需要转换*/ float: left; width: 50px; height: 50px; margin-left: 35px; background: url(../img/icons.png) no-repeat; } .mod_service_zheng { background-position: -253px -3px; } .mod_service_tit { float: left; margin-left: 5px; } .mod_service_tit h5 { margin: 5px 0; } .mod_service_kuai { background-position: -255px -54px; } .mod_service_bao { background-position: -257px -105px; } .mod_help { height: 187px; border-bottom: 1px solid #ccc; } .mod_help_item { float: left; width: 150px; padding: 20px 0 0 50px; } .mod_help_item dt { height: 25px; font-size: 16px; } .mod_help_item dd { height: 22px; } .mod_help_app dt, .mod_help_app p { padding-left: 15px; } .mod_help_app img { margin: 7px 0; } .mod_copyright { text-align: center; } .mod_copyright_links { margin: 20px 0 15px 0; } .mod_copyright_info { line-height: 18px; }
detail.css
/*详情页的样式文件*/ .de_container { margin-top: 20px; } .crumb_wrap { height: 25px; } .crumb_wrap a { margin-right: 10px; } .preview_wrap { width: 400px; height: 590px; } .preview_img { height: 398px; border: 1px solid #ccc; } .preview_list { position: relative; height: 60px; margin-top: 60px; } .list_item { width: 320px; height: 60px; margin: 0 auto; } .list_item li { float: left; width: 56px; height: 56px; border: 2px solid transparent; margin: 0 2px; } .list_item li.current { border-color: #c81623; } .arrow_prev, .arrow_next { position: absolute; top: 15px; width: 22px; height: 32px; background-color: purple; } .arrow_prev { left: 0; background: url(../img/arrow-prev.png) no-repeat; } .arrow_next { right: 0; background: url(../img/arrow-next.png) no-repeat; } .itemInfo_wrap { width: 718px; } .sku_name { height: 30px; font-size: 16px; font-weight: 700; } .news { height: 32px; color: #e12228; } .summary dl { overflow: hidden; } .summary dt, .summary dd { float: left; } .summary dt { width: 60px; padding-left: 10px; line-height: 36px; } .summary_price , .summary_promotion { position: relative; padding: 10px 0; background-color: #fee9eb; } .price { font-size: 24px; color: #e12228; } .summary_price a { color: #c81623; } .remark { position: absolute; right: 10px; top: 20px; } .summary_promotion { padding-top: 0; } .summary_promotion dd { width: 450px; line-height: 36px; } .summary_promotion em { display: inline-block; width: 40px; height: 22px; background-color: #c81623; text-align: center; line-height: 22px; color: #fff; } .summary_support dd { line-height: 36px; } .choose_color a { display: inline-block; width: 80px; height: 41px; background-color: #f7f7f7; border: 1px solid #ededed; text-align: center; line-height: 41px; } .summary a.current { border-color: #c81623; } .choose_version { margin: 10px 0; } .choose_version a, .choose_type a { display: inline-block; height: 32px; padding: 0 12px; background-color: #f7f7f7; border: 1px solid #ededed; text-align: center; line-height: 32px; } .choose_btns { margin-top: 20px; } .choose_amount { position: relative; float: left; width: 50px; height: 46px; background-color: pink; } .choose_amount input { width: 33px; height: 44px; border: 1px solid #ccc; text-align: center; } .add, .reduce { position: absolute; right: 0; width: 15px; height: 22px; border: 1px solid #ccc; background-color: #f1f1f1; text-align: center; line-height: 22px; } .add { top: 0; } .reduce { bottom: 0; /*禁止鼠标样式*/ cursor: not-allowed; /* pointer 小手 move 移动 */ } .addcar { float: left; width: 142px; height: 46px; background-color: #c81623; text-align: center; line-height: 46px; font-size: 18px; color: #fff; margin-left: 10px; font-weight: 700; } .product_detail { margin-bottom: 50px; } .aside { width: 208px; border: 1px solid #ccc; } .tab_list { overflow: hidden; height: 34px; } /*把背景颜色 底边框都给 li*/ .tab_list li { float: left; background-color: #f1f1f1; border-bottom: 1px solid #ccc; height: 33px; text-align: center; line-height: 33px; } /*鼠标单击 li 变化样式 背景变白色 去掉下边框 文字变颜色*/ .tab_list .current { background-color: #fff; border-bottom: 0; color: red; } .first_tab { width: 104px; } .second_tab { width: 103px; border-left: 1px solid #ccc; } .tab_con { padding: 0 10px; } .tab_con li { border-bottom: 1px solid #ccc; } .tab_con li h5 { /*超出的文字省略号显示*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .aside_price { font-weight: 700; margin: 10px 0; } .as_addcar { display: block; width: 88px; height: 26px; border: 1px solid #ccc; background-color: #f7f7f7; margin: 10px auto; text-align: center; line-height: 26px; } .detail { width: 978px; } .detail_tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .detail_tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .detail_tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item_info li { line-height: 22px; } .more { float: right; font-weight: 700; font-family: 'icomoon'; }
index.css
/*这个文件里面放的是 首页的样式*/ .main { width: 980px; height: 455px; margin-left: 219px; margin-top: 10px; } .focus { position: relative; width: 720px; height: 455px; background-color: purple; } .arrow-l, .arrow-r { position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; } .current { background-color: #fff; box-shadow: } .newsflash { width: 250px; height: 455px; } .news { height: 163px; border: 1px solid #ccc; } .news-hd { height: 32px; /*dotted 点线 dashed 虚线*/ border-bottom: 1px dotted #ccc; padding:0 15px; font-size: 14px; line-height: 32px; } .news-hd a { float: right; font-size: 12px; font-family: 'icomoon'; } .news-bd { padding: 10px 0 0 15px; } .news-bd li { height: 23px; } .lifeservice { overflow: hidden; height: 208px; border: 1px solid #ccc; border-top: none; } .lifeservice ul { width: 252px; } .lifeservice li { position: relative; float: left; width: 62px; height: 70px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .lifeservice li a { display: block; /* overflow: hidden; 解决i 引起的 外边距塌陷合并的问题*/ overflow: hidden; height: 100%; } .lifeservice li p { text-align: center; } .hot { position: absolute; right: 0; top: 0; width: 12px; height: 15px; background: url(../img/jian.jpg) no-repeat; } .service_ico { display: block; width: 24px; height: 24px; background: url(../img/icons.png) no-repeat; margin: 10px auto; } .service_ico_huafei { background-position: -17px -16px; } .service_ico_feiji { width: 26px; background-position: -78px -16px; } .bargain { height: 75px; margin-top: 5px; } /*推荐模块*/ .recommend { height: 163px; margin-top: 10px; } .recom-hd { width: 200px; height: 163px; background-color: #5c5251; text-align: center; } .recom-hd img { margin: 30px 0 10px 0; } .recom-hd h3 { font-size: 18px; color: #fff; font-weight: normal; } .recom-bd { width: 1000px; height: 163px; background-color: #ebebeb; } .recom-bd li { float: left; width: 249px; height: 145px; border-right: 1px solid #ccc; margin-top: 10px; } .recom-bd .last { border-right: 0; } /*floor 楼层区*/ .box-hd { height: 30px; border-bottom: 2px solid #c81623; margin-top: 25px; } .box-hd h3 { float: left; font-size: 18px; color: #c81623; } .tab-list { float: right; line-height: 30px; } .tab-list li { float: left; } .tab-list li a { margin: 0 15px; } .box-bd { height: 360px; } .w209 { width: 209px; background-color: #f9f9f9; } .w329 { width: 329px; } .w219 { width: 219px; border-right: 1px solid #ccc; } .w220 { width: 220px; border-right: 1px solid #ccc; } .tab-con li { float: left; height: 360px; } .tab-con-item { border-bottom: 1px solid #ccc; } .tab-con-list { overflow: hidden; margin-bottom: 15px; } .tab-con-list li { width: 86px; height: 32px; line-height: 32px; border-bottom: 1px solid #ccc; margin-left: 10px; text-align: center; } .box-bd li { overflow: hidden; } .box-bd img { /*过渡写到本身上， 谁做动画，给谁加*/ transition: all .2s; } /*我们鼠标经过图片 往右走 8px*/ .box-bd img:hover { margin-left: 8px; } /*电梯导航*/ .fixedtool { position: fixed; top: 100px; left: 50%; margin-left: -676px; width: 66px; background-color: #fff; } .fixedtool li { height: 32px; line-height: 32px; text-align: center; font-size: 12px; border-bottom: 1px solid #ccc; cursor: pointer; } .fixedtool .current { background-color: #c81623; color: #fff; }
list.css
/*列表页面的css*/ .sk { position: absolute; top: 40px; left: 185px; height: 32px; border-left: 1px solid #b1191a; padding: 5px 0 0 15px; } .sk_list li { float: left; line-height: 45px; margin: 0 30px; } .sk_list li a { font-size: 16px; color: #000; font-weight: 700; } .sk_list li a:hover { color: #c81523; } .sk_con li { float: left; line-height: 45px; margin: 0 20px; } .sk_con li a { font-size: 14px; font-weight: 700; font-family: 'icomoon'; } /*列表页内容区域?*/ .sk_bd { margin-top: 25px; } .sk_bd ul { width: 1212px; } .sk_goods { position: relative; float: left; width: 288px; height: 458px; border: 1px solid transparent; margin: 0 12px 15px 0; } .sk_goods:hover { border: 1px solid #e12228; } .sk_goods_title { font-size: 14px; color: #666; font-weight: normal; padding: 10px; } .sk_goods_price { padding: 0 10px; } .sk_goods_price em { font-size: 22px; color: #e60012; } .sk_goods_price del { font-size: 14px; font-weight: 700; color: #a4a4a4; } .sk_goods_progress { padding: 0 10px; } .bar { display: inline-block; width: 130px; height: 10px; border: 1px solid #b1191a; vertical-align: middle; margin: 0 5px; border-radius: 5px; } .bar_in { width: 87%; height: 10px; background-color: #f24349; } .sk_goods_progress em, .sk_goods_progress i { color: #f24349; } .sk_goods_buy { position: absolute; bottom: 0; width: 100%; height: 50px; background-color: #b1191a; color: #fff; text-align: center; line-height: 50px; font-size: 20px; } .page { margin: 40px 0; /*里面的文字内容 行内块 行内元素 都可以水平居中对齐*/ text-align: center; } .page_num a { display: inline-block; width: 36px; height: 36px; line-height: 36px; border: 1px solid #ccc; background-color: #f7f7f7; } .page_num .pn_prev, .page_num .pn_next { width: 83px; } .page_num .dotted , .page_num .current { border: 1px solid transparent; background-color: transparent; } .page_skip input { width: 46px; height: 36px; border: 1px solid #ccc; text-align: center; /*过渡写在本身上 谁做动画，给谁加*/ transition: all 0.3s; } /*表单获得焦点后 */ .page_skip input:focus { width: 88px; border: 1px solid skyblue; } .page_skip button { width: 54px; height: 36px; border: 1px solid #ccc; background-color: #f7f7f7; }
register.css
.w { width: 1200px; margin: auto; } .header { height: 82px; border-bottom: 2px solid #b1191a; } .logo { padding-top: 15px; } .registerarea { height: 520px; border: 1px solid #ccc; margin-top: 20px; } .registerarea h3 { height: 40px; border-bottom: 1px solid #ccc; background-color: #ececec; padding: 0 10px; font-weight: 400; line-height: 40px; font-size: 18px; } .registerarea h3 em { float: right; font-size: 14px; } .registerarea a { color: #c81623; } .reg_form { width: 600px; height: 400px; margin: 40px auto 0; } .reg_form li { margin-bottom: 15px; } .reg_form label { display: inline-block; width: 100px; height: 36px; line-height: 36px; text-align: right; } .inp { width: 238px; height: 34px; border: 1px solid #ccc; margin-left: 10px; } .error { color: #df3033; margin-left: 10px; } .error_icon, .success_icon { display: inline-block; width: 20px; height: 20px; background: url(../img/error.png) no-repeat; vertical-align: middle; margin-top: -2px; } .success { color: #40b83f; margin-left: 10px; } .success_icon { background-image: url(../img/success.png); } .safe { padding-left: 187px; color: #b2b2b2; } .safe em { padding: 0 12px; color: #fff; } .ruo { background-color: #de1111; } .zhong { background-color: #40b83f; } .qiang { background-color: #f79100; } .agree { padding-top: 20px; padding-left: 100px; } .agree input { vertical-align: middle; margin-right: 5px; } .agree a { color: #1ba1e6; } .over { width: 200px; height: 34px; background-color: #c81623; margin: 30px 0 0 130px; border: none; color: #fff; font-size: 14px; } .footer { height: 120px; text-align: center; } .links { margin-top: 20px; height: 30px; } .copyright { line-height: 20px; }
浙公网安备 33010602011771号