| 名称 | 说明 |
|---|---|
| shoping | 项目文件夹 |
| images | 样式类图片文件夹 |
| css | 样式文件夹 |
| upload | 产品类图片文件夹 |
| fonts |
字体类文件夹 |
| js | 脚本文件夹 |
| 首页 | index.html |
| CSS初始化样式文件 | base.css |
| CSS公共样式文件 | common.css |
模块化：将一个项目按照功能划分
一个功能一个模块，互不影响
模块化开发具有重复利用，更换方便等优点
有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都会有，此时，可以把这些结构和样式单独作为一个模块，然后重复使用
favicon.ico一般用于作为缩略图的网站标志，它显示在浏览器的地址或者标签上
1．把品优购图标切成png图片。
2.把png图片转换为ico图标，这需要借助于第三方转换网站，例如 :比特虫
也可直接在网站后面加上/favicon.ico回车即可得到该网站ico文件
SEO ( SearchEngine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
页面必须有三个标签用来符合SEO优化。
title具有不可替代性，是我们内页的第一个重要标签，是搜索引挚了解网页的入口和对网页主题归属的最佳判断点。
建议:网站名(产品名)–网站的介绍（尽量不要超过30个汉字)
例如∶
简要说明网站主要是做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是.….”、“我们提供.….”、“x××网作为.….”、“电话:010.”之类语句。
例如∶
keywords是页面关键词，是搜索引学的关注点之一。
keywords 最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
例如︰
品优购商城-综合网购首选，正品低价、品质保障、配送及时、轻松购物
以下是我们约定的命名模块，一般直接写以下类名
| 名称 | 说明 |
|---|---|
| shortcut | 快捷导航栏 |
| header | 头部 |
| logo | 标志 |
| shopcar | 购物车 |
| search | 搜索 |
| hotwords | 热点词 |
| nav | 导航 |
| dropdown包含.dd .dt |
导航左侧 |
| navitems | 导航右侧 |
| footer | 页面底部 |
| mod_service | 页面底部服务模块 |
| mod_help | 页面底部帮助模块 |
| mod_copyright | 页面底部版权模块 |
4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。
.logo a {
display: block;
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* 1.font-size: 0; */
text-indent: -100px;
overflow: hidden;
/* 让文字隐藏 */
}header区域里的内容一般通过定位实现。
采取定位方式实现，搜索框与按钮放置一个区域，二者采取浮动实现紧密连接。注意精准分配二者在区域中的宽度。
.search {
position: absolute;
left: 346px;
top:25px;
width: 538x;
height:36px;
border: 2px solid #b1191a;
}
.search input {
float: left;
width: 454px;
height: 32px;
padding-left: 10px;
}
.search button {
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
color: #fff;
}
同样用定位实现，每个热点词用a包含，设置a的样式即可
.hotwords {
position: absolute;
top: 66px;
left: 346px;
}
.hotwords a {
margin: 0 10px;
}定位加字体图标 ，消息通知样式使用圆角边框，左下角为0，其余三个角均为高度的一半。
注意，子元素会继承父元素的行高，记得层叠样式，使其垂直居中。
我的购物车
8
.hotwords {
position: absolute;
top: 66px;
left: 346px;
}
.hotwords a {
margin: 0 10px;
}
.shopcar {
position: absolute;
right: 60px;
top: 25px;
width: 140px;
height: 35px;
border:1px solid #dfdfdf;
background-color: #f7f7f7;
line-height: 35px;
text-align: center;
}
.count {
position: absolute;
top: -7px;
left: 110px;
/* 会继承父元素行高的值会导致文字不垂直居中 */
line-height: 14px;
height: 14px;
color: #fff;
background-color: #e60012;
padding: 0 5px;
border-radius: 7px 7px 7px 0;
} 
给main盒子设定高度就不用清除浮动
焦点图由多个图片轮播而成，也可以叫做轮播图，结构为ul+li+img组成，返回上一张图片与下方小圆点直接定位或者用字体图标均可，在这里我使用定位
在这里我就直接说一些其中我还是不太熟悉的知识点吧。
文字过长省略效果
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;精灵图一般放置在i标签中使用。
每张图片后加细线或者给前几张图片加细线
可使用伪元素加定位实现，若对象为前三张图片，::after前加nth-child（-n+3）,示例如下：
.recom_bd ul li:nth-child(-n+3):after {
content: "";
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 145px;
background-color: #ddd;
}注意floor不要给高度，高度由内容自动撑开
Tab分为选项卡和选项内容，即tab_list和tab_content
一般情况下，给a元素添加边框时，要将a元素变为块级元素才可。
结构大致如下：
行高也会撑大盒子，若想忽略掉行高产生的影响，例如想将两个盒子紧密相连，就设置溢出隐藏即可
品优购首页目前就已经做完了，以下为代码及效果图：
品优购商城-综合网购首选，正品低价、品质保障、配送及时、轻松购物
我的购物车
8
-
>
品优购快报
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
-
话费
/* 首页开始 */
.shortcut .fr ul li i {
font-size: 10px;
}
/* 首页结束 */
.main {
width: 980px;
height: 455px;
margin-left: 250px;
margin-top: 10px;
}
.focus {
float: left;
width: 721px;
height: 455px;
}
.newsflash {
float: right;
width: 250px;
height: 455px;
}
.main .focus ul li {
position: relative;
}
.main .focus .jiantou,
.main .focus .jiantou2 {
display: none;
position: absolute;
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 30px;
top: 50%;
margin-top: -25px;
color: #fff;
}
.main .focus .jiantou {
left: 25px;
}
.main .focus .jiantou2 {
right: 25px;
}
.main .focus li:hover .jiantou,
.main .focus li:hover .jiantou2,
.main .focus li:hover .dian{
display: block;
}
.dian {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
width: 50px;
height: 10px;
margin-left: -25px;
}
.dian .item {
float:left;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0,0,0,.3);
margin: 0 2px;
}
.news {
height: 165px;
border: 1px solid #e4e4e4;
}
.news-hd {
height: 33px;
border-bottom: 1px dotted #e4e4e4;
line-height: 33px;
padding: 0 15px;
}
.news-hd h5 {
float: left;
font-size: 14px;
font-weight: 400;
}
.news-hd .more {
float: right;
font-size: 12px;
}
.news-hd .more:hover {
color: red;
}
.news-bd {
padding: 5px 15px 0;
font-size: 12px;
}
.news-bd ul li {
height: 24px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lifeservice {
height: 209px;
border: 1px solid #e4e4e4;
border-top: 0;
border-bottom: 0;
font-size: 12px;
}
.lifeservice ul li {
float: left;
width: 62.1px;
height: 69.2px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.lifeservice ul li i {
display: inline-block;
width: 24px;
height: 28px;
margin-top: 12px;
background: url(../images/icons.png) no-repeat -19px -15px;
}
.bargain {
margin-top: 5px;
}
/* 推荐模块 */
.recom {
height: 163px;
margin-top: 12px;
}
.recom_hd {
float:left;
height: 163px;
width: 205px;
background-color: #5c5251;
text-align: center;
padding-top: 30px;
}
.recom_bd {
float: left;
}
.recom_bd ul li {
position: relative;
float: left;
}
.recom_bd ul li img {
width: 248px;
height: 163px;
}
.recom_bd ul li:nth-child(-n+3):after {
content: "";
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 145px;
background-color: #ddd;
}
/* 家用电器模块 */
.floor {
margin-top: 30px;
}
.box_hd {
height: 30px;
border-bottom: 2px solid #c81623;
}
.box_hd h3 {
float: left;
font-size: 18px;
color: #c81623;
font-weight: 400;
}
.tab_list {
float: right;
}
.tab_list ul li {
float: left;
line-height: 30px;
}
.tab_list ul li a {
margin: 0 15px;
}
.box_bd {
height: 361px;
}
.tab_list_item>div {
float: left;
}
.col_210 {
width: 210px;
background-color: #f9f9f9;
height: 361px;
font-size: 12px;
text-align: center;
}
.col_210 ul li {
float: left;
width: 85px;
height: 34px;
line-height: 33px;
text-align: center;
border-bottom: 1px solid #ccc;
margin-right: 10px;
}
.col_210 ul {
padding-left: 12px;
}
.col_329 {
width: 329px;
}
.col_221 {
width: 221px;
border-right: 1px solid #ccc;
}
.col_219 {
width: 219px;
}
.bb {
display: block;
border-bottom: 1px solid #ccc;
}
列表页面比较简单，这个就不详细介绍啦
列表页-综合网购首选，正品低价、品质保障、配送及时、轻松购物
我的购物车
8
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
-
Apple苹果iPhone 6s Plus（A1669）320金色 移动联通电信 4G手机
￥6088
￥6988
已售87%
剩余29件
.nav {
overflow: hidden;
}
.style_red {
color: #c81623;
}
.sk {
position: absolute;
left: 190px;
top: 40px;
padding:3px 0 0 20px;
border-left: 1px solid #c81523;
}
.sk_list {
float: left;
}
.sk_list ul li,
.sk_con ul li {
float: left;
}
.sk_list ul li a {
display: block;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.sk_con {
float: right;
}
.sk_con ul li a {
display: block;
line-height: 49px;
padding: 0 20px;
font-size: 14px;
}
.sk_container .sk_hd img {
width: 100%;
}
.sk_bd ul li {
float: left;
margin-right: 13px;
padding-top: 20px;
width: 290px;
height: 460px;
}
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
.sk_bd ul li:hover {
border: 1px solid #c81523;
}
.sk_bd ul li .img {
text-align: center;
margin: 20px auto;
}
.sk_bd ul li p {
margin-left: 10px;
line-height: 20px;
font-size: 14px;
}
.h,.q {
display: inline-block;
margin: 10px 5px;
}
.h {
font-weight: 700px;
font-size: 20px;
color: #c81523;
}
.q {
color: #ccc;
text-decoration: line-through;
font-size: 14px;
}
.p,.jin {
display: inline-block;
}
.p {
margin-left: 10px;
}
.jin {
width: 100px;
height: 10px;
border-radius: 5px;
border: 1px solid #c81523;
overflow: hidden;
}
.tiao {
width: 87px;
height: 20px;
background-color: #c81523;
}
button {
margin-top: 20px;
width: 100%;
height: 39px;
background-color: #c81523;
color: #fff;
font-size: 16px;
}注册页面为客户的私密信息，不需要专门使其靠前显示，故不需要进行SEO优化。注册页面也是常规操作，这里我就不赘述啦。
注册页面
header {
padding: 18px;
height: 84px;
border-bottom: 2px solid #c81523;
}
.registerarea {
height: 522px;
border: 1px solid #ccc;
margin-top: 20px;
}
.registerarea h3 {
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
}
.login {
float: right;
font-size: 14px;
}
.reg_form {
width: 600px;
margin: 50px auto;
}
.reg_form ul li {
margin-bottom: 20px;
}
.reg_form ul li label{
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li input[type="text"] {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error_icon {
margin: 0 10px;
color: #c81523;
font-size: 20px;
vertical-align: middle;
}
.sucess_icon {
margin: 0 10px;
font-size: 16px;
vertical-align: middle;
color: green;
}
.sucess {
color: green;
}
.safe {
padding-left: 160px;
}
.safe em {
padding: 0 12px;
color: #fff;
}
.ruo {
margin-left: 5px;
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-left: 95px;
}
.agree a {
color: #1ba1e6;
}
.btn {
width: 200px;
height: 34px;
background-color: #c81623;
font-size: 14px;
color: #fff;
margin: 30px 0 0 70px;
}记得引用通用样式喔
点击首页顶端免费注册就可直接跳转到注册页面，点击菜单中手机就可跳转到列表页面，这些都是通过a元素实现的简单交互效果。
