项目介绍
品优购网上商城是一个综合性的 B2B2C 平台,类似京东商城、天猫商城。网站采用商家入驻的模式,商家入驻平台提交申请,有平台进行资质审核,审核通过后,商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。
通过本阶段的学习我们需要实现品优购网上商城网站前台的部分页面。包括品优购网站首页、品优购商品列表页,商品详情页、品优购用户注册页。
精灵图的使用
精灵图主要就只有三句:宽/高、 背景图,坐标。
background-image: url(“图片地址”);
background-position: x坐标 y坐标;。
例:
代码如下:
<div class="lifeservice">
<ul>
<li>
<i class="nth1"></i>
<p>话费</p>
</li>
<li>
<i class="nth2"></i>
<p>机票</p>
</li>
<li>
<i class="nth3"></i>
<p>电影票</p>
</li>
<li>
<i class="nth4"></i>
<p>游戏</p>
</li>
<li>
<i class="nth5"></i>
<p>彩票</p>
</li>
<li>
<i class="nth7"></i>
<p>加油卡</p>
</li>
<li>
<i class="nth8"></i>
<p>酒店</p>
</li>
<li>
<i class="nth9"></i>
<p>火车票</p>
</li>
<li>
<i class="nth10"></i>
<p>众筹</p>
</li>
<li>
<i class="nth11"></i>
<p>理财</p>
</li>
<li>
<i class=