前期工作
SEO
Favicon图标
ironfont图标使用
图文对齐vertical-align
调整对其方式,默认基线
头部 header区域
logo
.logo>hi>a a里面包含logo网站名字
再css中设置背景图
隐藏网站名字
导航 nav
ul>li
搜索
购物车 cart
底部 footer
精灵图标
代码
html
<!-- 底部 -->
<div class="footer">
<div class="wrapper">
<!-- 服务 -->
<div class="service">
<ul>
<li><h5></h5><p>价格亲民</p></li>
<li><h5></h5><p>价格亲民</p></li>
<li><h5></h5><p>价格亲民</p></li>
<li><h5></h5><p>价格亲民</p></li>
</ul>
</div>
<!-- 帮助 -->
<div class="help">
<div class="left">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">购物流程</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic"><img src="./images/wechat.png" alt=""></div>
<p>微信公众号</p>
</li>
<li>
<div class="pic"><img src="./images/wechat.png" alt=""></div>
<p>微信公众号</p>
</li>
</ul>
</div>
</div>
<!-- 版权 -->
<div class="copyright">
<p>
<a href="#">关于我们</a>|
<a href="#">关于我们</a>|
<a href="#">关于我们</a>|
<a href="#">关于我们</a>|
<a href="#">关于我们</a>|
<a href="#">关于我们</a>|
<a href="#">关于我们</a>
</p>
<p>
<a href="#">@@@@</a>
</p>
</div>
</div>
</div>
css
/* 底部区域 */
.footer {
position: relative;
height: 581.5px;
background: #F5F5F5;
position: relative;
}
/* 服务 */
.service {
padding: 60px 0;
height: 178px;
border-bottom: 1px #E8E8E8 solid;
}
.service ul {
display: flex;
justify-content: space-evenly;
}
.service li {
display: flex;
}
.service h5 {
height: 58px;
width: 58px;
background-image: url(../images/sprite.png);
}
.service li:nth-child(2) h5 {
background-position: 0 -58px;
}
.service li:nth-child(3) h5 {
background-position: 0 -116px;
}
.service li:nth-child(4) h5 {
background-position: 0 -174px;
}
.service p {
margin-left: 20px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
line-height: 58px;
}
/* 帮助 */
.help {
margin-top: 60px;
display: flex;
justify-content: space-between;
}
.help .left {
display: flex;
}
.help .left dl {
margin-right: 84px;
}
.help .left dt {
margin-bottom: 30px;
font-family: PingFangSC-Regular;
font-size: 18px;
color: #333333;
letter-spacing: 0;
font-weight: 400;
}
.help .left dd {
margin-top: 10.5px;
}
.help .left dd a{
font-family: PingFangSC-Regular;
font-size: 16px;
color: #969696;
letter-spacing: 0;
line-height: 22px;
font-weight: 400;
}
.help .right ul {
display: flex;
}
.help .right li:first-child {
margin-right: 55px;
}
.help .right .pic {
width: 120px;
height: 120px;
margin-bottom: 10px;
}
.help .right p {
text-align: center;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #969696;
letter-spacing: 0;
font-weight: 400;
}
/* 版权 */
.copyright {
position: absolute;
text-align: center;
bottom: 40px;
left: 50%;
transform: translate(-50%);
font-family: PingFangSC-Regular;
font-size: 16px;
color: #A1A1A1;
letter-spacing: 0;
text-align: center;
line-height: 30px;
font-weight: 400;
}
.copyright p {
margin-bottom: 10px;
}
.copyright a {
margin: 0 10px;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #A1A1A1;
letter-spacing: 0;
text-align: center;
line-height: 30px;
font-weight: 400;
}
banner
首页内容
生鲜好物
公共样式
对起具体的类名
/* 公共样式 */
/* 新鲜好物 */
.tittle {
margin-top: 40px;
display: flex;
justify-content: space-between;
}
.tittle .left {
display: flex;
}
......
.bd p {
text-align: center;
font-family: PingFangSC-Regular;
font-size: 22px;
color: #AA2113;
letter-spacing: 1.1px;
line-height: 31px;
font-weight: 400;
}
总结
活用标签 h5 i ul ol li
css 布局位置等信息放在最顶端后期便于修改