使用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/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</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</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</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</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;
}
pany{
float: left;
padding: 7px 0 0px 2px;
height: 396px;
width: 159px;
}
pany a{
display: block;
float: left;
width: 78px;
height: 55px;
border-bottom: 1px dashed #ededed;
border-right: 1px dashed #ededed;
}
pany .bordernone{
border-right: none;
}
pany .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实现-静态开源案例-品优购
发布评论