一个简单的品优购项目----html+css

品优购的简单介绍

本次的项目我们要结合html和css来实现品优购网上商城网站前台的部分页面。包括品优购网站首页、品优购商品列表页，商品详情页、品优购用户注册页和登录页，详情如下

一、在本次项目使用到的相关小点

1、精灵图

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

主要借助与背景位置实现--background-position，一般情况精灵图都是负值，x轴往右是正，左边是负值，右轴同理

使用方法：把要使用的一张大的背景图放在一个新建项目里面的一个图片文件夹里，然后用background-position来调用，或者使用background：url（）写它所在的位置

  background: url(images/icons.png) no-repeat -19px -15px;

2、字体图标

好处：轻量级：一个图标字体比一系列的图像小，一旦加载了，图标会马上渲染出来，减少了服务器请求

本质是文字，可以随意改变颜色、产生阴影、透明效果、旋转等,几乎支持所有的浏览器

使用方法：1）下载字体图标网站：https://icomoon.io || http://www.iconfont.cn/

2）下载完成后要把 fonts文件夹放在根目录中

3） 把下载包里面的fonts文件夹放在页面根目录下，再点开    style.css，把里面的字体文件通过css引入到页面中-在css样式中全局声明字体；再在解压的htnl标签内添加小图标在页面的html的标签里，然后在样式里添加font-family：‘icomoon’在字体图标库里引入icomoon

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?tomleg');
    src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

给想要图标的选择器加
font-family: 'icomoon';
        content: '';

二 、效果展示

1、品优购首页index.html

 

 首页用到的知识点，包括：定位、字体图标的引用、浮动float、精灵图的使用 、结构伪类选择器nth-child（n）、nth-of-type(n)

伪、伪元素选择器 :before{ }、::after{ }

分享一个右侧栏使用精灵图的效果

html部分：                                      

  <div class="news2">
                    <ul>
                        <li>
                            <i class="i1"></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i class="i2"></i>
                            <p>飞行</p>
                        </li>
                        <li>
                            <i class="i3"></i>
                            <p>影视</p>
                        </li>
                        <li>
                            <i class="i4"></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i class="i5"></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i class="i6"></i>
                            <p>加油</p>
                        </li>
                        <li>
                            <i class="i7"></i>
                            <p>租房</p>
                        </li>
                        <li>
                            <i class="i8"></i>
                            <p>公交车</p>