品优购项目--有所收获的部分
目前完成的部分
一:快捷导航部分
代码
:
html:
<!-- 快捷导航部分 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎你! </li>
<li><a href="#">请登录 </a><a href="#" class="style_red">免费注册</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的订单</li>
<li></li>
<li class="arrow-icon">我的品优购 </li>
<li></li>
<li>品优购会员 </li>
<li></li>
<li>企业采购</li>
<li></li>
<li class="arrow-icon">关注品优购</li>
<li></li>
<li class="arrow-icon">客户服务</li>
<li></li>
<li class="arrow-icon">网站导航</li>
</ul>
</div>
</div>
css:
/* 快捷导航 */
.shortcut {
font-size: 12px;
color: #666666;
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
/* 添加浮动 */
.fl {
float: left;
}
.fr {
float: right;
}
.shortcut ul li {
float: left;
}
/* 样式红色 */
.style_red {
color: #c81623;
}
/* 选择偶数的li */
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
margin: 9px 14px 0;
background-color: #666;
}
/* ::after双伪元素 给li后面设置小三角*/
.arrow-icon::after {
content: '\e91e';
font-family: 'icomoon';
margin-left: 6px;
}
对于这一模块,用的是无序列表,竖线也是用li制作,加上竖线一共是13个li,对于选择偶数li用的是CSS3新增的
结构伪类选择器
,
nth-child(n)
匹配父元素中的第n个子元素
n可以是数字,关键字和公式
n如果是数字,就是选择第n个子元素
n可以是关键字:even偶数
,odd奇数
n可以是公式
:2n-1(偶数), 2n+1(奇数), n+5(从第5个开始到最后)…
还有就是部分有下三角这个符号用的是
字体图标
给所需要的li加上arrow-icon的类名,然后用::after双伪元素
给li后面设置小三角
使用::after双伪元素一定要有content: ‘’;属性
对于使用字体图标也需要字体样式font-family
属性
二:header头部部分
头部部分的logo模块
html:
<!-- logo部分制作 -->
<div class="logo">
<!-- logo SEO优化 h1标签里面放a标签 a标签里面再引入logo -->
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>
这里并不是直接使用img标签引入图标
为了网站SEO优化
, 提高logo的优先级, 需要在h1标签中放a标签再引入logo ,a标签是为了当点击logo时候能够回到首页,因为这一块都属于公共样式
购物车部分
html:
<!-- 购物车部分 -->
<div class="shopcar">
我的购物车
<i class="count">8</i>
</div>
css:
/* 购物车部分 */
.shopcar {
position: absolute;
top: 26px;
right: 60px;
width: 141px;
height: 34px;
text-align: center;
line-height: 34px;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
}
.shopcar::before {
margin-right: 5px;
color: #c81623;
font-size: 13px;
content: '\e93a';
font-family: 'icomoon';
}
.shopcar::after {
margin-left: 5px;
content: '\e920';
font-size: 15px;
font-family: 'icomoon';
}
.count {
position:absolute;
line-height: 14px;
top: -5px;
left: 105px;
height: 14px;
color: #fff;
background-color: #e6002e;
padding: 0 5px;
border-radius: 7px 7px 7px 0;
}
首先是需要有一个类名为shopcar的盒子
在大盒子之中分三个部分,左边的图标,中间的文字和右边的小三角
这里对于左右的图标使用字体图标
,使用::before和::after双伪元素选择器较为适合
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而优化HTML结构
但需要注意以下几点
1.before和after创建一个元素,但是属于行内元素
2.before和after必须有content属性
3.before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
4.伪元素选择器和标签选择器一样,权重为1
对于右上角的小红点自然选择用定位
子盒子.count设置绝对定位,父盒子.shopcar设置相对定位
值得说的是对于小红点并不是圆型,需要设置boder-radius
属性不给左下角设置属性值,其余三个角设置宽度一半的属性值即可
三:首页Main主要内容模块
轮播图部分
html:
<div class="focus">
<ul>
<li class="promo">
<img src="upload/图层179.png" alt="">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
css:
/* 焦点图部分 */
.focus {
float: left;
width: 720px;
height: 455px;
}
/* 轮播图 */
.focus .promo {
/* 父盒子设置相对定位 */
position: relative;
}
/* 左边小箭头 */
.focus .prev::before {
/* 使用伪元素选择器 */
position: absolute;
/* 定位到父盒子中间的固定公式 */
top: 50%;
left: 0;
margin-top: -25px;
font-size: 30px;
width: 50px;
height: 50px;
content: '\e91f';
font-family: 'icomoon';
/* 设置透明 */
background: rgba(0,0,0,.3);
/* 让左侧三角的盒子有弧度 */
border-radius: 0 25px 25px 0;
}
/* 右边小箭头 */
.focus .next::after {
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
font-size: 30px;
width: 50px;
height: 50px;
background: rgba(0,0,0,.3);
border-radius: 25px 0 0 25px;
content: '\e920';
font-family: 'icomoon';
}
/* 下面选择点的父盒子 */
.promo ul {
position: absolute;
/* 定位到底部的中间 */
left: 50%;
margin-left: -155px;
bottom: 25px;
width: 310px;
height: 20px;
border-radius: 15px 15px 15px 15px;
/* 设置半透明 */
background: rgba(0,0,0,.3);
}
/* 小圆点 */
.promo ul li {
/* 设置浮动在一行之中 */
float: left;
width: 16px;
height: 16px;
border-radius: 8px 8px 8px 8px;
margin: 2px 10px;
background: rgba(255,255,255,.3);
}
/* 结构伪类选择器选择第一个元素 */
.promo ul li:first-child {
background-color: #c81623;
}
对于轮播图就比较经典了,之前有专门写过一篇博客
但这次相对上次代码就更加优化了,也使用到了很多新的选择器和新的属性
大部分解释都在代码的注释之中了
主要是使用了::before和::after伪元素选择器和结构伪类选择器
lifeservice模块
html:
<div class="lifeservice">
<ul>
<li>
<i></i>
<p>话费</p>
</li>
<li>
<i></i>
<p>机票</p>
</li>
<li>
<i></i>
<p>电影票</p>
</li>
<li>
<i></i>
<p>游戏</p>
</li>
<li>
<i></i>
<p>彩票</p>
</li>
<li>
<i></i>
<p>加油卡</p>
</li>
<li>
<i></i>
<p>酒店</p>
</li>
<li>
<i></i>
<p>火车票</p>
</li>
<li>
<i></i>
<p>众筹</p>
</li>
<li>
<i></i>
<p>理财</p>
</li>
<li>
<i></i>
<p>礼品卡</p>
</li>
<li>
<i></i>
<p>白条</p>
</li>
</ul>
</div>
css:
/* .lifeservice部分 */
.lifeservice {
height: 209px;
border: 1px solid #ccc;
border-top: 0;
/* 因为一行四个li会超出lifeservice部分 所以将超出的隐藏 */
overflow: hidden;
}
.lifeservice ul {
/* 因为想要一行装够4个 那么给父盒子ul足够四个li的宽度即可 */
width: 260px;
}
.lifeservice ul li {
float: left;
text-align: center;
width: 64px;
height: 71px;
/* 只需要给每个li右边和下边的boder就可以了 */
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.lifeservice ul li i {
display: inline-block;
margin-top: 13px;
width: 20px;
height: 25px;
background-color: #c81623;
background: url(../images/images/icons.png) no-repeat -18px -16px;
}
对于这一模块,三行四列较为整齐,自然就想到是用到
无序列表
去做,给li设置宽度和高度然后添加浮动
即可
但值得指出来的是边框,只需要给li右边框
和下边框
,就可以达到所需要的效果
还有就是如果所测量的li因为宽度不够而导致一行只能放三个的问题
,那是因为父盒子不够放在四个的宽度,又因为浮动导致自动放到下一行
那么就需要给父盒子ul设置足够放在四个li的宽度
,那么又回出现一个问题,每一行最后边就会有一小部分溢出
,但又不想要那一小部分显示出来,那就需要设置overflow: hidden;属性来隐藏溢出的部分
对于每一个li里面的图片,这里使用到了精灵图的方式来引入
那么为什么需要精灵图
?
一个网页之中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁的接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术
即将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
四:底部footer部分
mod_help模块
html:
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<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>
<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>
<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>
<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>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><img src="images/images/wx.jpg" alt=""></dd>
<dd>品优购</dd>
</dl>
</div>
css:
/* mod_help部分 */
.mod_help {
height: 188px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.mod_help dl {
float: left;
padding: 22px 0 0 80px;
width: 170px;
}
.mod_help dl dt {
font-weight: 700;
font-size: 16px;
margin-bottom: 5px;
}
.mod_help dl dd img {
width: 90px;
height: 90px;
}
.mod_help dl:last-child {
text-align: center;
}
这一模块就比较简单了,主要是复习dl dt dd标签
需要注意到下面的横线,就设置一个下边框即可
然后给dl添加浮动,给dl一个宽度,对于最右边也还是用到了结构物类选择器,给父盒子添加text-align:center;将图片和文字居中对齐
第一部分就完了,在做这个项目的中途复习了很多之前学过的标签,属性等等,这里只是放了我觉得我容易忘却或者值得注意的知识点