项目目录搭建
项目文件夹 ：最大的文件夹，所有的项目文件都存放在这个文件夹里面 例如：pinyougou
css文件夹 ：专门用来存放css文件的文件夹
images文件夹：专门用来存放不怎么更新的图片的文件夹
upload文件夹：专门用来存放时常更新的产品图的文件夹
fonts文件夹 ：专门用来存放字体相关的文件夹
css文件分类：
normalize.css 初始化css文件 将各大浏览器之间的样式全部统一 (不使用)
reset.css 初始化css,将不同全部干掉
common.css 公共样式文件
index.css 当前写的页面的css文件
ico图标的使用
1、需要设计师提供图片
2、登录对应的网站（http://www.bitbug.net/） 将图标上传上去即可得到ico图标
3、使用代码 <link rel="shortcut icon" href="favicon.ico" /> （注意路径：建议将ico图标放到根目录下面）
网页SEO三大标签
- 网页的title标签
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
长度：谷歌：35个中文 百度：28个中文
首页建议：网站名（产品名）- 网站的介绍
例如：品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
- Description标签
针对网站的描述，是标题的一个补充，可以较为详细，一般不超过120个字，作用相对次之
<meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
- Keywords关键字
搜索引擎的关注点之一，应该限制在6-8个关键字之间
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
头部区域
<header class="pyg-header">
<div class="ph-t"></div>
<div class="ph-m w"></div>
<div class="ph-b w"></div>
<div class="border-line"></div>
</header>
设置了一些常用的公共类
这些公共类放在common.css之中
/* 这里面主要是放一些公共的css文件 */
/* 公共版心设置 */
.w {
width: 1200px;
margin: 0 auto;
}
/* 设置左浮动 */
.fl {
float: left;
}
/* 设置右浮动 */
.fr {
float: right;
}
/* 设置当前网页的字体大小 */
body {
font: 12px/1.5 'microsoft yahei';
}
/* 清除浮动的公共类 */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
*zoom:1;
}
/* 主颜色公共类 */
.main-color {
color: #c81623 !important;
}
/* 边距公共类 */
.ml-10 {
margin-left: 10px !important;
}
.ml-5 {
margin-left: 5px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.mr-5 {
margin-right: 5px !important;
}
使用字体图标
- 登录 www.iconfont.cn 网站 找到对应的图标 (直接使用的老师的即可)
- 打开下载下来的文件里面的demo-index.html (使用的步骤)
- 使用font-class模式
- 引用iconfont.css文件 (注意路径)
- 找到对应的类名即可
- 由于下载下来的字体图标不标准 会导致字体图标和文字不对齐 所以在iconfont.css里面的iconfont类里面添加vertical-align: middle
- 如果个别文字依旧不对齐 就是用position:relative进行微调
头部中间区域
<div class="ph-m w">
<div class="logo"></div>
<div class="search"></div>
<div class="cart"></div>
<div class="hot-key"></div>
</div>
logo的优化
网站中logo是最重要的一个东西,所以需要利用h1包裹起来 但是logo是一张图片 搜索引擎是不识别图片的 所以需要在 h1里面添加文本
<h1 class="logo"><a href="#">品优购</a></h1>
文本是不需要给用户看到 只需要给搜索引擎去识别 所以需要隐藏掉: text-indent: -9999px; font-size: 0;
侧边栏
将侧边栏作为了全部商品容器的一个子盒子 基于全部商品容器定位 为了后期鼠标悬停在全部商品容器的时候显示该侧边栏
正品保证
精灵图在使用的 时候 不要将这个作为大盒子的背景图 因为这样会将其他的精灵图漏出来
处理方法: 将一个与需要显示的区域等大的盒子包裹图片,在这里可以直接定位
盒子的宽度为20%
底部导航
构建六个dl 每一个dl的宽度是版心的1/6 (100/6) 并且浮动
给dl的父级清除浮动
单独设置dt和dd高度 (量取行高的方式)
将最后一个dl的dd放一张图片 调整水平位置
底下所有的文字使用a包谷 竖线直接使用输入法敲出来 给竖线的标签添加对应的边距
在给父级元素添加text-align:center
侧边导航
需要基于 全部商品分类 定位 原因是鼠标hover到全部商品上的时候 显示侧边导航
给ul设置宽, 高 并且绝对定位 给父元素添加相对定位 在设置位置
给li设置text-align: left line-height 和高度 (原因是继承了父元素的行高和text-align)
给ul设置一个左边框 颜色和默认的背景颜色一致 (不用操心li hover的时候左边框的问题)
给右边的小箭头设置绝对定位 li设置相对定位 并且设置位置
ul默认是隐藏的 并且hover 全部商品分类的时候显示ul
轮播图区域小圆点
使用的是行内块 可以实现不论多少个小圆点都可以实现水平居中的效果 容错率更高 (是让li在通栏的ul里面居中)
定位居中: 让ul定位 水平居中 让li在ul里面水平显示
快报区域
上中下三个盒子,先把三个盒子的大小实体化出来 距离调好
上盒子在细分成上下两个盒子
里面的新闻列表添加超出部分显示...省略号
中间的盒子使用表格(三行四列)完成
边框使用一个盒子代替
这个盒子使用定位 定在对应位置上面 宽高根据情况使用百分比 (有兴趣的同学可以改写成伪元素)