品优购项目总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
在完成品优购这个项目中，使用了很多的小技巧，现在就进入这个项目中感受一下下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目简介

品优购网上商城是一个综合性的 B2B2C 平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。
一个网页的主要展示了头部，导航栏、主体、和底部等内容。所以一个网页想要清晰、美观，一个良好的布局至关重要。在本次项目中要使用大量的无序列表使布局更有条理。

二、主要效果

1.导航栏

导航栏主要分为横向导航和竖向导航，但基本都是由无序列表完成。在本项目中也大量使用了这一效果。
效果展示：

在此效果中就包含了导航的多种形式。

 <nav>
        <div class="w">
            <ul>
                <li>全部商品分类
                    <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>
                        <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>
                <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>
    </nav>
    /* 导航栏部分的CSS */

nav {
    height: 46px;
    line-height: 46px;
    border-bottom: 2px solid #c81623;
}


/* 利用双伪元素清除浮动 */

nav .w ul::after,
nav .w ul::before {
    display: block;
    content: '';
}

nav .w ul::after {
    clear: both;
}

nav .w ul li {
    position: relative;
    top: -2px;
    float: left;
    text-align: center;
    padding: 0 27px;
}

nav .w ul li a {
    color: #666666;
}

nav .w ul li:first-child {
    padding: 0 57px;
    color: #fff;
    font-weight: 500;
    background-color: #b1191a;
}

nav .w .goodslist_nav li:nth-child(-n+3) {
    padding: 0 30px;
}

nav .w .goodslist_nav li:nth-child(-n+3) a {
    font-size: 14px;
    font-weight: 700;
    color: black;
}

nav .w .goodslist_nav li:first-child {
    background-color: #fff;
    border-bottom: 2px solid #c81623;
}

nav .w .goodslist_nav li:nth-child(n+4) a {
    font-size: 12px;
}

nav .w .goodslist_nav li:last-child {
    position: relative;
}

nav .w .goodslist_nav li:last-child::after {
    position: absolute;
    top: 1px;
    right: 9px;
    font-family: 'icomoon';
    content: '\e907';
    color: #666666;
}

nav .w ul li:first-child ul li:hover {
    border-left: 2px solid #c81623;
    background-color: #fff;
}

nav .w ul>li:nth-of-type(n+2):hover a {
    color: #c81623;
}

nav .w ul li:last-child {
    font-size: 14px;
}

nav .w ul li ul {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    background-color: #c81623;
}


/* 因为权重 */

nav .w ul li ul li:first-child {
    background-color: #c81623;
    padding: 0 25px;
}

nav .w ul li ul li:first-child:hover a {
    color: #c81623;
}

nav .w ul li ul li {
    position: relative;
    width: 100%;
    height: 31px;
    text-align: left;
    line-height: 31px;
}


/* 添加图标 */

nav .w ul li ul li:nth-of-type(n)::after {
    position: absolute;
    right: 10px;
    top: 0;
    font-family: 'icomoon';
    font-size: 20px;
    content: '\e909';
}

nav .w ul li ul li a {
    font-size: 12px;
    color: #fff;
}

2.精灵图和字体图标

同样是上述案例可以在看出无序列表只是让进行布局，要进行样式的修改还需要其他元素，我们可以在导航栏中添加一下小图标让文字更加美感。

2.1 字体图标的使用步骤

1. 去相关网页寻找相应的字体图标进行下载。例如https://icomoon.io
2. 把下载的文件中的fonts文件放进项目根目录中
3. 在CSS中进行声明
4. 把文字样式设为字体图标，选择该图标的表示，进行展示。
   注意：字体图标需要修改层叠行进行展示

nav .w ul li ul li:nth-of-type(n)::after {
    position: absolute;
    right: 10px;
    top: 0;
    font-family: 'icomoon';
    font-size: 20px;
    content: '\e909';
}

2.2 精灵图的使用步骤

1. 添加背景图片
2. 使用background-position 进行位置的移动
   

position: absolute;
    top: 10px;
    left: 18px;
    content: '';
    width: 23px;
    height: 24px;
    background: url(../images/icons.png) no-repeat -17px -16px;

效果：

---

总结

提示：这里对文章进行总结：
以上就是今天要对品优购项目的总结。