一、项目目录
项目名-客户端
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.标题一左一右公用