一、项目目录
项目名-客户端
xtx-pc
1.images：存放固定使用的图片，例如：logo、样式修饰图
2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片
3.iconfont:字体图标素材
4.css文件：
4.1base.css：基础的公共样式
4.2common.css：各个网页相同模块的重复样式，例如头部、底部
4.3index.css：首页css样式
5.index.html：首页html文件
二、 SEO搜索引擎优化
2.1提升SEO的三大方法
1.竞价排名
2.将网页制作成html标签
3.标签语义化（在合适的地方使用合适的标签）
2.2网页头部SEO标签
title：网页标题标签
description：网页描述
keywords：网页关键词
三、Favicon图标
网页图标，出现在浏览器标题栏，增加网页辨识度
favicon.ico：一般存放在网站的根目录
使用link自动生成
四、版心
公共样式存放到common.css文件
哪个元素需要就调用
设置上下边距为0，后续有需要再修改
/* 版心 */.wrapper{margin: 0 auto;width: 1240px;}五、快捷导航
5.1标签结构
通栏>版心>ul
5.2布局
flex-end 调整主轴对齐方式，右对齐
5.3常规样式
1.a靠内容撑开
2.右边块线，最后一个a不需要边块线（给a加的原因，a是行内元素靠内容撑开，边框线和文字一样高）
3.图标使用span标签引入，在文字前面
4.图标和文字取消基线对齐
.shortcut li .iconfont{margin-right: 4px;vertical-align: middle;
}5.4单独的样式
设置单独的类，对该样式单独设置
六、头部
6.1布局
.headder>logo>导航（nav）>搜索（search）>购物车（cart）
.header需要flex使内容在同一行
6.2logo
为了提升搜索排名，使用h1嵌套a的做法设置logo，把logo设置为a的背景图，a转为块级元素宽高和logo区域一样大
<div class="logo"><h1><a href="">小兔鲜</a></h1></div>
6.3导航
1.设置上边距和右边距拉开距离
2.ul>li>a结构
3.设置a的悬停转状态
6.4搜索
1.上右调整间距，上边的间距要减去整个头部区域的上间距
2.span放图标，input放入搜一搜文字
3.input有默认宽度优先生效，可能会超出父级范围
解决
1.重置宽度
2.width为0
4.设置搜一搜的文字需要选中input::placeholder属性
6.5购物车
1.先填内容，在调整位置
2.span放图标，i放数字
3.数字定位使用左对齐，如果文字多了向右撑开，可能盖住其他内容
七、底部
7.1布局
通栏>版心>服务>帮助中心>版权
7.2服务
1.嵌套h5和p,放图标和文字，使用css精灵做图标
2.调整上下间距，左右使用主轴对齐方式
3.文字使用行高使它垂直居中
4.选择不同的li设置背景图位置
.service li:nth-child(4) h5{
background-position: 0 -174px;
}
7.3帮助中心
1.左右flex布局，左文字，右图片
2.左边的文字使用dl>dt+dd>a的结构
3.给文字放间距，最后一个dl不需要放，在调整主轴对齐方式自动拉开
4.右边
7.4版权
布局：
1.两行文字，第一行为超链接，第二行是文字
2.底部不需要考虑搜索引擎优化，不需要做ul嵌套li
1.文字居中对齐，修改颜色，a要选中才能修改
2.p>a*7 后面之间加|线
八、banner区域
8.1布局
标签结构：通栏>版心>轮播图（ul.pic）>侧导航(subnav>ul)>圆点指示器
8.2图
使用ul嵌套li嵌套a的结构
父级宽度不够，子级被挤小，不想被挤小就放大父级宽度再隐藏图片
8.4侧导航
1.ul>li>div>a+span （每一格为li，设置高度）
2.带头的字体较大单独设置类控制
3.箭头使用图标，flex布局调整主轴对齐方式
4.添加鼠标悬停状态
8.5小圆点
ol嵌套li
选中时圆点一大一小，书写时默认都是一大一小，选中状态单独设置
设置间距时，要减掉隐藏的大圆点距离
九、新鲜好物区域
9.1布局
1.标题+内容
2.标题一左一右公用