使用html+css实现-静态开源案例-品优购
2024-04-05 19:25:40
使用html+css实现-静态开源案例-品优购
- 设计目标
- css制作
- 图标规范
- seo优化
- 网页标题 title
- description 网站说明 显示在搜索引擎后方的解释
- Keywords关键词
- 字体图标
- 引入方法
- 注意搭建整个页面时的路径问题
- html代码
- 首页(index.html)
- 商品列表页(list.html)
- 商品详情页(detail.html)
- 注册页面(register.html)
- CSS代码
- 通用css(base.css)
- 公用css(common.css)
- 首页css(index.css)
- 商品列表页css(list.css)
- 商品详情页css(detail.css)
- 注册页css(register.css)
此静态页面在2k分辨率下显示最佳
1080p 正常显示但是元素可能相对大
2k以上无法正常显示 2k以下均可兼容
本文代码与原版的psd文件
链接：https://pan.baidu.com/s/12E5d3XJJ3IaNw6kJ5d3FCA
提取码：ptcg
设计目标
保证ie7以及以上，火狐，360，safari，chrome等 可以正常显示
熟悉CSS+DIV布局，页面搭建
了解常用电商网站布局模式
为了做移动端铺垫
css制作
css制作需要有base.css 进行必要的页面初始化
公共样式 放入common.css 公共样式 例如头部导航相同 尾部的网站信息相同这些 每个页面都有的东西
图标规范
浏览器网页图标添加
在根目录或其他位置存放 favicon(前缀名称可以修改).ico 图标类型文件
通过link rel=“shortcut icon” type=“image/x-icon” href=“文件位置” 来调用这个图标
这个图标可以让美工提供 也可以自己从psd上切一个然后找个第三方网站导出一个ico文件
seo优化
网站优化三大标签
seo search engine optimization 搜索引擎优化
重要的三大标签
网页标题 title
标题长度
谷歌70kb 35个中文字符
百度56kb 28个中文字符
关键字分布 最先出现的词语权重越高
关键词词频 主关键词出现3次 辅关键词出现一次
建议：网站名(产品名)-网站的简介
例如：
小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
淘宝网 - 淘！我喜欢
微博-随时随地发现新鲜事
description 网站说明 显示在搜索引擎后方的解释
注意问题：
描述中出现关键词与正文内容相关，吸引用户，让用户知道你是干啥的
简短原则，字符不要超过240个字符 也就是120个汉字
补充在title和keywords中未能充分表述的语句
用英文字符, 关键词1,关键词2
使用标签<meta name="description" content="具体的内容">
Keywords关键词
主要突出你是干啥的 比如京东卖3c主要突出3c产品 做软件开发的说项目或者技术
卖电脑的推硬件
控制在6-8个关键词左右
使用<meta name="Keywords" content="具体的内容">
字体图标
典型的是 例如京东里的选择位置前头的那个红色图标 那实际是个字体图标
还有小米里的购物车图标 那也是一个字体图标
图片的缺点:增加项目文件大小,增大了http请求,降低性能,图片不能很好缩放,不同分辨率会出现失真情况,移动端响应 希望图标可以缩放
所以需要字体图标来解决这个问题
字体图标 本质上是文字 文字效果都可以上上 跟图片没啥区别
重点是占用空间小了,信息没丢失,支持所有浏览器,移动端响应必备
正常流程:
1.制作svg字体图标效果图
2.上传生成字体文件包
3.下载本地
4.字体文件引入html
引入方法
1.先把字体文件 .eot .svg .ttf .woff 放到fonts中2.在标签中调用字体包里的字体 通常情况下 在下载的包里有相应的那个字体啥样 一般可见的都是 这样的字符 因为你没安装<span></span>3.在样式里声明字体一般的内容在字体包中携带例如/* 字体声明 一般从网上下载的字体包文件自带这个东西*/@font-face {/* 字体名,想叫啥叫啥但是下头调用的时候得写正确 */font-family: 'icomoon';/* 路径问题需要注意这里边的内容一般都不会一样 都在下载的字体包中的css文件存在 */src: url('../fonts/icomoon.eot?xn4h7e');src: url('../fonts/icomoon.eot?xn4h7e#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?xn4h7e') format('truetype'),url('../fonts/icomoon.woff?xn4h7e') format('woff'),url('../fonts/icomoon.svg?xn4h7e#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}若要追加字体图标 则需要原本文件中的.json文件 在对应下载网站上导入然后重新下载整个文件 把字体文件中的内容导入到项目里
注意搭建整个页面时的路径问题
因css单独存放在了一个文件夹中
所以每个需要调用的文件的路径需要跳转至html所在目录来看 先要…/跳转至上一级也就是html文件目录后
再去找文件名 注意这个问题
html代码
首页(index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- 网站title --><title>品优购(PYJ.COM)-正品低价、品质保障、配送及时、轻松购物！</title><!-- 网站描述 --><meta name="description" content="品优购PYJ.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><!-- 网站关键词 --><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"><!-- 网站图标 --><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!-- 初始化css --><link rel="stylesheet" type="text/css" href="css/base.css"><!-- 公共css文件 --><link rel="stylesheet" type="text/css" href="css/common.css"><!-- 首页css文件 --><link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body><!-- 快捷导航栏开始 --><div class="shortcut"><!-- 版心容器 --><div class="w"><!-- 左浮动容器 登陆链接 --><ul class="login fl"><li>品优购欢迎您！</li><li><a href="#">请登录</a><a href="register.html" class="font_color_red">免费注册</a></li></ul><!-- 右浮动容器 导航菜单--><ul class="shortcut_nav fr"><li><a href="#">我的订单</a></li><li class="style_y"></li><li><a href="#">我的品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">品优购会员</a></li><li class="style_y"></li><li><a href="#">企业采购</a></li><li class="style_y"></li><li><a href="#">关注品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">客户服务</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">网站导航</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#" class="jdphone">手机京东<div class="jd_ewm"><div class="sjd_ewm"></div><img src="img/下载.png"></div></a></li></ul></div></div><!-- 快捷导航栏结束 --><!-- 头部制作开始 --><div class="header w"><!-- 企业logo 需要一定的优化 要放入h1标签为了提权 h1里放一个链接 可以返回首页 链接需要大小 并且把logo作为背景放进链接中链接里需要文字 网站名 为了让搜索引擎收录 但文字不需要显示使用text-indent移动到盒子外 然后用overflow:hidden(淘宝)或者直接给font-size:0 (京东)最后直接给链接一个title 给用户提示信息--><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div><!-- 搜索框 --><div class="search"><input type="text" value="语言开发"><button>搜索</button></div><!-- 热搜词 --><ul class="hotwords"><li><a href="#" class="font_color_red">家居神券日</a></li><li><a href="#">手机</a></li><li><a href="#">户外仪表</a></li><li><a href="#">领券减60</a></li><li><a href="#">88购物节</a></li><li><a href="#">电脑免息</a></li><li><a href="#">薇诺娜</a></li><li><a href="#">车主福利</a></li><li><a href="#">KPL</a></li></ul><!-- 购物车 --><div class="shopcar"><div class="icon_count"><!-- count购物车计数器 注意不要给定宽度 因为你不知道这个人购物车放了多少东西--><i class="count">80</i><i class="font_icon_shopcar"></i><a href="#">我的购物车</a><i class="font_icon_right"></i></div> </div></div><!-- 头部制作结束 --><!-- 导航栏开始 --><div class="nav"><div class="w"><!-- 下拉菜单 --><div class="dropdown fl"><div class="dt"><a href="#">全部商品分类</a></div><div class="dd"><li class="item_fore1"><a href="#">家用电器</a><i class="font_icon_right"></i></li><li class="item_fore2"><a href="list.html">手机</a> /<a href="#">数码</a> /<a href="#">通信</a><i class="font_icon_right"></i></li><li class="item_fore3"><a href="#">电脑</a> /<a href="#">办公</a><i class="font_icon_right"></i></li><li class="item_fore4"><a href="#">家居</a> /<a href="#">家具</a> /<a href="#">家装</a> /<a href="#">厨具</a><i class="font_icon_right"></i></li><li class="item_fore5"><a href="#">男装</a> /<a href="#">女装</a> /<a href="#">童装</a> /<a href="#">内衣</a><i class="font_icon_right"></i></li><li class="item_fore6"><a href="#">美妆</a> /<a href="#">个人清洁</a> /<a href="#">宠物用品</a><i class="font_icon_right"></i></li><li class="item_fore7"><a href="#">鞋靴</a> /<a href="#">箱包</a> /<a href="#">珠宝</a> /<a href="#">奢侈品</a><i class="font_icon_right"></i></li><li class="item_fore8"><a href="#">运动户外</a> /<a href="#">钟表</a><i class="font_icon_right"></i></li><li class="item_fore9"><a href="#">汽车</a> /<a href="#">汽车用品</a><i class="font_icon_right"></i></li><li class="item_fore10"><a href="#">母婴</a> /<a href="#">玩具乐器</a><i class="font_icon_right"></i></li><li class="item_fore11"><a href="#">食品</a> /<a href="#">酒类</a> /<a href="#">生鲜</a> /<a href="#">特产</a><i class="font_icon_right"></i></li><li class="item_fore12"><a href="#">医药保健</a><i class="font_icon_right"></i></li><li class="item_fore13"><a href="#">图书</a> /<a href="#">音像</a> /<a href="#">电子书</a><i class="font_icon_right"></i></li><li class="item_fore14"><a href="#">彩票</a> /<a href="#">旅行</a> /<a href="#">充值</a> /<a href="#">票务</a><i class="font_icon_right"></i></li><li class="item_fore15"><a href="#">理财</a> /<a href="#">众筹</a> /<a href="#">白条</a> /<a href="#">保险</a><i class="font_icon_right"></i></li></div></div><!-- 导航展示内容 --><div class="nav_items"><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><!-- 导航栏结束 --><!-- main开始 --><div class="main w"><!-- 焦点图 --><div class="focus"><!-- 左箭头 --><button class="button_arrowleft"><i class="font_icon_left"></i></button><!-- 右箭头 --><button class="button_arrowright"><i class="font_icon_right"></i></button><!-- 底部轮换按钮 这个按钮如果想实现京东的样式需要做个特效 --><div class="button_bottom"><li><button></button></li><li><button></button></li><li><button></button></li><li><button></button></li><li><button></button></li><li><button></button></li><li><button></button></li><li><button></button></li></div><!-- 焦点图需要有一堆 先给好容器 --><li><a href="#"><img src="upload/focus.png"></a></li></div><!-- 新闻快报 --><div class="newflash"><!-- 快报标题模块 --><div class="news"><li><h3>品优购快报</h3></li><li><a href="#">更多</a></li><i class="font_icon_right"></i></div><!-- 快报内容模块 --><div class="news_content"><ul><li><a href="#" class="font_weight_600">[特惠]</a><a href="#">备战开学季 全民半价购数码</a></li><li><a href="#" class="font_weight_600">[公告]</a><a href="#">品优稳占家电网购六成份额</a></li><li><a href="#" class="font_weight_600">[特惠]</a><a href="#">百元中秋全品类礼券限量领</a></li><li><a href="#" class="font_weight_600">[公告]</a><a href="#">上品优生鲜 享阳澄湖大闸蟹</a></li><li><a href="#" class="font_weight_600">[特惠]</a><a href="#">每日享折扣优 品质游</a></li></ul></div><!-- 生活服务 lifeservice --><div class="lifeservice"><ul><li><img src="img/话费.png"><a href="#">话费</a></li><li><img src="img/机票.png"><a href="#">机票</a></li><li><img src="img/酒店.png"><a href="#">酒店</a></li><li><img src="img/游戏.png"><a href="#">游戏</a></li><li><img src="img/加油卡.png"><a href="#">加油卡</a></li><li><img src="img/火车票.png"><a href="#">火车票</a></li><li><img src="img/众筹.png"><a href="#">众筹</a></li><li><img src="img/理财.png"><a href="#">理财</a></li><li><img src="img/白条.png"><a href="#">白条</a></li><li><img src="img/电影票.png"><a href="#">电影票</a></li><li><img src="img/企业购.png"><a href="#">企业购</a></li><li><img src="img/礼品卡.png"><a href="#">礼品卡</a></li></ul></div><!-- 特加商品bargain --><div class="bargain"><img src="upload/bargain.png"></div></div><!-- 侧工具栏 --></div><!-- main结束 --><!-- 推荐模块开始 recommend --><div class="recommend w"><div class="re_hd"><img src="img/clock.png"><h3>今日推荐</h3></div><div class="re_bd"><li><a href="#"><img src="upload/recommend (2).png"></a></li><li><a href="#"><img src="upload/recommend (3).png"></a></li><li><a href="#"><img src="upload/recommend (4).png"></a></li><li><a href="#" class="last"><img src="upload/recommend (1).png"></a></li></div></div><!-- 推荐模块结束 --><!-- 猜你喜欢模块 --><div class="likes w"><div class="likes_title"><h3>猜你喜欢</h3><button>换一批<i>圆圈</i></button></div><div class="likes_bd"><li><img src="upload/likes (2).png" class="likes_itmes1"><a href="#"><p>阳光美包新款单肩包女包</p><p>时尚母子包四件套</p><h3><i>￥</i>116.00</h3></a></li><li><img src="upload/likes (3).png" class="likes_itmes2"><a href="#"><p>爱仕达 30CM炒锅不粘锅</p><p>NWG8330E电磁炉炒锅</p><h3><i>￥</i>99.00</h3></a></li><li><img src="upload/likes (4).png" class="likes_itmes3"><a href="#"><p>捷波朗（jabra）</p><p>BOOSI劲步无线蓝牙耳机</p><h3><i>￥</i>245.00</h3></a></li><li><img src="upload/likes (5).png" class="likes_itmes4"><a href="#"><p>欧普JYLZ08</p><p>面板灯平板灯铝合金</p><h3><i>￥</i>238.00</h3></a></li><li><img src="upload/likes (6).png" class="likes_itmes5"><a href="#"><p>三星（G5500）</p><p>移动联通4G智能手机</p><h3><i>￥</i>649.00</h3></a></li><li><img src="upload/likes (1).png" class="likes_itmes6"><a href="#" class="border_none"><p>韩国所望</p><p>紧致湿润精华露400ml</p><h3><i>￥</i>649.00</h3></a></li></div></div><!-- 猜你喜欢模块结束 --><!-- 品牌好物模块 --><div class="good w"><div class="good_title"><h3>品牌好物</h3></div><div class="good_bd"><!-- 图书榜 --><div class="book"><a href="#"><h3>品优购图书推荐</h3>畅销推荐低至一折<div class="icon_goods1"></div></a></div><!-- 好东西 --><div class="thing"><div class="thing_title">好东西</div><!-- 达人推荐 --><li class="wise"><a href="#"><h3>达人推荐</h3>雷神金属机械键盘<br><i>与你相见恨晚</i><div class="icon_goods2"></div></a></li><!-- 发现好物 --><li class="find"><a href="#"><h3>发现好物</h3>一不小心霸气外露<br><i>等你来</i><div class="icon_goods3"></div></a></li></div><!-- 品牌街 --><div class="major"><div class="major_title">品牌街</div><!-- 苏泊尔 --><li class="supor"><a href="#"><h3>苏泊尔</h3>返场大秀场<br><i>爆品直降100元</i><div class="icon_goods4"></div></a></li><!-- 国际大牌 --><li class="adidas"><a href="#"><h3>国际大牌</h3>adidas<br><i>部分3免1</i><div class="icon_goods5"></div></a></li><!-- 本周特卖 --><li class="week"><a href="#"><h3>本周特卖</h3>大牌折扣<br><i>每周上新</i><div class="icon_goods6"></div></a></li></div><!-- 推荐品牌 --><div class="company"><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#"></a></li><li><a href="#" class="bordernone"></a></li><li><a href="#" class="bordernone2"></a></li><li><a href="#" class="bordernone bordernone2"></a></li><div class="icon_goods7"></div></div></div></div><!-- 品牌好物结束 --><!-- 电梯展示的内容开始 --><div class="floor w"><!-- 第一层标题 --><div class="box_hd"><h3 id="appliances">家用电器</h3><ul class="tab_list"><li><a href="#" class="font_color_red">热门</a></li><li class="style_y"></li><li><a href="#">大家电</a></li><li class="style_y"></li><li><a href="#">生活电器</a></li><li class="style_y"></li><li><a href="#">厨房电器</a></li><li class="style_y"></li><li><a href="#">个护健康</a></li><li class="style_y"></li><li><a href="#">应季电器</a></li><li class="style_y"></li><li><a href="#">空气/净水</a></li><li class="style_y"></li><li><a href="#">新奇特</a></li><li class="style_y"></li><li><a href="#">高端电器</a></li></ul></div><!-- 第一层内容 --><div class="box_bd"><!-- 由于内容和上述的li应该时对应的所以下方按理来说有很多的ul来存放对应的元素 --><ul class="tab_content"><li class="t_c_1"><ul class="t_hotwords"><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><a href="#" class="tc1_a"><h3>三星曲面电视</h3>抽奖送豪礼<img src="upload/floor1.png"></a></li><li class="t_c_2"><a href="#"><h3>烧水壶智能光控泡茶壶茶具套装</h3>满299.00减40.00<img src="upload/floor2.png"></a></li><li class="t_c_3"><a href="#" class="tc3_a1"><h3>每满200减20元</h3>烘焙节1元抢购<img src="upload/floor3.png"></a><a href="#" class="tc3_a2"><h3>买乐视电视享钜惠</h3>送60个月会员<img src="upload/floor4.png"></a></li><li class="t_c_4"><a href="#"><h3>8.20彩电宅购节</h3>65寸4K智能电视3799<img src="upload/floor5.png" class="margin-left-20"></a></li><li class="t_c_5"><a href="#" class="tc5_a1"><h3>消暑神器全场领券</h3>1元赢空调<img src="upload/floor6.png"></a><a href="#" class="tc5_a2"><h3>夏日清凉换装好礼</h3>空调品牌享0元装机<img src="upload/floor7.png"></a></li></ul></div><!-- 第一层下部品牌链接容器 --><div class="box_ft"><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><img src="upload/box_ft1.png"></div><!-- 第二层标题 此处需要跟上边有一定的间隔所以得加个外边距 --><div class="box_hd margin-top-30"><h3 id="Mobile Communications">手机通讯</h3><ul class="tab_list"><li><a href="#" class="font_color_red">热门</a></li><li class="style_y"></li><li><a href="#">品质优选</a></li><li class="style_y"></li><li><a href="#">新机尝鲜</a></li><li class="style_y"></li><li><a href="#">高性价比</a></li><li class="style_y"></li><li><a href="#">口碑推荐</a></li><li class="style_y"></li><li><a href="#">合约机</a></li><li class="style_y"></li><li><a href="#">手机卡</a></li><li class="style_y"></li><li><a href="#">店铺精选</a></li><li class="style_y"></li><li><a href="#">手机配件</a></li></ul></div><!-- 第二层内容 --><div class="box_bd"><!-- 由于内容和上述的li应该时对应的所以下方按理来说有很多的ul来存放对应的元素 --><ul class="tab_content"><li class="t_c_1"><ul class="t_hotwords"><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><a href="#" class="tc1_a"><h3>中兴A1 低至499元</h3>国民指纹，超6万好评<img src="upload/floor8.png"></a></li><li class="t_c_2"><a href="#" class="color_bg2"><h3>360 N4S限量版</h3>1199元抢购<img src="upload/floor9.png"></a></li><li class="t_c_3"><a href="#" class="tc3_a1"><h3>Moto X极</h3>低至￥2999<img src="upload/floor10.png"></a><a href="#" class="tc3_a2"><h3>乐max2 限量秒杀</h3>每日1899秒<img src="upload/floor11.png"></a></li><li class="t_c_4"><a href="#"><h3>G9青春版玫瑰金首发</h3>赢0元试用<img src="upload/floor12.png"></a></li><li class="t_c_5"><a href="#" class="tc5_a1"><h3>荣耀V8 2K屏</h3>￥2799元<img src="upload/floor3.png"></a><a href="#" class="tc5_a2"><h3>vivo x7星空灰</h3>1元赢新机<img src="upload/floor14.png"></a></li></ul></div><!-- 第二层下部品牌链接容器 --><div class="box_ft"><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><img src="upload/box_ft2.png"></div><!-- 第三层标题 --><div class="box_hd margin-top-30"><h3 id="Computer office">电脑办公</h3><ul class="tab_list"><li><a href="#" class="font_color_red">热门</a></li><li class="style_y"></li><li><a href="#">电脑/平板</a></li><li class="style_y"></li><li><a href="#">潮流影音</a></li><li class="style_y"></li><li><a href="#">智能/外设</a></li><li class="style_y"></li><li><a href="#">DIY硬件</a></li><li class="style_y"></li><li><a href="#">电竞游戏</a></li><li class="style_y"></li><li><a href="#">办公/网络</a></li><li class="style_y"></li><li><a href="#">文具电教</a></li><li class="style_y"></li><li><a href="#">精选配件</a></li></ul></div><!-- 第三层内容 --><div class="box_bd"><!-- 由于内容和上述的li应该时对应的所以下方按理来说有很多的ul来存放对应的元素 --><ul class="tab_content"><li class="t_c_1"><ul class="t_hotwords"><li><a href="#">SSD硬盘</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><a href="#" class="tc1_a"><h3>电脑特惠直降3000</h3>游戏本6期免息<img src="upload/floor15.png"></a></li><li class="t_c_2"><a href="#" class="color_bg3"><h3>大牌相机低价抢</h3>运动相机低至￥299<img src="upload/floor16.png"></a></li><li class="t_c_3"><a href="#" class="tc3_a1"><h3>平板新世界</h3>开启2IN1时代<img src="upload/floor17.png"></a><a href="#" class="tc3_a2"><h3>低价来袭</h3>机械键盘低至99元<img src="upload/floor18.png"></a></li><li class="t_c_4"><a href="#"><h3>全场6期分期免息</h3>我和DIY有个约会<img src="upload/floor19.png" class="margin-left-10px"></a></li><li class="t_c_5"><a href="#" class="tc5_a1"><h3>消暑神器全场领卷</h3>1元赢空调<img src="upload/floor20.png"></a><a href="#" class="tc5_a2"><h3>潮流手配 尖叫来袭</h3>满99元减30元<img src="upload/floor21.png"></a></li></ul></div><!-- 第三层下部品牌链接容器 --><div class="box_ft"><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><img src="upload/box_ft3.png"></div></div><!-- 电梯展示的内容结束 --><!-- 电梯对应的侧栏 --><div class="fixedtool"><li><a href="#appliances">家用电器</a></li><li><a href="#Mobile Communications">手机通讯</a></li><li><a href="#Computer office">电脑办公</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></div><!-- 底部关于我们开始 --><div class="footer"><ul class="mod_service w"><li><div class="slogen_icons1"></div><h6>正品保障</h6>正品保障，提供发票</li><li><div class="slogen_icons2"></div><h6>极速物流</h6>急速物流，急速送达</li><li><div class="slogen_icons3"></div><h6>无忧售后</h6>7天无理由退换货</li><li><div class="slogen_icons4"></div><h6>特色服务</h6>私人定制家电套餐</li><li><div class="slogen_icons5"></div><h6>帮助中心</h6>您的购物指南</li></ul><div class="mod_help w"><ul><li><h6>购物指南</h6></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">生活旅行</a>/<a href="#">团购</a></li><li><a href="#">常见问题</a></li><li><a href="#">大家电</a></li><li><a href="#">联系客服</a></li></ul><ul><li><h6>配送方式</h6></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li><li><a href="#">海外配送</a></li></ul><ul><li><h6>支付方式</h6></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><ul><li><h6>售后服务</h6></li><li><a href="#">售后政策</a></li><li><a href="#">价格保护</a></li><li><a href="#">退款说明</a></li><li><a href="#">返修</a>/<a href="#">退换货</a></li><li><a href="#">取消订单</a></li></ul><ul><li><h6>特色服务</h6></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">品优购E卡</a></li><li><a href="#">品优购通信</a></li></ul><div class="about_app"><ul><li><h6>帮助中心</h6></li><li><img src="upload/erweima.png"></li><li><a href="#">品优购客户端</a></li></ul></div></div><div class="mod_copyright w"><ul><li><a href="#">关于我们</a></li><li class="style_y"></li><li><a href="#">联系我们</a></li><li class="style_y"></li><li><a href="#">联系客服</a></li><li class="style_y"></li><li><a href="#">商家入驻</a></li><li class="style_y"></li><li><a href="#">营销中心</a></li><li class="style_y"></li><li><a href="#">手机品优购</a></li><li class="style_y"></li><li><a href="#">友情链接</a></li><li class="style_y"></li><li><a href="#">销售联盟</a></li><li class="style_y"></li><li><a href="#">品优购社区</a></li><li class="style_y"></li><li><a href="#">品优购公益</a></li><li class="style_y"></li><li><a href="#">English Site</a></li><li class="style_y"></li><li><a href="#">Contact U</a></li></ul><div class="about_us"><p>地址:北京市你猜猜我在哪大厦一层 邮编：100001 电话：400-8823-823 传真：010-10086 邮箱：niubi@niu.com</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- 底部关于我们结束 --></body>
</html>
商品列表页(list.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- 网站title --><title>品优购(PYJ.COM)-手机卖场、全场秒杀！</title><!-- 网站描述 --><meta name="description" content="品优购PYJ.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><!-- 网站关键词 --><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"><!-- 网站图标 --><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!-- 初始化css --><link rel="stylesheet" type="text/css" href="css/base.css"><!-- 公共css文件 --><link rel="stylesheet" type="text/css" href="css/common.css"><!-- 列表页css文件 --><link rel="stylesheet" type="text/css" href="css/list.css">
</head>
<body><!-- 快捷导航栏开始 --><div class="shortcut"><!-- 版心容器 --><div class="w"><!-- 左浮动容器 登陆链接 --><ul class="login fl"><li>品优购欢迎您！</li><li><a href="#">请登录</a><a href="register.html" class="font_color_red">免费注册</a></li></ul><!-- 右浮动容器 导航菜单--><ul class="shortcut_nav fr"><li><a href="#">我的订单</a></li><li class="style_y"></li><li><a href="#">我的品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">品优购会员</a></li><li class="style_y"></li><li><a href="#">企业采购</a></li><li class="style_y"></li><li><a href="#">关注品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">客户服务</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">网站导航</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#" class="jdphone">手机京东<div class="jd_ewm"><div class="sjd_ewm"></div><img src="img/下载.png"></div></a></li></ul></div></div><!-- 快捷导航栏结束 --><!-- 头部制作开始 --><div class="header w"><!-- 企业logo 需要一定的优化 要放入h1标签为了提权 h1里放一个链接 可以返回首页 链接需要大小 并且把logo作为背景放进链接中链接里需要文字 网站名 为了让搜索引擎收录 但文字不需要显示使用text-indent移动到盒子外 然后用overflow:hidden(淘宝)或者直接给font-size:0 (京东)最后直接给链接一个title 给用户提示信息--><div class="logo"><h1><a href="index.html" title="品优购">品优购</a><div class="second_kill"><img src="img/秒杀.png"></div></h1></div><!-- 搜索框 --><div class="search"><input type="text" value="语言开发"><button>搜索</button></div><!-- 热搜词 --><ul class="hotwords"><li><a href="#" class="font_color_red">家居神券日</a></li><li><a href="#">手机</a></li><li><a href="#">户外仪表</a></li><li><a href="#">领券减60</a></li><li><a href="#">88购物节</a></li><li><a href="#">电脑免息</a></li><li><a href="#">薇诺娜</a></li><li><a href="#">车主福利</a></li><li><a href="#">KPL</a></li></ul><!-- 购物车 --><div class="shopcar"><div class="icon_count"><!-- count购物车计数器 注意不要给定宽度 因为你不知道这个人购物车放了多少东西--><i class="count">80</i><i class="font_icon_shopcar"></i><a href="#">我的购物车</a><i class="font_icon_right"></i></div> </div></div><!-- 头部制作结束 --><!-- 导航栏开始 --><div class="nav"><div class="w"><div class="nav_items_left"><li><a href="#">品优秒杀</a></li><li><a href="#">即将售空</a></li><li><a href="#">超值低价</a></li></div><!-- 导航展示内容 --><div class="nav_items"><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="#" class="font_color_red">智能数码</a></li><li><a href="#">运动户外</a></li><li><a href="#">更多分类<i></i></a></li></ul></div></div></div><!-- 导航栏结束 --><!-- 列表容器开始 无高度 --><div class="sk_container w clearfix"><!-- 头部展示栏 --><div class="sk_hd clearfix"><div class="sk_hd_title"><h3><img src="img/智能数码.png">智能数码</h3><li></li><li class="now_cg">正在抢购</li><li></li></div></div><!-- 产品列表 --><div class="sk_bd clearfix"><!-- 产品列表内容 四个一组 --><li><a href="detail.html"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><li><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><li><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><!-- 第四个需要清除右边距 --><li class="mr_no"><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><!-- 产品列表内容 四个一组 --><li><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><li><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><li><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li><!-- 第四个需要清除右边距 --><li class="mr_no"><a href="#"><!-- 产品图片 --><img src="upload/iphone6s.png"><!-- 产品标题 --><p class="title">Apple苹果iphone 6s Plus (A1699) 32G<br>金色 移动联通电信4G手机</p><!-- 产品价格 --><p class="pay">￥<i>6088</i><s>￥6988</s></p><!-- 产品已售模块 --><p class="sile">已售<i class="per">87%</i><span class="last_font">剩余<i class="last">29</i>件</span><div class="all"><div class="have"></div></div></p><!-- 立即抢购功能 --><h3>立即抢购</h3></a></li></div><!-- 页面跳转开始 --><div class="page"><!-- 左侧页号容器 --><span class="page_num"><a href="#"><<上一页</a><a href="#" class="current">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#" class="current">...</a><a href="#">下一页>></a></span><!-- 右侧输入跳转 --><span class="span_skip">共100页 到第 <input type="text"> 页 <button>确定</button></span></div><!-- 页面跳转结束 行内块内容 --></div><!-- 列表容器结束 --><!-- 底部关于我们开始 --><div class="footer"><ul class="mod_service w"><li><div class="slogen_icons1"></div><h6>正品保障</h6>正品保障，提供发票</li><li><div class="slogen_icons2"></div><h6>极速物流</h6>急速物流，急速送达</li><li><div class="slogen_icons3"></div><h6>无忧售后</h6>7天无理由退换货</li><li><div class="slogen_icons4"></div><h6>特色服务</h6>私人定制家电套餐</li><li><div class="slogen_icons5"></div><h6>帮助中心</h6>您的购物指南</li></ul><div class="mod_help w"><ul><li><h6>购物指南</h6></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">生活旅行</a>/<a href="#">团购</a></li><li><a href="#">常见问题</a></li><li><a href="#">大家电</a></li><li><a href="#">联系客服</a></li></ul><ul><li><h6>配送方式</h6></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li><li><a href="#">海外配送</a></li></ul><ul><li><h6>支付方式</h6></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><ul><li><h6>售后服务</h6></li><li><a href="#">售后政策</a></li><li><a href="#">价格保护</a></li><li><a href="#">退款说明</a></li><li><a href="#">返修</a>/<a href="#">退换货</a></li><li><a href="#">取消订单</a></li></ul><ul><li><h6>特色服务</h6></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">品优购E卡</a></li><li><a href="#">品优购通信</a></li></ul><div class="about_app"><ul><li><h6>帮助中心</h6></li><li><img src="upload/erweima.png"></li><li><a href="#">品优购客户端</a></li></ul></div></div><div class="mod_copyright w"><ul><li><a href="#">关于我们</a></li><li class="style_y"></li><li><a href="#">联系我们</a></li><li class="style_y"></li><li><a href="#">联系客服</a></li><li class="style_y"></li><li><a href="#">商家入驻</a></li><li class="style_y"></li><li><a href="#">营销中心</a></li><li class="style_y"></li><li><a href="#">手机品优购</a></li><li class="style_y"></li><li><a href="#">友情链接</a></li><li class="style_y"></li><li><a href="#">销售联盟</a></li><li class="style_y"></li><li><a href="#">品优购社区</a></li><li class="style_y"></li><li><a href="#">品优购公益</a></li><li class="style_y"></li><li><a href="#">English Site</a></li><li class="style_y"></li><li><a href="#">Contact U</a></li></ul><div class="about_us"><p>地址:北京市你猜猜我在哪大厦一层 邮编：100001 电话：400-8823-823 传真：010-10086 邮箱：niubi@niu.com</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- 底部关于我们结束 -->
</body>
</html>
商品详情页(detail.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- 网站title --><title>Apple苹果iphone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</title><!-- 网站描述 --><meta name="description" content="品优购PYJ.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"><!-- 网站关键词 --><meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"><!-- 网站图标 --><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><!-- 初始化css --><link rel="stylesheet" type="text/css" href="css/base.css"><!-- 公共css文件 --><link rel="stylesheet" type="text/css" href="css/common.css"><!-- 详情页css文件 --><link rel="stylesheet" type="text/css" href="css/detail.css">
</head>
<body><!-- 快捷导航栏开始 --><div class="shortcut"><!-- 版心容器 --><div class="w"><!-- 左浮动容器 登陆链接 --><ul class="login fl"><li>品优购欢迎您！</li><li><a href="#">请登录</a><a href="register.html" class="font_color_red">免费注册</a></li></ul><!-- 右浮动容器 导航菜单--><ul class="shortcut_nav fr"><li><a href="#">我的订单</a></li><li class="style_y"></li><li><a href="#">我的品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">品优购会员</a></li><li class="style_y"></li><li><a href="#">企业采购</a></li><li class="style_y"></li><li><a href="#">关注品优购</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">客户服务</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#">网站导航</a><i class="font_icon_down"></i></li><li class="style_y"></li><li><a href="#" class="jdphone">手机京东<div class="jd_ewm"><div class="sjd_ewm"></div><img src="img/下载.png"></div></a></li></ul></div></div><!-- 快捷导航栏结束 --><!-- 头部制作开始 --><div class="header w"><!-- 企业logo 需要一定的优化 要放入h1标签为了提权 h1里放一个链接 可以返回首页 链接需要大小 并且把logo作为背景放进链接中链接里需要文字 网站名 为了让搜索引擎收录 但文字不需要显示使用text-indent移动到盒子外 然后用overflow:hidden(淘宝)或者直接给font-size:0 (京东)最后直接给链接一个title 给用户提示信息--><div class="logo"><h1><a href="index.html" title="品优购">品优购</a></h1></div><!-- 搜索框 --><div class="search"><input type="text" value="语言开发"><button>搜索</button></div><!-- 热搜词 --><ul class="hotwords"><li><a href="#" class="font_color_red">家居神券日</a></li><li><a href="#">手机</a></li><li><a href="#">户外仪表</a></li><li><a href="#">领券减60</a></li><li><a href="#">88购物节</a></li><li><a href="#">电脑免息</a></li><li><a href="#">薇诺娜</a></li><li><a href="#">车主福利</a></li><li><a href="#">KPL</a></li></ul><!-- 购物车 --><div class="shopcar"><div class="icon_count"><!-- count购物车计数器 注意不要给定宽度 因为你不知道这个人购物车放了多少东西--><i class="count">80</i><i class="font_icon_shopcar"></i><a href="#">我的购物车</a><i class="font_icon_right"></i></div> </div></div><!-- 头部制作结束 --><!-- 导航栏开始 --><div class="nav"><div class="w"><!-- 下拉菜单 --><div class="dropdown fl"><div class="dt"><a href="#">全部商品分类</a></div><div class="dd"><li class="item_fore1"><a href="#">家用电器</a><i class="font_icon_right"></i></li><li class="item_fore2"><a href="list.html">手机</a> /<a href="#">数码</a> /<a href="#">通信</a><i class="font_icon_right"></i></li><li class="item_fore3"><a href="#">电脑</a> /<a href="#">办公</a><i class="font_icon_right"></i></li><li class="item_fore4"><a href="#">家居</a> /<a href="#">家具</a> /<a href="#">家装</a> /<a href="#">厨具</a><i class="font_icon_right"></i></li><li class="item_fore5"><a href="#">男装</a> /<a href="#">女装</a> /<a href="#">童装</a> /<a href="#">内衣</a><i class="font_icon_right"></i></li><li class="item_fore6"><a href="#">美妆</a> /<a href="#">个人清洁</a> /<a href="#">宠物用品</a><i class="font_icon_right"></i></li><li class="item_fore7"><a href="#">鞋靴</a> /<a href="#">箱包</a> /<a href="#">珠宝</a> /<a href="#">奢侈品</a><i class="font_icon_right"></i></li><li class="item_fore8"><a href="#">运动户外</a> /<a href="#">钟表</a><i class="font_icon_right"></i></li><li class="item_fore9"><a href="#">汽车</a> /<a href="#">汽车用品</a><i class="font_icon_right"></i></li><li class="item_fore10"><a href="#">母婴</a> /<a href="#">玩具乐器</a><i class="font_icon_right"></i></li><li class="item_fore11"><a href="#">食品</a> /<a href="#">酒类</a> /<a href="#">生鲜</a> /<a href="#">特产</a><i class="font_icon_right"></i></li><li class="item_fore12"><a href="#">医药保健</a><i class="font_icon_right"></i></li><li class="item_fore13"><a href="#">图书</a> /<a href="#">音像</a> /<a href="#">电子书</a><i class="font_icon_right"></i></li><li class="item_fore14"><a href="#">彩票</a> /<a href="#">旅行</a> /<a href="#">充值</a> /<a href="#">票务</a><i class="font_icon_right"></i></li><li class="item_fore15"><a href="#">理财</a> /<a href="#">众筹</a> /<a href="#">白条</a> /<a href="#">保险</a><i class="font_icon_right"></i></li></div></div><!-- 导航展示内容 --><div class="nav_items"><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><!-- 导航栏结束 --><!-- 详情页开始 --><div class="de_container w clearfix"><!-- 面包屑导航 --><div class="crumb_wrap clearfix"><li><a href="#" class="font_color_333">手机/数码/通讯</a></li><li class="font_icon_right"></li><li><a href="#">手机</a></li><li class="font_icon_right"></li><li><a href="#">Apple苹果</a></li><li class="font_icon_right"></li><li><a href="#">iphone 6s Plus系列</a></li></div><!-- 产品介绍模块 没有高度自然扩展--><div class="product_intro"><!-- 产品预览 需要高度同一格调--><div class="preview_wrap"><div class="product_img"><img src="upload/iphone 6s plus gold.png"><!-- 放大镜图标 --><i></i></div><div class="product_details_list clearfix"><div class="arr_left"><a href="#"><i></i></a></div><div class="arr_right"><a href="#"><i></i></a></div><!-- 此处的细节图 应该是鼠标放上去会出现一个边框 这个边框不会因为鼠标移开而不显示此处需要js控制 为了不使位置错乱 所以本身所有的li中图片应该都带着边框 只不过是透明色--><div class="product_img_li"><li class="current"><a href="#"><img src="upload/商品细节图 (2).png"></a></li><li><a href="#"><img src="upload/商品细节图 (3).png"></a></li><li><a href="#"><img src="upload/商品细节图 (4).png"></a></li><li><a href="#"><img src="upload/商品细节图 (5).png"></a></li><li><a href="#"><img src="upload/商品细节图 (1).png"></a></li></div></div><!-- 产品编号分享关注对比功能 --><div class="product_information">商品编号：<span class="product_id">0468256644</span><span class="share"><a href="#"><i></i>分享</a></span><span class="attention"><a href="#"><i></i>关注</a><span class="attention_count">5000</span></span><span class="check"><a href="#"><i></i>对比</a></span></div></div><!-- 产品详情信息 不需要高度产品可选内容不一--><div class="iteminfo_wrap"><div class="iteminfo"><li class="pd_none"><h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动联通电信4G手机</h3></li><li><span class="recommend">推荐选择下方<a href="#">[移动优惠购]</a>,手机套餐齐搞定,不用换号,每月还有话费返</span></li><li class="bg_fee9eb">价<span class="two_space"></span>格<span class="price">￥<i>5299</i></span><a href="#" class="price_cut">降价通知</a><span class="evaluation">累积评价<a href="#">612188</a></span></li><li class="bg_fee9eb">促<span class="two_space"></span>销<span class="markup"><i>加价购</i></span><span class="markup_content">满999.00另加20.00元，满1999.00另加30.00元，满2999.00另加40.00元</span><br><span class="markup_content2">即可在购物车换购热销商品 <a href="#">详情 >></a></span></li><li class="li_pd">支<span class="two_space"></span>持<a href="#">以旧换新,闲置手机回收</a><a href="#">4G套餐超值抢</a><a href="#">礼品购</a></li><li class="li_pd">配<span class="three_space"></span>送<span class="three_space"></span>至<!-- 此处地址的选择是一个模拟的select --><span class="address_ul"><a href="#">北京市大兴区清源街道</a><i></i></span><strong class="font_color_999">有货</strong><span class="address_support_title">支持<ul class="address_support"><li><a href="#">京尊达</a></li><li class="style_y"></li><li><a href="#">京准达</a></li><li class="style_y"></li><li><a href="#">211限时达</a></li><li class="style_y"></li><li><a href="#">预约送货</a></li></ul><i></i></span><div class="delivery">由<i>京东</i>发货, 供应商提供售后服务. 23:10前下单, 预计<strong>明天(09月08日)</strong>送达</div><!-- 此处的支持服务应该是一个会部分隐藏的菜单 --></li></div><!-- 选择商品类型先模拟一下选中样式 需要js来控制 --><div class="iteminfo_choose"><li>选择颜色<a href="#" class="first_a">金色</a><a href="#">银色</a><a href="#">黑色</a><a href="#" class="iteminfo_current">玫瑰金</a></li><li>选择版本<a href="#" class="first_a">iphone 6</a><a href="#" class="iteminfo_current">iphone 6s</a><a href="#">iphone 6s plus</a></li><li>选择容量<a href="#" class="first_a">16GB</a><a href="#" class="iteminfo_current">64GB</a><a href="#">128GB</a></li><li>购买方式<a href="#" class="first_a iteminfo_current">官方标配</a><a href="#">移动优惠购</a><a href="#">联通优惠购</a><a href="#">电信优惠购</a></li><li>套<span class="two_space"></span>装<a href="#" class="first_a">保护套装</a><a href="#">充电套装</a></li></div><!-- 加入购物车模块 --><div class="choose_btns"><div class="choose_amount"><input type="text" class="choose_amount_text" value="1"><a href="javascript:;" class="border_bottom p_add">+</a><a href="javascript:;" class="p_reduce">-</a></div><a href="#" class="addshopcar">加入购物车</a></div></div></div></div><!-- 详情页结束 --><!-- 产品具体介绍模块 以及相关类目 --><div class="product_detail w clearfix"><!-- 产品分类下其他相同产品推广栏 --><div class="aside clearfix"><!-- 存放侧栏推荐的两个标题按钮 相关分类和推荐品牌 --><div class="related_suggestion clearfix"><!-- 相关分类 --><li class="related"><a href="javascript:;">相关分类</a></li><!-- 推荐品牌 --><li class="suggestion"><a href="javascript:;">推荐品牌</a></li></div><!-- 相关分类的内容 在页面直接显示 用户点击推荐品牌后需要隐藏 --><div class="related_body"><li><a href="#" class="related_l">手机</a><a href="#" class="related_r">手机壳</a></li><li><a href="#" class="related_l">内存卡</a><a href="#" class="related_r">iphone配件</a></li><li><a href="#" class="related_l">贴膜</a><a href="#" class="related_r">手机耳机</a></li><li><a href="#" class="related_l">移动电源</a><a href="#" class="related_r">平板电脑</a></li><li><a href="#" class="related_l">笔记本电脑</a><a href="#" class="related_r">蓝牙耳机</a></li></div><!-- 推荐品牌内容 本身内容是隐藏的 在用户点击后展示 --><div class="suggestion_body"></div><!-- 其他用户喜欢的产品 此处如果产品名称超出规格需要处理为... --><div class="other_options"><li><h3>购买此商品的用户还买了</h3></li><li><a href="#" class="other_product"><img src="upload/other_product (1).png"><p class="other_detail">羽博 10000mAh 双USB Y7移动电源</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (2).png"><p class="other_detail">蓝孩 苹果iPhone6S 抗蓝光防爆防摔高清钢化膜</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (3).png"><p class="other_detail">半岛铁盒 移动电源Q1 5000mAh 大容量移动电源</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (1).png"><p class="other_detail">羽博 10000mah 双USB Y7移动电源</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (2).png"><p class="other_detail">蓝孩 苹果iPhone6S 抗蓝光防爆防摔高清钢化膜</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (3).png"><p class="other_detail">半岛铁盒 移动电源Q1 5000mAh 大容量移动电源</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li><li><a href="#" class="other_product"><img src="upload/other_product (1).png"><p class="other_detail">羽博 10000mah 双USB Y7移动电源</p><p class="detail_pay">￥49</p></a><a href="#" class="other_addshopcar">加入购物车</a></li></div> </div><!-- 产品的详情信息以及产品宣传信息 --><div class="detail clearfix"><!-- 选择搭配功能 --><div class="product_match clearfix"><!-- 选择搭配标题 --><div class="product_match_title"><p>选择搭配</p></div><!-- 左侧搭配选择区 --><div class="match_select"><!-- 选择区左侧上部分搭配商品导航 --><div class="match_select_nav"><li><a href="#">精品</a></li><li><a href="#">iphone配件</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="#">U盘</a></li></div><!-- 左侧下部分的搭配商品展示 --><div class="match_select_items"><li><img src="upload/match (1).png"><p class="produce_pay">￥5299</p></li><li class="match_icon">+</li><li class="match_mr"><a href="#"><img src="upload/match (2).png"><p class="match_itmes_title">Feless 费勒斯 VR眼镜 虚拟现实 头戴式</p></a><input type="checkbox" value="checkbox"><span>￥39</span></li><li><a href="#"><img src="upload/match (3).png"><p class="match_itmes_title">Rock 洛克 VR眼镜 虚拟现实 头戴式</p></a><input type="checkbox" value="checkbox"><span>￥39</span></li><li><a href="#"><img src="upload/match (4).png"><p class="match_itmes_title">Faseyes 爱易思 USB小夜灯</p></a><input type="checkbox" value="checkbox"><span>￥39</span></li><li><a href="#"><img src="upload/match (5).png"><p class="match_itmes_title">Faseyes 爱易思 手机支架 懒人神器</p></a><input type="checkbox" value="checkbox"><span>￥39</span></li><!-- 调整搭配物品左右展示的按钮 --><a href="javascript:;" class="match_select_btl"><i></i></a><a href="javascript:;" class="match_select_btr"><i></i></a></div></div><!-- 右侧金额结算区 --><div class="match_pay"><!-- 此处购物车应该是计数显示 --><p class="match_detail">已选购<a href="#" class="match_count">0</a>件搭配</p><p class="match_paycount_title">套餐价：</p><p class="match_paycount">￥<i>5299</i></p><a href="javascript:;" class="match_addshopcar">加入购物车</a></div></div><!-- 商品商家自主添加的具体商品展示页面 --><div class="product_all_detail clearfix"><!-- 具体商品信息导航栏 --><div class="all_detail_nav"><li class="color_e12228"><a href="javascript:;">商品介绍</a></li><li><a href="javascript:;">规格与包装</a></li><li><a href="javascript:;">售后保障</a></li><li><a href="javascript:;">商品评价(50000)</a></li><li><a href="javascript:;">手机社区</a></li></div><!-- 商品具体参数配置 --><div class="parameters clearfix"><ul class="product_name"><li>品牌：<a href="#">Apple</a></li></ul><ul class="product_parameters clearfix"><li>商品名称：AppleiPhone 11 Pro</li><li>商品编号：100004770253</li><li>商品毛重：495.00g</li><li>商品产地：中国大陆</li><li>CPU型号：其他</li><li>运行内存：其他</li><li>机身存储：64GB</li><li>存储卡：不支持存储卡</li><li>摄像头数量：后置三摄</li><li>后摄主摄像素：1200万像素</li><li>前摄主摄像素：1200万像素</li><li>主屏幕尺寸（英寸）：5.8英寸</li><li>分辨率：其它分辨率</li><li>屏幕比例：其它屏幕比例</li><li>屏幕前摄组合+：刘海屏</li><li>充电器：其他</li><li>热点：人脸识别</li><li>特殊功能：语音命令</li><li>操作系统：iOS(Apple)</li></ul><div class="more_parameters"><a href="javascript:;">更多参数>></a></div></div><div class="parameters_img"><li class="p_img_1"><img src="upload/parameters (1).png"></li><li class="p_img_2"><img src="upload/parameters (2).png"></li><li class="p_img_3"><img src="upload/parameters (3).png"></li></div></div></div></div><!-- 详情页的猜你喜欢模块 --><div class="also_like"><!-- 猜你喜欢模块标题 --><div class="also_like_title"><p>猜你喜欢</p></div><!-- 猜你喜欢商品展示 --><div class="also_like_items"><li><a href="#"><img src="upload/also_like (1).png"><p class="also_like_items_title">DELL 戴尔 Ins 15MR-7528SS 15英寸 银色 笔记本电脑</p><p class="also_like_pay">￥3699</p></a><p class="also_like_evaluate">已有<span>6</span>人评价</p></li><li><a href="#"><img src="upload/also_like (2).png"><p class="also_like_items_title">Apple/苹果 iphone 6s/6s Plus 16G 64G 128G</p><p class="also_like_pay">￥4398</p></a><p class="also_like_evaluate">已有<span>65819</span>人评价</p></li><li><a href="#"><img src="upload/also_like (3).png"><p class="also_like_items_title">JBL OnBeat Rumble 无线蓝牙 派对节拍 多媒体音乐音箱</p><p class="also_like_pay">￥1898</p></a><p class="also_like_evaluate">已有<span>799</span>人评价</p></li><li><a href="#"><img src="upload/also_like (4).png"><p class="also_like_items_title">EXCO 宜适酷 全屏钢化玻璃膜 For iPhone6s/6 Plus</p><p class="also_like_pay">￥59</p></a><p class="also_like_evaluate">已有<span>6812</span>人评价</p></li><li><a href="#"><img src="upload/also_like (5).png"><p class="also_like_items_title">Apple 苹果 iphone 6(A1566) 16G 金色 移动联通电信手机</p><p class="also_like_pay">￥3799</p></a><p class="also_like_evaluate">已有<span>436347</span>人评价</p></li><li><a href="#"><img src="upload/also_like (6).png"><p class="also_like_items_title">半岛铁盒 移动电源 A2200 白色 2200mAh</p><p class="also_like_pay">￥19</p></a><p class="also_like_evaluate">已有<span>55231</span>人评价</p></li></div></div><!-- 底部关于我们开始 --><div class="footer"><ul class="mod_service w"><li><div class="slogen_icons1"></div><h6>正品保障</h6>正品保障，提供发票</li><li><div class="slogen_icons2"></div><h6>极速物流</h6>急速物流，急速送达</li><li><div class="slogen_icons3"></div><h6>无忧售后</h6>7天无理由退换货</li><li><div class="slogen_icons4"></div><h6>特色服务</h6>私人定制家电套餐</li><li><div class="slogen_icons5"></div><h6>帮助中心</h6>您的购物指南</li></ul><div class="mod_help w"><ul><li><h6>购物指南</h6></li><li><a href="#">购物流程</a></li><li><a href="#">会员介绍</a></li><li><a href="#">生活旅行</a>/<a href="#">团购</a></li><li><a href="#">常见问题</a></li><li><a href="#">大家电</a></li><li><a href="#">联系客服</a></li></ul><ul><li><h6>配送方式</h6></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li><li><a href="#">海外配送</a></li></ul><ul><li><h6>支付方式</h6></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><ul><li><h6>售后服务</h6></li><li><a href="#">售后政策</a></li><li><a href="#">价格保护</a></li><li><a href="#">退款说明</a></li><li><a href="#">返修</a>/<a href="#">退换货</a></li><li><a href="#">取消订单</a></li></ul><ul><li><h6>特色服务</h6></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">品优购E卡</a></li><li><a href="#">品优购通信</a></li></ul><div class="about_app"><ul><li><h6>帮助中心</h6></li><li><img src="upload/erweima.png"></li><li><a href="#">品优购客户端</a></li></ul></div></div><div class="mod_copyright w"><ul><li><a href="#">关于我们</a></li><li class="style_y"></li><li><a href="#">联系我们</a></li><li class="style_y"></li><li><a href="#">联系客服</a></li><li class="style_y"></li><li><a href="#">商家入驻</a></li><li class="style_y"></li><li><a href="#">营销中心</a></li><li class="style_y"></li><li><a href="#">手机品优购</a></li><li class="style_y"></li><li><a href="#">友情链接</a></li><li class="style_y"></li><li><a href="#">销售联盟</a></li><li class="style_y"></li><li><a href="#">品优购社区</a></li><li class="style_y"></li><li><a href="#">品优购公益</a></li><li class="style_y"></li><li><a href="#">English Site</a></li><li class="style_y"></li><li><a href="#">Contact U</a></li></ul><div class="about_us"><p>地址:北京市你猜猜我在哪大厦一层 邮编：100001 电话：400-8823-823 传真：010-10086 邮箱：niubi@niu.com</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- 底部关于我们结束 -->
</body>
</html>
注册页面(register.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>品优购注册</title><!-- 初始化 --><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/register.css">
</head>
<body><div class="w"><!-- 头部logo --><div class="register_header"><a href="index.html"><img src="img/logo.png"></a></div><!-- 注册 --><div class="registerarea"><div class="registerarea_nav"><div class="registerarea_title">注册新用户</div><div class="registerarea_login">我有账号，去<a href="#">登陆</a></div></div><div class="reg_form"><form action="demp.php"><ul><li><label for="tel">手机号：</label><input type="text" class="inp" id="tel"><span class="reg_success"><i class="success_icon"></i></span><span class="reg_error"><i class="error_icon"></i>手机号码格式不正确，请重新输入</span></li><li><label for="massage">短信验证码：</label><input type="text" class="inp" id="massage"><span class="reg_getmassage"><a href="#">获取验证码</a></span></li><li><label for="password">登陆密码：</label><input type="text" class="inp" id="password"><span class="reg_success"><i class="success_icon"></i></span><span class="reg_error"><i class="error_icon"></i>密码不少于6位数，请重新输入</span></li><li class="safe">安全程度<em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></li><li><label for="sure_password">确认密码：</label><input type="text" class="inp" id="sure_password"><span class="reg_success"><i class="success_icon"></i></span><span class="reg_error"><i class="error_icon"></i>密码不一致，请重新输入</span></li><li class="reg_agree"><input type="checkbox" class="reg_check">同意协议并注册<a href="#">《品优购用户协议》</a></li><li class="reg_finish"><input type="submit" class="reg_submit" value="完成注册"></li></ul></form></div></div><!-- 底部关于我们开始 --><div class="footer"><div class="mod_copyright w"><ul><li><a href="#">关于我们</a></li><li class="style_y"></li><li><a href="#">联系我们</a></li><li class="style_y"></li><li><a href="#">联系客服</a></li><li class="style_y"></li><li><a href="#">商家入驻</a></li><li class="style_y"></li><li><a href="#">营销中心</a></li><li class="style_y"></li><li><a href="#">手机品优购</a></li><li class="style_y"></li><li><a href="#">友情链接</a></li><li class="style_y"></li><li><a href="#">销售联盟</a></li><li class="style_y"></li><li><a href="#">品优购社区</a></li><li class="style_y"></li><li><a href="#">品优购公益</a></li><li class="style_y"></li><li><a href="#">English Site</a></li><li class="style_y"></li><li><a href="#">Contact U</a></li></ul><div class="about_us"><p>地址:北京市你猜猜我在哪大厦一层 邮编：100001 电话：400-8823-823 传真：010-10086 邮箱：niubi@niu.com</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div><!-- 底部关于我们结束 -->
</body>
</html>
CSS代码
通用css(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;
}
公用css(common.css)
/* 公共样式 *//* 左浮动 */
.fl {float: left;
}
/* 右浮动 */
.fr {float: right;
}
/* 版心 */
.w {width: 1200px;margin: 0 auto;
}.font_color_red{color: #c81623;
}.font_weight_600{font-weight: 600;
}/* 快捷导航栏 */
.shortcut{width: 100%;height: 31px;line-height: 31px;background-color: #f1f1f1;font-size: 12px;color: #666;
}.shortcut .login li{float: left;
}.shortcut .w .shortcut_nav li{float: left;
}.shortcut .w .shortcut_nav .style_y{margin: 9px 8.55px 0;width: 1px;height: 13px;background-color: #666;
}.shortcut .w .shortcut_nav .jdphone:hover .jd_ewm{display: block;
}.jd_ewm{display: none;position: absolute;margin-left: -15px;width: 60px;height: 60px;padding: 10px;background-color: #FFF;box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);z-index: 9999;
}
.sjd_ewm{position: absolute;top: -12%;margin-top: -0.4px;left: 50%;margin-left: -5px;position: absolute;width: 0;height: 0;font-size: 0;line-height: 0;border-style: solid;border-width: 5px;border-color: transparent transparent #FFF transparent;z-index: 9999;
}/* 声明调用特殊字体图标 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?464l3b');src: url('../fonts/icomoon.eot?464l3b#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?464l3b') format('truetype'),url('../fonts/icomoon.woff?464l3b') format('woff'),url('../fonts/icomoon.svg?464l3b#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}.font_icon_down{font-family: 'icomoon';font-size: 17px;line-height: 23px;
}.header{position: relative;height: 105px;
}.header .logo{position: absolute;top: 50%;margin-top: -27.5px;
}.logo a{display: block;width: 175px;height: 56px;background: url('../img/logo.png') no-repeat;/* 首行缩进 并且隐藏溢出内容 实现让文字消失text-indent: -9999px;overflow: hidden; *//* 让文字直接是0像素 直接就不显示了font-size: 0;*/font-size: 0;
}.header .search{position: absolute;left: 50%;margin-left: -250px;top: 50%;margin-top: -22px;
}
.header .search input{float: left;padding-left: 10px;width: 454px;height: 32px;font-size: 14px;color: #666;line-height: 32px;border: 2px solid #b1191a;
}.header .search button{width: 78px;height: 36px;background-color: #b1191a;font-size: 16px;color: #fff;border: 2px solid #b1191a;
}.header .hotwords{position: absolute;left: 50%;margin-left: -250px;top: 50%;margin-top: 15px;width: 546px;height: 26px;line-height: 26px;
}
.header .hotwords li{float: left;margin-right: 10px;font-size: 12px;color: #666;
}.header .shopcar{position: absolute;right: 50%;margin-right: -550px;top: 50%;margin-top: -22px;padding-left: 24px;width: 114px;height: 34px;line-height: 29px;font-size: 12px;color: #666;background-color: #f7f7f7;border: 1px solid #dfdfdf;
}.icon_count{position: relative;
}/* 购物车 因为给了右侧定位 当数字提升时文字会向左延申而不是向右延申 感觉上美观点 */
.count{position: absolute;top: 50%;right: 50%;margin-top: -8.5px;margin-right: -34px;padding: 2px 3px 1px 2px;height: 10px;line-height: 10px;text-align: center;font-size: 12px;color: #fefefe;background-color: #e60012;z-index: 1;border-radius: 7px 7px 7px 0;
}
.shopcar a{float: left;margin-top: 3.2px;margin-left: 5px;
}
.font_icon_shopcar{float: left;margin-top: 3px;font-family: 'icomoon';font-size: 15px;color: #b1191a;
}.header .shopcar .font_icon_right{float: left;margin-top: 4px;margin-left: 5px;font-family: 'icomoon';font-size: 15px;
}.nav{height: 45px;border-bottom: 2px solid #b1191a;
}.dropdown{
/* border-bottom: 1px solid #c81623; */
}.dropdown .dt {margin-bottom: 2px;width: 210px;height: 45px;line-height: 45px;font-size: 16px;color: #fff;text-align: center;background-color: #b1191a;
}.dropdown .dt a{color: #fff;
}.dropdown .dt:hover + .dd{display: block;
}.dropdown .dd{display: none;position: relative;z-index: 1;
}.dropdown li{position: relative;width: 195px;padding-left: 15px;height: 31px;line-height: 31px;font-size: 14px;color: #fff;background-color: #c81623;
}.dropdown li a{color: #fff;
}.dropdown li:hover{color: #c81623;background-color: #fff;border-left: 1px solid #c81623;width: 194px;
}.dropdown .item_fore15{border-bottom: 1px solid #c81623;
}.dropdown .item_fore15:hover{border-bottom: 1px solid #c81623;
}.dropdown li:hover a{color: #c81623;
}.dropdown .font_icon_right{position: absolute;top: 1.5px;right: 5%;font-family: 'icomoon';
}.nav_items{position: relative;left: 10px;
}.nav_items li{float: left;padding: 0 31px;height: 45px;font-size: 16px;color: #333;line-height: 45px;text-align: center;
}.footer{margin-top: 30px;width: 100%;height: 417px;background-color: #f5f5f5;
}.mod_service{height: 109px;border-bottom: 1px solid #ededed;
}.mod_service li{display: inline-block;float: left;width: 165px;padding: 30px 37.5px;font-size: 12px;
}.mod_service li h6{margin: 5px;font-size: 14px;color: #333;
}.slogen_icons1{margin-right: 8px;width: 49px;height: 49px;background: url('../img/icons.png') no-repeat -253px -3px;float: left;
}
.slogen_icons2{margin-right: 8px;width: 49px;height: 49px;background: url('../img/icons.png') no-repeat -255px -54px;float: left;
}
.slogen_icons3{margin-right: 8px;width: 49px;height: 49px;background: url('../img/icons.png') no-repeat -257px -106px;float: left;
}
.slogen_icons4{margin-right: 8px;width: 49px;height: 49px;background: url('../img/icons.png') no-repeat -258px -157px;float: left;
}
.slogen_icons5{margin-right: 8px;width: 49px;height: 49px;background: url('../img/icons.png') no-repeat -257px -209px;float: left;
}.mod_help{position: relative;height: 187px;border-bottom: 1px solid #ededed;
}.mod_help ul{float:left;padding: 20px 65px;
}.mod_help li h6{display: inline-block;padding-bottom: 7px;font-size: 16px;font-weight: normal;color: #333;
}.mod_help a{display: inline-block;padding: 0.5px 0;
}.about_app{position: absolute;right: 0;
}.about_app li h6{margin-left: 13.5px;
}.about_app li a{margin-top: 5px;margin-left: 11px;
}.mod_copyright{width: 970px;height: 16px;padding: 20px 115px 0;
}.mod_copyright li{float: left;border-right:
}.mod_copyright .style_y{margin: 3px 14.5px 0;width: 1px;height: 12px;background-color: #333;
}.about_us{height: 50px;width: 970px;margin-top: 30px;
}.about_us p{text-align: center;
}
首页css(index.css)
/* 首页样式 *//* 为了方便首页先把那个下拉菜单让他常驻显示一下 */
.dropdown .dd{display: block;
}.main{position: relative;height: 466px;
}.focus{position: absolute;bottom: 0;left: 50%;margin-left: -380px;
}.button_arrowleft{position: absolute;border: none;top: 50%;margin-top: -20px;width: 30px;height: 40px;background-color: rgba(0, 0, 0, 0.3);border-radius: 0 20px 20px 0;
}.button_arrowleft:hover{background-color: rgba(0, 0, 0, 0.5);
}.button_arrowright{position: absolute;right: 0;top: 50%;margin-top: -20px;border: none;width: 30px;height: 40px;background-color: rgba(0, 0, 0, 0.3);border-radius: 20px 0 0 20px;
}.button_arrowright:hover{background-color: rgba(0, 0, 0, 0.5);
}.button_bottom{position: absolute;left: 5%;bottom: 5%;
}.button_bottom li{float: left;margin: 0 2px;width: 12px;height: 12px;background-color: rgba(0, 0, 0, 0.3);border-radius: 50%;
}.button_bottom li button{margin: 2px 2px;display: block;width: 8px;height: 8px;border: none;border-radius: 50%;background-color: #fff;cursor: default;
}.focus .font_icon_left{margin-left: 5px;font-family: 'icomoon';font-size: 16px;font-weight: 700;color: rgba(255, 255, 255, 0.8);
}.focus .font_icon_right{font-family: 'icomoon';font-size: 16px;font-weight: 700;color: rgba(255, 255, 255, 0.8);
}.newflash{position: absolute;width: 248px;height: 371px;border: 1px solid #e4e4e4;right: 0;margin-top: 11px;
}.newflash .news{height: 31px;line-height: 31px;padding-left: 15px;border-bottom: 1px dotted #e4e4e4;
}.newflash .news li{float: left;
}.newflash .news li h3{font-size: 14px;font-weight: normal;color: #333;
}.newflash .news li a{display: inline-block;margin-left: 120px;
}
.newflash .news .font_icon_right{font-family: 'icomoon';font-size: 12px;
}.news_content{padding: 10px 0 10px 15px;border-bottom: 1px solid #e4e4e4;
}.news_content li{height: 20px;line-height: 20px;
}.lifeservice{width: 249px;
}.lifeservice li{position: relative;float: left;width: 61.25px;height: 72px;text-align: center;line-height: 120px;border: 1px solid #e4e4e4;margin-left: -1px;margin-top: -1px;
}.lifeservice img{position: absolute;right: 50%;margin-right: -17px;top: 12px;width: 35px;height: 35px;
}.bargain{position: absolute;left: -1px;bottom: -83px;
}.recommend{margin-top: 10px;height: 165px;
}.re_hd{float: left;position: relative;width: 206px;height: 165px;line-height: 125px;text-align: center;background-color: #5c5251;
}.re_hd h3{position: absolute;top: 50px;left: 68.5px;font-size: 18px;color: #fff;font-weight: normal;
}.re_bd{float: left;width: 994px;height: 165px;background-color: #ebebeb;
}.re_bd li{float: left;}.re_bd li a{display: block;width: 246.75px;height: 143px;padding: 11px 0; border-right: 1px solid #ddd;
}.re_bd .last{border: none;
}.likes{margin-top: 30px;height: 260px;
}.likes_title{position: relative;height: 20px;line-height: 20px;text-align: center;
}.likes_title h3{float: left;font-size: 18px;color: #333;font-weight: normal;
}.likes_title button{position: absolute;right: 30px;top: 2px;border: none;background-color: transparent;font-size: 12px;color: #666;
}.likes_bd{margin-top: 10px;height: 228px;border: 1px solid #ededed;
}.likes_bd li{float: left;width: 199px;height: 228px;
}.likes_bd li .likes_itmes1{margin: 5px 19.5px;
}.likes_itmes2{margin: 14px 28.5px;
}.likes_itmes3{height: 111px;margin: 20px 81px;
}.likes_itmes4{margin: 44.5px 37px;
}.likes_itmes5{height: 111px;margin: 20px 42px;
}.likes_itmes6{margin: 11.5px 69.5px;
}.likes_bd li a{display: block;margin-left: 35px;border-right: 1px solid #ededed;
}.likes_bd li a h3{font-size: 18px;color: #df3033;font-weight: normal;
}.likes_bd li a h3 i{font-size: 14px;
}.likes_bd li .border_none{border: none;
}.good{margin-top: 30px;height: 435px;
}.good_title{height: 20px;line-height: 20px;text-align: center;
}.good_title h3{float: left;font-size: 18px;color: #333;font-weight: normal;
}.good_bd{margin-top: 10px;height: 403px;border: 1px solid #ededed;
}.book{float: left;width: 404px;height: 403px;background-color: #b8bddd;
}.book a{display: block;padding: 23px 0 0 24px;width: 380px;height: 380px;font-size: 16px;color: #3b468d;
}.book a h3{font-size: 18px;font-weight: normal;
}.icon_goods1{margin-left: 100px;margin-top: 30px;width: 224px;height: 260px;background: url('../upload/icon_logo.png') no-repeat 0 0 ;
}.thing{float: left;width: 226px;height: 403px;border-right: 1px solid #ededed;
}.thing_title{margin: 0 auto;width: 200px;height: 39px;line-height: 39px;text-align: center;font-size: 14px;color: #333;border-bottom: 1px dashed #ededed;
}.wise{border-bottom: 1px solid #ededed;
}.wise a{display: block;padding-left: 10px;padding-top: 74px;width: 216px;height: 130px;color: #333;
}.wise a h3{font-size: 16px;font-weight: normal;
}.wise a i{color: #e60012;
}.icon_goods2{margin-top: -105px;margin-left: 83px;width: 133px;height: 161px;background: url('../upload/icon_logo.png') no-repeat -1px -346px;
}.find a{display: block;padding-left: 10px;padding-top: 48px;width: 216px;height: 110px;color: #333;
}.find a h3{font-size: 16px;font-weight: normal;
}.find a i{color: #e60012;
}.icon_goods3{margin-top: -94px;margin-left: 92px;width: 124px;height: 145px;background: url('../upload/icon_logo.png') no-repeat 0 -534px;
}.major{float: left;height: 403px;width: 405px;border-right: 1px solid #ededed;background-color: #f7f7f7;
}.major_title{margin: 0 auto;width: 380px;height: 39px;line-height: 39px;text-align: center;font-size: 14px;color: #333;border-bottom: 1px dashed #ededed;
}.supor{border-bottom: 1px solid #ededed;
}.supor a{display: block;padding-left: 60px;padding-top: 74px;width: 345px;height: 130px;color: #333;
}.supor a h3{font-size: 16px;font-weight: normal;
}.supor a i{color: #e60012;
}.icon_goods4{margin-top: -100px;margin-left: 140px;width: 205px;height: 159px;background: url('../upload/icon_logo.png') no-repeat -342px -2px;
}.adidas a{display: block;float: left;padding-left: 15px;padding-top: 48px;width: 187px;height: 110px;color: #333;border-right: 1px solid #ededed;
}.adidas a h3{font-size: 16px;font-weight: normal;
}.adidas a i{color: #e60012;
}.week a{display: block;float: left;padding-left: 15px;padding-top: 48px;width: 187px;height: 110px;color: #333;
}.week a h3{font-size: 16px;font-weight: normal;
}.week a i{color: #e60012;
}.icon_goods5{margin-top: -82px;margin-left: 73px;width: 114px;height: 132px;background: url('../upload/icon_logo.png') no-repeat -342px -212px;
}.icon_goods6{margin-top: -87px;margin-left: 67px;width: 120px;height: 137px;background: url('../upload/icon_logo.png') no-repeat -342px -394px;
}.company{float: left;padding: 7px 0 0px 2px;height: 396px;width: 159px;}.company a{display: block;float: left;width: 78px;height: 55px;border-bottom: 1px dashed #ededed;border-right: 1px dashed #ededed;
}.company .bordernone{border-right: none;
}.company .bordernone2{border-bottom: none;
}.icon_goods7{margin-top: 8px;width: 159px;height: 381px;background: url('../upload/icon_logo2.png') no-repeat -6px -15px;
}.floor{margin-top: 30px;
}.box_hd{height: 28px;border-bottom: 2px solid #c81623;line-height: 28px;
}.box_hd h3{float: left;font-size: 18px;color: #c81623;font-weight: normal;
}.box_hd ul{float: right;margin-right: 10px;
}.box_hd li{float: left;
}.box_hd .style_y{margin: 8px 9.52px 0;width: 1px;height: 12px;background-color: #666;
}.box_bd{height: 359px;border: 1px solid #ededed;border-top: none;
}.tab_content li{float: left;height: 359px;
}.t_c_1{width: 209px;border-right: 1px solid #ededed;background-color: #f9f9f9;
}.t_c_2{width: 329px;border-right: 1px solid #ededed;
}.t_c_3{width: 219px;border-right: 1px solid #ededed;
}.t_c_4{width: 219px;border-right: 1px solid #ededed;
}.t_c_5{width: 218px;
}.t_hotwords{height: 99px;
}.t_hotwords li{margin: 0 9px;width: 86px;height: 32px;border-bottom: 1px solid #ededed;line-height: 32px;text-align: center;
}.tc1_a{display: block;height: 260px;text-align: center;color: #c81623;
}.tc1_a h3{padding-top: 30px;font-size: 18px;color: #c81623;font-weight: normal;
}.tc1_a img{margin-top: 25px;
}.t_c_2 a{display: block;position: relative;padding-left: 30px;padding-top: 30px;width: 299px;height: 329px;font-size: 16px;color: #066c7d;background-color: #aed6d8;
}.t_c_2 a h3{font-size: 18px;font-weight: normal;
}.t_c_2 .color_bg2{color: #4c852a;background-color: #c6e8b6;
}.t_c_2 .color_bg3{color: #874d75;background-color: #d7aac9;
}.t_c_2 a img{position: absolute;top: 60%;left: 50%;margin-top: -90px;margin-left: -80px;width: 160px;height: 160px;}.t_c_3 h3{font-size: 16px;color: #000;font-weight: normal;
}.t_c_3 a{position: relative;
}.t_c_3 a img{position: absolute;right: 0;bottom: 0;
}.tc3_a1{display: block;padding-top: 20px;padding-left: 19px;width: 200px;height: 160px;border-bottom: 1px solid #ededed;font-size: 14px;color: #c81623;
}.tc3_a2{display: block;padding-top: 20px;padding-left: 19px;width: 200px;height: 158px;font-size: 14px;color: #c81623;
}.t_c_4 a{position: relative;display: block;width: 219px;height: 359px;font-size: 16px;color: #999;text-align: center;
}.t_c_4 a h3{padding-top: 80px;font-size: 18px;color: #000;font-weight: normal;
}.t_c_4 a img{position: absolute;top: 45%;left: 20%;
}.t_c_5 h3{font-size: 16px;color: #000;font-weight: normal;
}.t_c_5 a{position: relative;
}.t_c_5 a img{position: absolute;right: 1px;bottom: 0;
}.tc5_a1{display: block;padding-top: 20px;padding-left: 19px;width: 200px;height: 160px;border-bottom: 1px solid #ededed;font-size: 14px;color: #c81623;
}.tc5_a2{display: block;padding-top: 20px;padding-left: 19px;width: 200px;height: 158px;font-size: 14px;color: #c81623;
}.margin-top-30{margin-top: 30px;
}.margin-left-20{margin-left: -20px;
}.margin-left-10px{margin-left: 10px;
}.box_ft{margin-top: 20px;height: 88px;background-color: #f7f7f7;
}.box_ft img{margin-top: -108.5px;padding: 11.5px 0;
}.box_ft li{float: left;
}.box_ft a{position: relative;display: block;width: 120px;height: 88px;
}.fixedtool{position: fixed;top: 350px;left: 50%;margin-left: -676px;
}.fixedtool li a{display: block;width: 56px;height: 31px;text-align: center;line-height: 32px;margin: 0 5px;border-bottom: 1px solid #ededed;
}.fixedtool li a:hover{height: 32px;border: none;width: 66px;margin: 0;color: #fff;background-color: #c81623;
}
商品列表页css(list.css)
.second_kill{position: absolute;left: 190px;top: 10px;padding-left: 15px;height: 32px;border-left: 1px solid #b1191a;line-height: 25px;
}.nav_items_left{float: left;
}.nav_items_left li{float: left;padding: 0 30px;height: 45px;text-align: center;line-height: 45px;
}.nav_items_left li a{font-size: 16px;color: #000;font-weight: 600;
}.nav_items li{font-size: 14px;padding: 0 23px;
}.nav_items i{font-family: 'icomoon';
}.font_color_red{color: #b1191a;
}.sk_hd{position: relative;height: 120px;background: url('../img/sk_hd_bg.png') no-repeat;
}.sk_hd h3{position: relative;padding-top: 10px;margin-left: 25px;font-size: 24px;color: #c81523;font-weight: bold;
}.sk_hd h3 img{position: absolute;top: 14px;left: 8px;width: 25px;height: 30px;
}.sk_hd_title{position: absolute;left: 50%;margin-left: -105px;top: 50%;margin-top: -42.5px;width: 210px;height: 85px;text-align: center;
}.sk_hd_title li{float: left;margin: 18px 0 0;width: 50px;height: 1px;background: #000;
}.sk_hd_title .now_cg{padding-top: 5px;margin: 0 22px;width: auto;height: auto;background: transparent;font-size: 16px;color: #000;
}.sk_bd li{float: left;margin-top: 25px;margin-right: 13.33px;width: 270px;height: 460px;padding-left: 20px;padding-top: 1px;
}.sk_bd li:hover{width: 268px;height: 458px;border: 1px solid #e12228;padding-left: 19px;padding-top: 0;margin-right: 14.33px;
}.sk_bd .mr_no:hover{margin-right: 0;
}.sk_bd li img{width: 250px;margin-bottom: 50px;
}.sk_bd .mr_no{margin-right: 0;
}.sk_bd li a{position: relative;font-size: 14px;color: #666;
}.sk_bd li a .pay{color: #e60012;
}.pay i{margin-left: -2px;font-size: 22px;
}.pay s{margin-left: 5px;color: #a4a4a4;
}.last{color: #e60012;
}.sile{position: relative;
}.all{position: absolute;left: 64px;top: 241.5px;width: 130px;height: 12px;background-color: #fff;border: 1px solid #ed282e;border-radius: 8px;
}.have{width: 113.1px;height: 12px;background-color: #ed282e;border-radius: 8px 0 0 8px;
}.last_font{margin-left: 140px;
}.sk_bd li a h3{height: 50px;width: 289px;background-color: #b1191a;font-size: 20px;color: #fff;font-weight: normal;text-align: center;line-height: 50px;margin-left: -20px;margin-top: 8px;
}.page{margin-top: 30px;text-align: center;
}.page_num a{display: inline-block;padding: 10px 15px;background-color: #f7f7f7;border: 1px solid #ededed;
}.page_num .current{border: none;background-color: transparent;
}.span_skip{margin-left: 20px;
}.span_skip input{width: 50px;height: 40px;border: 1px solid #ededed;text-align: center;
}.span_skip button{padding: 10px 15px;background-color: #f7f7f7;border: 1px solid #ededed;
}
商品详情页css(detail.css)
.de_container{margin-top: 30px;
}.crumb_wrap li{float: left;
}.crumb_wrap .font_icon_right{margin-top: 1px;padding: 0 15px;font-family: 'icomoon';font-size: 12px;
}.font_color_333{color: #333;
}.preview_wrap{float: left;width: 450px;height: 580px;
}.product_img{position: relative;border: 1px solid #ededed;width: 448px;height: 448px;line-height: 448px;text-align: center;
}.product_img i{display: block;position: absolute;bottom: 0;right: 0;width: 30px;height: 30px;background: url('../img/detail_icons.png') no-repeat 0 -24px;
}.arr_left{margin-top: 15px;float: left;width: 50px;height: 60px;
}.arr_left i{position: relative;margin-top: 16px;left: 50%;margin-left: -11px;display: block;width: 22px;height: 32px;background: url('../img/detail_icons.png') no-repeat 0 -54px;
}.arr_right{margin-top: 15px;float: right;width: 50px;height: 60px;
}.arr_right i{position: relative;margin-top: 16px;left: 50%;margin-left: -11px;display: block;width: 22px;height: 32px;background: url('../img/detail_icons.png') no-repeat -78px 0;
}.product_img_li{margin-top: 15px;float: left;
}.product_img_li img{width: 54px;height: 54px;
}.product_img_li li{margin: 0px 6px;padding: 1px 0;float: left;border: 2px solid transparent;
}.product_img_li .current{border: 2px solid #e12228;
}.product_information{margin-top: 20px;color: #666;
}.share{margin-left: 40px;
}.share i{position: relative;top: 1.5px;margin-right: 5px;display: inline-block;width: 14px;height: 14px;background: url('../img/detail_icons.png') no-repeat -46px -24px;
}.attention{margin-left: 40px;
}.attention i{position: relative;top: 1px;margin-right: 3px;display: inline-block;width: 14px;height: 12px;background: url('../img/detail_icons.png') no-repeat -44px -40px;
}.attention_count{margin-left: 5px;
}.check{margin-left: 35px;
}.check i{position: relative;top: 1.5px;margin-right: 5px;display: inline-block;width: 15px;height: 16px;background: url('../img/detail_icons.png') no-repeat -30px -24px;
}.iteminfo_wrap{float: left;margin-left: 40px;width: 710px;
}.iteminfo{border-bottom: 1px solid #ededed;
}.iteminfo li{padding: 5px 0;font-size: 12px;color: #666;
}.iteminfo li h3{font-size: 16px;color: #333;font-weight: normal;
}.recommend{font-size: 12px;color: #e12228;
}.recommend a{color: #e12228;font-weight: bold;
}.price{margin-left: 10px;font-size: 16px;color: #e12228;
}.price i{font-size: 24px;
}.price_cut{margin-left: 5px;color: #c81623;
}.evaluation{position: relative;top: 5px;float: right;color: #999;
}.evaluation a{color: #1474af;
}.iteminfo .bg_fee9eb{background-color: #ededed;padding: 5px 10px;
}.iteminfo .pd_none{padding: 0;
}.markup{margin-left: 10px;color: #fff;background-color: #c81623;
}.markup_content{margin-left: 5px;color: #999;
}.markup_content2{margin-left: 105.5px;color: #999;
}.markup_content2 a{color: #c81623;
}.iteminfo .li_pd{padding: 5px 10px;position: relative;
}.li_pd a{padding: 0 10px;color: #5e69ad;
}.two_space{padding: 0 12px;
}.three_space{padding: 0 3px;
}.iteminfo_choose{border-bottom: 1px solid #ededed;
}.iteminfo_choose li{padding: 10px 10px;
}.iteminfo_choose li a{display: inline-block;color: #000;background-color: #f7f7f7;padding: 11px 20px;border: 1px solid #ededed;
}.iteminfo_choose li .iteminfo_current{border: 1px solid #e12228;
}.iteminfo_choose li .first_a{margin-left: 10px;
}.font_color_999{margin-left: 3px;color: #999;
}.address_ul{position: relative;margin-left: 10px;border: 1px solid #CECBCE;
}
.address_ul a{padding: 1px 8px;padding-right: 4px;color: #000;
}.address_ul i{font-family: 'icomoon';font-size: 18px;color: #999;
}.address_support_title{display: inline-block;width: 330px;position: relative;left: 15px;color: #000;
}.address_support{display: inline;position: absolute;top: 0;left: 35px;
}.address_support li{padding: 0;float: left;
}.address_support .style_y{margin-top: 3px;width: 1px;height: 12px;background-color: #888;
}.address_support_title i{position: absolute;top: -7.5px;right: 0;font-family: 'icomoon';font-size: 18px;
}.delivery{padding-top: 8px;padding-bottom: 2px;margin-left: 70px;color: #999;
}.delivery i{padding: 0 5px;color: #e4393c;
}.choose_btns{margin-top: 20px;
}.choose_amount{position: relative;margin-left: 10px;float: left;width: 64px;height: 45px;border: 1px solid #ccc;
}.choose_amount a{position: absolute;right: 0;display: block;width: 15px;height: 22px;background-color: #f7f7f7;text-align: center;
}.choose_amount .p_add{top: 0;
}.choose_amount .p_reduce{bottom: 0;
}.choose_amount .border_bottom{border-bottom: 1px solid #ccc;
}.choose_amount_text{width: 48px;height: 45px;color: #000;border: none;text-align: center;font-size: 12px;border-right: 1px solid #ccc;
}.addshopcar{float: left;margin-left: 20px;width: 140px;height: 47px;background-color: #e12228;color: #fff;line-height: 47px;text-align: center;font-size: 18px;
}.addshopcar:hover{color: #fff;
}.product_detail{margin: 30px auto 0;
}.aside{float: left;width: 208px;height: 1998px;border: 1px solid #ddd;
}.detail{margin-left: 30px;float: left;width: 960px;
}.related_suggestion li{float: left;width: 103px;height: 33px;line-height: 33px;text-align: center;border-bottom: 1px solid #ddd;background-color: #f1f1f1;
}.related_suggestion .related{width: 104px;border: 0;background-color: #fff;
}.suggestion{border-left: 1px solid #ddd;
}.related:hover{width: 104px;border: 0;background-color: #fff;
}.suggestion:hover{width: 103px;height: 34px;border-bottom: 0;background-color: #fff;
}.related_body{margin-top: 5px;
}.related_body li{position: relative;width: 168px;margin: 0 20px;height: 18px;line-height: 18px;border-bottom: 1px dashed #ddd;background-color: #fff;padding-top: 5px;
}.related_l{float: left;margin-left: 5px;
}.related_r{position: absolute;left:50%;float: left;margin-left: 10px;
}.other_options{margin-top: 20px;
}.other_options li{width: 168px;margin: 0 20px;padding: 5px 0 10px;border-bottom: 1px dashed #ddd;
}.other_options li h3{text-align: center;font-weight: normal;
}.other_product img{display: block;margin: 5px auto;
}.other_product .other_detail{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #333;
}.detail_pay{margin-top: 5px;color: #e12228;font-weight: bold;
}.other_addshopcar{display: block;margin: 5px auto;width: 88px;height: 26px;text-align: center;line-height: 26px;background-color: #f7f7f7;border: 1px solid #ddd;
}.product_match{width: 958px;height: 290px;border: 1px solid #ddd;
}.product_match_title{width: 100%;height: 39px;background-color: #f1f1f1;border-bottom: 1px solid #ddd;color: #fff;line-height: 39px;
}.product_match_title p{display: inline-block;background-color: #e12228;height: 39px;padding: 0 10px;
}.match_select{position: relative;float: left;width: 787px;height: 250px;border-right: 1px solid #ddd;
}.match_pay{float: left;width: 170px;height: 250px;
}.match_addshopcar{display: block;margin: 20px auto 0;width: 140px;height: 47px;background-color: #e12228;color: #fff;line-height: 47px;text-align: center;font-size: 18px;
}.match_addshopcar:hover{color: #fff;
}.match_detail{margin-left: 15px;margin-top: 40px;color: #333;
}.match_count{color: #e12228;
}.match_paycount_title{margin-left: 15px;margin-top: 20px;color: #333;font-weight: bold;
}.match_paycount{margin-left: 15px;margin-top: 5px;font-size: 16px;color: #e12228;
}.match_paycount i{font-size: 24px;
}.match_select_nav{margin-top: 10px;width: 778px;height: 18px;padding-left: 10px;
}.match_select_nav li{float: left;color: #999;padding: 0 10px;
}.match_select_items{margin-top: 30px;
}.match_select_items li{width: 140px;float: left;margin: 0 5px;
}.match_select_items .match_icon{width: auto;height: 130px;line-height: 130px;margin: 0;margin-left: -20px;
}.produce_pay{margin-top: 5px;margin-left: 43px;font-size: 14px;color: #e12228;
}.match_select_items .match_mr{margin-left: 24px;
}.match_select_items li img{display: block;margin: 0 auto;
}.match_itmes_title{margin-top: 10px;margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #333;
}.match_select_items input{position: relative;top: 1px;width: 11px;height: 11px;margin-left: 10px;border: 1px solid #ddd;
}.match_select_items span{color: #e12228;
}.match_select_btl{display: none;position: absolute;left: 160px;top: 50%;margin-top: -35px;width: 20px;height: 70px;background-color: #ddd;line-height: 70px;text-align: center;color: #fff;
}.match_select_btl i{position: relative;font-family: 'icomoon';font-weight: bold;font-size: 20px;left: 3.5px;
}.match_select_btl:hover{color: #fff;
}.match_select_btr{position: absolute;right: 0;top: 50%;margin-top: -35px;width: 20px;height: 70px;background-color: #ddd;line-height: 70px;color: #fff;
}.match_select_btr i{position: relative;font-family: 'icomoon';font-weight: bold;font-size: 20px;right: 3.5px;
}.match_select_btr:hover{color: #fff;
}.all_detail_nav{margin-top: 20px;width: 100%;height: 39px;background-color: #f1f1f1;border-bottom: 1px solid #ddd;color: #fff;line-height: 39px
}.all_detail_nav li{float: left;height: 39px;padding: 0 10px;
}.all_detail_nav .color_e12228{background-color: #e12228;color: #fff;
}.all_detail_nav .color_e12228 a{color: #fff;
}.all_detail_nav li:hover{background-color: #e12228;
}.all_detail_nav li:hover a{background-color: #e12228;color: #fff;
}.all_detail_nav li a{color: #333;
}.parameters{width: 100%;margin-top: 80px;margin-left: 40px;
}.product_name{padding-bottom: 20px;
}.product_name li a{color: #5e69ad;
}.product_parameters li{width: 200px;padding: 5px 0;margin-right: 40px;float: left;
}.more_parameters{float: right;margin-top: 30px;margin-right: 100px;
}.more_parameters a{color: #5e69ad;
}.parameters_img{width: 100%;margin-top: 15px;padding-top: 20px;border-top: 1px solid #ddd;
}.parameters_img li img{display: block;margin: 0 auto;
}.p_img_1{height: 780px;background-color: #fbfbfb;
}.p_img_2{height: 430px;background-color: #f0f0f0;
}.p_img_3{margin: 70px auto 0;height: 480px;background-color: #fff;
}.also_like{margin: 0 auto;width: 1198px;height: 346px;border: 1px solid #ddd;
}.also_like_title{width: 100%;height: 39px;line-height: 39px;border-bottom: 1px solid #ddd;font-size: 16px;color: #333;background-color: #f1f1f1;
}.also_like_title p{margin-left: 20px;
}.also_like_items{margin-top: 40px;margin-left: 49px;
}.also_like_items li{float: left;width: 165px;padding-right: 22px;
}.also_like_items li img{display: block;margin: 0 auto;
}.also_like_items a .also_like_items_title{font-size: 12px;padding: 0 2px;color: #333;
}.also_like_pay{margin-top: 5px;margin-left: 2px;font-size: 14px;color: #e12228;
}.also_like_evaluate{margin-top: 30px;margin-left: 2px;color: #999;
}.also_like_evaluate span{color: #5e69ad;
}
注册页css(register.css)
.w{width: 1200px;margin: auto;
}.register_header{height: 80px;border-bottom: 4px solid #c81623;
}.register_header img{display: block;float: left;position: relative;margin-top: 12px;
}.registerarea{height: 518px;border: 1px solid #dfdfdf;border-top: none;margin-top: 40px;
}.registerarea_nav{height: 40px;line-height: 40px;background-color: #dfdfdf;font-size: 16px;color: #333;
}.registerarea_title{float: left;margin-left: 20px;
}.registerarea_login{float: right;margin-right: 20px;
}.registerarea_login a{color: #c81623;
}.reg_form{width: 650px;height: 400px;margin: auto;margin-top: 40px;
}.reg_form li{padding-bottom: 25px;
}.safe{margin-left: 178px;color: #dfdfdf;
}.safe em{padding: 0 12px;}.safe .ruo{background-color: #de1111;
}.safe .zhong{background-color: #40b83f;
}.safe .qiang{background-color: #f79100;
}.reg_form label{display: inline-block;width: 100px;height: 36px;line-height: 36px;text-align: right;
}.reg_form .inp{width: 240px;height: 34px;border: 1px solid #dfdfdf;font-size: 14px;margin-right: 10px;
}.reg_getmassage{display: inline-block;width: 100px;height: 32px;line-height: 32px;background-color: #dfdfdf;font-size: 14px;border: 1px solid #222;
}.reg_getmassage a{margin-left: 15px;
}.reg_form .reg_error{color: #df3033;font-size: 12px;
}.error_icon{display: inline-block;width: 20px;height: 20px;background: url('../img/error.png') no-repeat;vertical-align: middle;
}.success_icon{display: inline-block;width: 20px;height: 20px;background: url('../img/success.png') no-repeat;vertical-align: middle;
}.reg_agree{margin-left: 103px;
}.reg_agree .reg_check{vertical-align: middle;margin-right: 10px;
}.reg_agree a{color: #1ba1e6;
}.reg_finish{margin-left: 120px;margin-top: 20px;
}.reg_submit{width: 200px;height: 40px;line-height: 40px;text-align: center;border: none;background-color: #de1111;color: #fff;font-size: 14px;
}.footer{margin-top: 30px;width: 100%;
}.mod_copyright{width: 970px;height: 16px;padding: 20px 115px 0;
}.mod_copyright li{float: left;border-right:
}.mod_copyright .style_y{margin: 3px 14.5px 0;width: 1px;height: 12px;background-color: #333;
}.about_us{height: 50px;width: 970px;margin-top: 30px;
}.about_us p{text-align: center;
}
使用html+css实现-静态开源案例-品优购相关推荐
- CSS综合案例-品优购电商04
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详 ...
- 【JQ+html+css】我的购物车-品优购（案例实现）
前言 目录 前言 一.HTML 二.CSS 三.JQ 总结 图片两张自己另存 今天上课用jq做了个简单的购物车功能,其中核心功能有 1//全选 2//单选加商品背景 3//全选加商品背景 4// ...
- css三角形之美与品优购项目
CSS三角形之美 div{width: 0;height: 0;line-height:0;font-size: 0;border-top: 10px solid red;border-right:1 ...
- html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 纯HTML、CSS实现搭建品优购商城的静态网站 这布局还好吗？超适合前端入门者
这个静态网站非常适合前端入门者,我们很多时候学习的都是理论知识,我们应该多动手,把理论转化为实践,前端知识多,多动手才能加深印象. 网站地址:在PC端,点击这里,查看完整静态网站. 下面我们先来看看静 ...
- 品优购静态页面（html+css）——商品详情页
HTML部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 【前端】html+css案例：品优购 代码存档
文章目录 base.css 相似的开头head 共有的shortcut.header和footer html css:common.css index main recom floor list 改了 ...
- 品优购静态页面，前端初学一个半月，努力
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.html 1.首页index 2.列表页list 3.注册页 二.css 1.base.css 2.common. ...
- HTML+CSS实战---------一个电商类的小型项目：品优购（三）
昨天完成到了main主体区域板块. 公共样式写好了,就该新建一个CSS文件单独为首页index设置样式. 进度有点慢,因为昨天出现了问题,debug都用了半个小时,最后找到出问题的地方. 就是有一个盒 ...
最新文章
- kafka消息的分发与消费（一）
- idea2018使用整理
- 【CV】图像分割2020，架构，损失函数，数据集，框架的整理和总结
- Go微服务报错protoc-gen-go: unable to determine Go import path for
- vue v-Model
- 好的自我介绍，面试成功一大半
- C语言试题四十二之假定输入的字符串中只包含字母和*号。请编写函数fun，它的功能是：将字符串中的前导*号全部移到字符串的尾部。
- TCP协议的一些认识及实践
- C语言：四则计算器（支持小数，括号和次方幂 组合输入计算）
- activiti5.13 框架 数据库设计说明书
- 博客搬家到CSDN：http://blog.csdn.net/yeweiouyang
- 数据存储与访问之——初见SQLite数据库
- Java或Web中解决所有路径问题
- Mschart应用。
- Linux命令九---Linux进程管理命令---ps-kill-nohup-jobs-fg-bg-top等
- 【verilog教程】第3篇：verilog关键词
- 网上邻居的计算机用户名与密码是什么,访问网上邻居需要用户名和密码解决办法...
- 试论软件开发项目的成功因素
- 鸿蒙系统主题如何自定义,自定义流式布局
- linux运行img文件格式,img是什么格式？img文件怎么打开？