精品推荐
我的购物车
0
## 2.项目实施
### 2.1 首页
#### 2.1.1 首页结构分析
##### 2.1.1.1 头部（header）
##### 2.1.1.2 主体部分（main）
##### 2.1.1.3 尾部（footer）
#### 2.1.2 引入reset.css样式重置文件
参考网址：https://www.cnblogs.com/dhy-javascript/p/6186082.html
不同的浏览器的初始样式可能不一样，为了统一样式，需要引入reset.css文件，同时在reset.css文件中还可以添加公共样式。该文件必须在所有.html文件引入，且必须放在所有引入的CSS文件的最前面。
```css
body,button,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,td,textarea,th,ul,img {
margin: 0; /* 外边距 */
padding: 0;/* 内边距 */
}
body,button,input,select,textarea {
font: 14px/1.5 微软雅黑; /* 字号为14px，行距1.5倍，字体为微软雅黑 */
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%; /* 原始输出标题标签的默认字号 */
}
ol,ul {
list-style: none; /* 去掉ol前的编号和ul前的点 */
}
a {
color: #333;
text-decoration: none; /* 去掉a标签的下划线 */
}
img {
border: 0; /* 兼容处理，在IE低版本中，图像会出现边框，0表示取消边框 */
}
button,input,select,textarea {
font-size: 100%;
outline: none; /* 取消表单组件的边框 */
}
table {/* 设置表格为单线边框 */
border-collapse: collapse;
border-spacing: 0;
}
```
引入：
```html
```
#### 2.1.3 首页头部设置
index.html
```html
**HTML布局（index.html）：**
```html
```
##### 2.1.5.4 【首页头部】快捷菜单栏样式
**通用样式（common.css）：**
```css
.center{
width: 1200px; /* 版心 */
margin: 0 auto; /* 盒子（一个标签就是一个盒子）水平居中 */
}
/* 左浮动 */
.fl{
float: left;
}
/* 右浮动 */
.fr{
float: right;
}
:root{ /* 设置属性值变量 */
--bgc: #f1f1f1;
--cl: #b1191a;
}
```
**CSS样式（index.css）：**
```css
/* 快捷菜单栏 */
.shortcut{
width: 100%;
height: 33px;
background-color: #f1f1f1;
line-height: 33px; /* 垂直居中 */
font-size: 14px;
}
.welcome a{
color: var(--cl); /* 使用属性变量 */
}
.welcome a:hover{
color: #333;
}
.shortcut-right ul li{
float: left; /* 让li标签的内容排在一行上 */
}
.shortcut-right a:hover{
color: #666;
}
.shortcut-right span{
margin: 0 10px 0 5px;/* 设置外边距。margin:10px;表示上下左右都为10px；margin:10px 20px;表示上下为10px，左右为20px；margin:10px 20px 30px;表示上为10px，左右为20px，下为30px；margin:10px 20px 30px 40px;表示上为10px，右为20px，下为30px，左为40px。*/
}
```
##### 2.1.5.5 【首页头部】Logo区布局
**实现效果：**
**HTML布局（index.html）：**
```html
3）搜索图标，并加入到购物车；
4）将购物车中的图标添加到项目；
5）下载图标文件到本地；
6）将字体文件和iconfont.css文件复制到项目对应目录中；
7）引入样式文件；
```html
```
８）使用图标；
```html
```
9）效果展示。
**CSS样式（index.css）：**
```css
/* Logo区 */
.logo-area{
overflow: hidden; /* 清除浮动 */
}
.logo-area h1{
margin: 25px 176px 25px 0;
}
.logo-area h1:after{
content: '品优购';
display: none;
text-indent: -9999;
overflow: hidden;
}
.search input{
width: 455px;
height: 35px;
border: 2px solid var(--cl);
margin-top: 30px;
padding-left: 10px;
box-sizing: border-box; /* 盒子的宽高为文本设定的宽高 */
}
.search input::placeholder{
font-size: 13px;
}
.search button{
width: 84px;
height: 35px;
background-color: var(--cl);
color: #fff;
border: 0;
margin-left: -4px;
}
.cart{
width: 140px;
height: 35px;
margin: 30px 66px 0 0;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
line-height: 35px; /* 垂直居中 */
text-align: center; /* 水平居中 */
position: relative; /* 相对定位 */
}
.cart i:first-child{
color: #da5555;
margin-right: 5px;
}
.cart span{
width: 14px;
height: 14px;
display: block;
margin-left: 5px;
background-color: #e60012;
color: #fff;
border-radius: 7px 7px 7px 0;
line-height: 14px;
position: absolute; /* 绝对定位 */
top: -6px;
right: 22px;
}
```
##### 2.1.5.6 【首页头部】导航栏
**实现效果：**
**HTML布局（index.html）：**
```html
##### 2.1.6.2 【首页主体】HTML布局
```html
##### 2.1.7.2 【首页尾部】HTML布局
```html
```
##### 2.1.7.3 【首页尾部】CSS样式
```css
/* footer */
footer{
width: 100%;
background-color: #f5f5f5;
font-size: 14px;
margin-top: 20px;
}
.service, .help{
display: flex;
justify-content: space-around;
border-bottom: 1px solid #ccc;
}
.service{
padding: 30px 0;
}
/*
精灵图：Sprite（雪碧图），把一些小图标文件放在一个文件中（该文件的格式只能是.png（背景透明）），目的是为了减少向服务器发请求的次数，从而提升网站性能。
精灵图操作步骤：
1）绘制精灵图（借助PS），保存为.png文件；
2）用background加载精灵图（不能用
##### 2.1.8.2 【首页侧边栏】HTML布局
```html
```
##### 2.1.8.3 【首页侧边栏】CSS样式
```css
/* 侧边栏 */
aside{
width: 70px;
position: fixed;/* 固定定位，参照文档进行定位 */
left: 0;
top: 50%;
margin-top: -122px;
text-align: center;
background-color: #fff;
display: none; /* 初始处于隐藏状态 */
}
aside ul{
font-size: 12px;
}
aside li, aside .to-top{
line-height: 35px;
}
aside li{
border-bottom: 1px solid #ccc;
}
aside a{
display: block; /* a为行级标签，自身不识别宽高，必须将其转换为块级标签后，让其识别宽高 */
width: 100%;
}
.active{
background-color: var(--classic-bg);
}
.active a{
color: #fff;
}
.to-top:hover a{
color: #999;
}
```
##### 2.1.8.4 【首页侧边栏】实现侧边栏滚动和定位效果
**引入jQuery.js：**
```html
```
**逻辑处理：**
```js
// 侧边栏
changeStyle();
$(window).scroll(function(){ // 当窗口滚动条滚动时触发scroll事件
changeStyle();
})
// 抽离公共代码，形成函数，方便多次调用
function changeStyle(){
// 获取滚动条的位置
let pos = Math.floor($(this).scrollTop()); // $(this)表示当前对象window，scrollTop()获取当前滚动条离顶端的距离，Math.floor()向下取整，let用于定义变量
// console.log(pos);
// 如果滚动条在500+及以上，则显示侧边栏，否则则隐藏
if(pos >= 500){
$('aside').css('display','block');
} else {
$('aside').css('display','none');
}
// 根据滚动条位置设置侧边栏样式
if(pos >= 500 && pos < 1070){ // 如果滚动条在[500,1070)区间，则调用函数changePos()
changePos(0);
} else if(pos >= 1070 && pos < 1250){ // 否则，如果滚动条在[1070,1250)区间
changePos(1);
} else if(pos >= 1250 && pos < 1500){
changePos(2);
} else if(pos >= 1500 && pos < 1750){
changePos(3);
} else if(pos >= 1750 && pos < 1875){
changePos(4);
} else if(pos >= 1875){
changePos(5);
}
}
// 函数封装
function changePos(idx){
$('aside li').removeClass('active'); // 移出aside下所有li标签中的active类
$('aside li').eq(idx).addClass('active'); // 为aside下指定的li标签添加active类
}
// 回到顶端
$('.to-top').click(function(){ // 当单击class为to-top的标签时，将执行回调函数
// $(window).scrollTop(0); // 设置滚动条移动到窗口顶端
$(window.opera ? 'html' : 'html, body').animate({ // 为所有浏览器添加动画
scrollTop: 0 // 滚动条滚动到顶部
}, 1000) // 滚动条滚动的时间，默认单位为ms
})
// 单击li标签，滚动到指定位置
$('aside li').eq(0).click(function(){
scrollLi(700);
})
$('aside li').eq(1).click(function(){
scrollLi(1100);
})
$('aside li').eq(2).click(function(){
scrollLi(1400);
})
$('aside li').eq(3).click(function(){
scrollLi(1600);
})
$('aside li').eq(4).click(function(){
scrollLi(1700);
})
$('aside li').eq(5).click(function(){
scrollLi(1800);
})
function scrollLi(pos){
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: pos
}, 1000)
}
```
