《品优购电商项目》
文章目录
- 一、《品优购电商项目》
- 二、项目具体分析
-
- 1.精灵图的使用
- A、概念作用
- B、具体使用
- 2.导航模块的制作
- A、用到的知识点
- B、具体使用
- 总结
一、《品优购电商项目》
品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。通过本阶段的学习我们需要实现品优购网上商城网站前台的部分页面。包括品优购网站首页、品优购商品列表页，商品详情页、品优购用户注册页。
二、项目具体分析
1.精灵图的使用
A、概念作用
一、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。
二、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
三、那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。
B、具体使用
如何从下面这张大图片中取出我们需要的小图片。这就是精灵图的具体使用。
实现的效果图：
实现的效果图的代码块：
HTML结构
<div class="ulist">
<ul>
<li>
<a href="#">
<div class="l1"></div>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<div class="l2"></div>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<div class="l3"></div>
<p>电影票</p>
</a>
</li>
<li>
<a href="#">
<div class="l4"></div>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<div class="l5"></div>
<p>彩票</p>
</a>
</li>
<li>
<a href="#">
<div class="l6"></div>
<p>加油卡</p>
</a>
</li>
<li>
<a href="#">
<div class="l7"></div>
<p>酒店</p>
</a>
</li>
<li>
<a href="#">
<div class="l8"></div>
<p>火车票</p>
</a>
</li>
<li>
<a href="#">
<div class="l9"></div>
<p>众筹</p>
</a>
</li>
<li>
<a href="#">
<div class="l10"></div>
<p>理财</p>
</a>
</li>
<li>
<a href="#">
<div class="l11"></div>
<p>礼品卡</p>
</a>
</li>
<li>
<a href="#">
<div class="l12"></div>
<p>白条</p>
</a>
</li>
</ul>
</div>
css修饰：
.ulist ul li {
float: left;
width: 49px;
height: 50px;
border: 1px solid rgb(204, 201, 201);
text-align: center;
}
.ulist ul li a div {
width: 30px;
height: 30px;
margin-left: 13px;
}
/*精灵图的使用*/
.ulist ul li a .l1 {
background: url(images/icons.png) no-repeat -17px -17px;
}
.ulist ul li a .l2 {
background: url(images/icons.png) no-repeat -80px -17px;
}
.ulist ul li a .l3 {
background: url(images/icons.png) no-repeat -140px -17px;
}
.ulist ul li a .l4 {
background: url(images/icons.png) no-repeat -204px -17px;
}
.ulist ul li a .l5 {
background: url(images/icons.png) no-repeat -14px -84px;
}
.ulist ul li a .l6 {
background: url(images/icons.png) no-repeat -77px -84px;
}
.ulist ul li a .l7 {
background: url(images/icons.png) no-repeat -142px -84px;
}
.ulist ul li a .l8 {
background: url(images/icons.png) no-repeat -206px -84px;
}
.ulist ul li a .l9 {
background: url(images/icons.png) no-repeat -14px -154px;
}
.ulist ul li a .l10 {
background: url(images/icons.png) no-repeat -77px -154px;
}
.ulist ul li a .l11 {
background: url(images/icons.png) no-repeat -139px -154px;
}
.ulist ul li a .l12 {
background: url(images/icons.png) no-repeat -206px -154px;
}
注意：
1.设置好需要显示图片的长宽大小，需要的图片可能显示残缺或者不能显示。
2.注意 background -position:x y；这个属性里面的x，y的取值正负。如果错误取值，需要的图片也不能显示。
2.导航模块的制作
A、用到的知识点
1.标题标签—
2.无序列表—
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
/*去掉无序列表前面的图标*/
ul li{
list-style: none;
}
/*去掉a标签的下划线。*/
a{
text-decoration: none;
}
4.CSS伪元素
::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。
ul li a::after {
/*contet属性不能少*/
content: "";
}
5.CSS :hover 选择器
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
注意：（有顺序）
:link 选择器设置指向未被访问页面的链接的样式，
:visited 选择器用于设置指向已被访问的页面的链接，
:hover 选择器用于选择鼠标指针浮动在上面的元素。
:active 选择器用于活动链接。
B、具体使用
实现的效果图：
实现的效果的代码块：
html结构：
<div class="commodity-l">
<h4>全部商品分类</h4>
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="detail.html">手机、数码、通信</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>
<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>
</div>
css修饰：
.commodity-l h4 {
font-size: 18px;
color: #fff;
height: 37px;
line-height: 37px;
background-color: #b5191b;
text-align: center;
}
.commodity-l ul li {
font-size: 14px;
height: 26px;
line-height: 26px;
padding-left: 10px;
background-color: #c81622;
}
.commodity-l ul li a::after {
content: ">";
float: right;
margin-right: 5px;
}
.commodity-l ul li a {
color: #fff;
}
.commodity-l ul li:hover {
background-color: #f7f7f7;
}
.commodity-l ul li:hover a {
color: red;
}
.commodity-t ul li {
float: left;
width: 72px;
font-size: 18px;
margin-left: 20px;
line-height: 37px;
text-align: center;
}
.commodity-t ul li a {
color: #838383;
}
.commodity-t ul li:hover a {
color: red;
}