前端学习之品优购项目（一）

桦桦子

已于 2022-11-17 15:57:56 修改

阅读量2.7k

点赞数 3

分类专栏：前端学习文章标签： css css3 html html5

于 2020-10-09 15:53:53 首次发布

本文链接：https://blog.csdn.net/Cai_Smallwhite/article/details/108962095

版权

前端学习专栏收录该内容

6 篇文章 2 订阅

订阅专栏

第一次写博客，有很多瑕疵，还有就是我太懒了步骤不咋详细，见谅见谅😘
首先介绍一下这个项目，这个项目是跟着小破站黑马程序员pink老师做的，感觉他的教学视频不错，链接奉上 H5C3+移动布局
这篇主要是给自己学习记录用的，大家也想做一个的话可以去小破站学一下，跟着老师做比较快。

一、前期准备

1、项目搭建
创建如下几个目录：
shopping根目录，css目录存放样式文件，fonts目录存放我们需要的字体图标，字体图标通常是从爱可梦下载，images存放插入在网页的图片，js存放行为代码，upload存放一些需要时常更新的图片
2、样式的模块化开发
在css目录中新建样式文件base.css和common.css。base.css用于css初始化，common.css用于对每个页面的公共样式进行编辑（如网页的头部和尾部）。这样做可以节省书写代码的时间。
3、favicon图标制作
就是这样的一个图标👇 在这里插入图片描述
首先我们的美工小姐姐会把这个图标做成.png格式的图片，我们只需要把它转化成.ico格式的文件，就可以引入到我们的html文件中。
那么问题来了，怎么转换格式，这里安利给大家一个不错的工具比特虫从这个网站导入.png文件就可以生成我们需要的.ico图标啦！
下载.ico图标放到网站根目录shopping。
4、在根目录新建html文件index.html，作为我们网站的首页。
在标签中插入下面的代码：
引入favicon图标：
<link rel="shortcut icon" href="pig.ico" />
链接样式文件

<link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">

TDK三大标签：

	<title>麦宠-买到专属于你的爱宠</title>
    <meta name="description" content="麦宠-专业的网上宠物商城,便捷、诚信的服务,为你提供愉悦的网上买宠的体验!" />
    <meta name="keywords" content="网上宠物交易,猫猫,狗狗,猪猪,仓鼠" />

注：TDK三大标签需要SEO优化，SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站排名，提高网站知名度
5、复制下面的代码到base.css中：

/*css */
/* 把我们所有标签的内外边距清零 */

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}


/* em 和 i 斜体的文字不倾斜 */

em,
i {
    font-style: normal
}


/* 去掉li 的小圆点 */

li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0;
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}


/* 清除浮动 */

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

在common.css中定义网页整体宽度为1200像素，居中显示（w为每行的大盒子类名）：

.w {
    width: 1200px;
    margin: 0 auto;
}

前期准备工作完成，准备好网页的.psd文件（切图、测量用），接下来进行网站头部和尾部的制作.

二、网站头部、底部制作

1、制作头部上面的快捷导航栏

在这里插入图片描述
①需要一个大号浅灰色盒子section，宽度为100%（不用定义），高度经测量为31px，背景色为#f1f1f1，为了让盒子里的文字垂直居中，设行高也为31px。
section中要有一个w类型的盒子（为了让文字在中间1200px内），在这个盒子里还要有两个盒子fl和fr，分别进行左浮动和右浮动。

<!--html-->
<!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl"></div>
            <div class="fr"></div>
        </div>
    </section>

.style_red {
    color: #c81623;
}

.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.fl {
    float: left;
    font-size: 12px;
}

.fr {
    float: right;
}

②fl放一个无序列表ul，含两个li（第二个li放登陆和注册的两个链接），设置好样式。
fr也用无序列表ul，每个选项宽度不一，因此不设置li的宽度，选项间的 | 也可以放在li里面，因此一共13个li，在样式文件中设置偶数li的heig、width、background-color和margin值。
在我的品优购、关注品优购等选项通过类名选出后添加after伪元素，插入字体图标：在这里插入图片描述

字体图标的插入方法我将在另一篇文章中说明。

<!--html-->
<div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li>
                        <a href="#">请登录</a> &nbsp; <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>

.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

.arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

OK，粗糙的快捷导航栏做完：在这里插入图片描述请忽略我标签头的内容😝
未免眼花，下面我将在每个部分后面贴完整代码。

2、header头部模块搭建

分为以下几个模块（都用定位做方便）：
在这里插入图片描述
定位时注意”子绝父相“原则，否则子盒子会飞出父盒子。也有”子绝父绝“的情况，比如购物车和它右上角的气泡。
①首先是品优购的大logo。
以前我们做这个logo是直接用Ps切图把它切出来放到盒子里完事，但是为了网站知名度，需要进行logo SEO优化：

在这里插入图片描述
没啥别的要注意的，按照上面的步骤来就行。
②search搜索模块
search盒子放一个input表单和一个button按钮，这里注意，CSS3的盒子模型很神奇，在w中设置属性
box-sizing: border-box;
这时我们就可以大胆的设置内边距和边框粗细，而不会撑大我们原本设定好的盒子大小。
input表单和button同为行内元素放在一起会产生一个小空隙，让他们都浮动起来，可以消除这个空隙。
而且他们都自带边框，需要在base.css文件中进行消除：
border: 0; outline: none;
③hotwords热词模块
简单，hotwords盒子里加几个a标签设置好样式就行了（你问我为什么不详细点，因为写了一整个上午的博客没保存被我不小心×掉了，全没了，全没了😭😭😭😭😭）
④shopcar购物车模块
小技巧：前后两个图标可以通过添加before和after伪元素插入字体图标；右上角的气泡不要设置宽度，因为里面的数字不一定就是一位数；气泡只有左下角不是圆角，其他三个角都可以设置圆角；随着气泡里面的数字增大，要把气泡向右边撑开才好看，所以定位时设置它的left值而不是right。

   /*插入字体图标：*/
.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

/*    设置圆角：*/
border-radius: 7px 7px 7px 0;

头部做好，源码：

 <!-- header头部模块制作 -->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords模块制作 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>
    </header>

/* header 头部制作 */

.header {
    position: relative;
    height: 105px;
}

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0;京东的做法*/
    /* 淘宝的做法让文字隐藏 */
    text-indent: -9999px;
    overflow: hidden;
}

.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search input {
    float: left;
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.search button {
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

.hotwords a {
    margin: 0 10px;
}

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

.count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}

3、nav导航模块搭建

在这里插入图片描述
制作思路：

①nav盒子通栏加一个红色下边框，里面加一个版心w。
②我们详细的说一下1号盒子dropdown，它其实是一个下拉菜单

按照制作思路，在dropdown盒子里放一个dt盒子和一个dd盒子，，把dt盒子设置为和dropdown一样的大小，dd盒子自然会被挤到dt的下面，显然dd盒子里面需要放一个无序列表，具体样式不再赘述。
这里要注意的是，我们暂时还不需要dd显示出来，先把它隐藏：

.dropdown .dd {
    display: none;
}

③navitems导航栏组
只有一个注意的点，每个item间距一样，不妨都给他们一个左右的padding值，那是给li呢，还是给li里面的a呢？当然要给a，这样可以增大链接的范围，提高用户体验。
源码如下：

<!-- nav模块制作 -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a> </li>
                        <li><a href="#">手机</a>、 <a href="#">数码</a>、<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>
                </div>
            </div>
            <div class="navitems">
                <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>
            </div>
        </div>
    </nav>

/* nav模块制作 */

.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}

.nav .dropdown:hover .dd {
    display: block;
}

.nav .navitems {
    float: left;
}

.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

.dropdown .dd {
    display: none;
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}

.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.dropdown .dd ul li:hover {
    background-color: #fff;
}

.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-family: 'icomoon';
    content: '\e920';
    font-size: 14px;
}

.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}

.dropdown .dd ul li:hover a {
    color: #c81623;
}

.navitems ul li {
    float: left;
}

.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

4、footer底部模块搭建

在这里插入图片描述
具体划分：
大盒子通栏浅灰色背景，里面给一个版心w，放1、2、3三个模块。

①mod_service服务模块制作
5个小模块用li+浮动做，每个小模块由图片+文字组成，考虑到浮动的初衷就是做文字环绕效果，浮动的盒子不会压住下面盒子里的文字，因此在每个小模块里放一个h5，让它浮动起来，右边的文字单独放一个盒子，像下面这样：
在这里插入图片描述
说到插图，一个网页中肯定有很多张图片，像这种几乎不会更新的图片我们可以整合到一张大的图片上，用精灵技术把他们引入到html页面：

②mod_help帮助模块制作
这里面的6个小模块可以用自定义列表dl+浮动做。没啥好说的，就是最后一个列表可能会被挤下来，可以单独设置它的宽度：

.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}

③mod_copyright版权信息模块制作
emmmmm简单，不写了
footer底部模块制作完成，源码如下：

    <!-- footer底部模块 -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <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/wx_cz.jpg" alt=""> 品优购客户端
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>

/* 底部模块制作 */

.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}

.mod_service ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -252px -2px;
    margin-right: 8px;
}

.service_txt h4 {
    font-size: 14px;
}

.service_txt p {
    font-size: 12px;
}

.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-left: 50px;
}

.mod_help dl {
    float: left;
    width: 200px;
}

.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}

.mod_help dl dt {
    font-size: 16px;
    margin-bottom: 10px;
}

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}

最后附上粗糙的成品图：
在这里插入图片描述

基本工作已经完成，下面将要进行main主体盒子的搭建，终于要做内容了😭，小白C在此立誓，下一篇我绝不出现忘记保存又关掉窗口的猪猪行为。

桦桦子

关注

3
点赞
踩
27

收藏

觉得还不错? 一键收藏
9
评论
前端学习之品优购项目（一）

第一次写博客，有很多瑕疵，还有就是我太懒了步骤不咋详细，见谅见谅????首先介绍一下这个项目，这个项目是跟着小破站黑马程序员pink老师做的，小白C感觉他的教学视频不错，链接奉上 H5C3+移动布局这篇主要是给自己学习记录用的，大家也想做一个的话可以去小破站学一下，跟着老师做比较快。一、前期准备1、项目搭建创建如下几个目录：shopping根目录，css目录存放样式文件，fonts目录存放我们需要的字体图标，字体图标通常是从爱可梦下载，images存放插入在网页的图片，js存放行为代码，uplo
复制链接

扫一扫