品优购项目

PanCc220

已于 2022-04-14 22:33:40 修改

阅读量273

点赞数 1

分类专栏：前端文章标签： html5 css3 前端

于 2022-04-01 22:55:38 首次发布

本文链接：https://blog.csdn.net/qq_61324100/article/details/123910142

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

品优购项目搭建工作

文章目录

品优购项目搭建工作
一. 模块化开发

一. 模块化开发

1. 品优购项目规划

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时

可以把这些结构和样式单独作为一个模块，然后重复使用

这里最经典的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式

模块化开发具有重复使用，修改方便等优点。

common.css公共样式里面包含版心宽度，清除浮动，页面文字颜色等公共样式

1.1 品优购项目搭建工作

文件夹:

项目文件夹 shoping
样式类图片文件夹 images
样式文件夹 css
产品类图片文件夹 upload
字体类文件夹 fonts
脚本文件夹 js

文件:

首页 index.html
css初始化样式文件 base.css
css公共样式文件 common.css
有些网站初始化的不太提倡 * { margin: 0; padding: 0;}

例如新浪:html,body,ul,li,di,dd… { margin: 0; pading: 0;}

1.2 网站favicon图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
目前主要的浏览器都支持favicon.ico

三步曲:
1.制作favicon图标
把品优购图片切成png图片
把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫:

http://www.bitbug.net/

2.favicon图标放到网站根目录下
3.html页面引入favicon图标

 <link rel="shortcut icon" href=" /favicon.ico" />

1.3 网站TDK三大标签SEO优化

SEO汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签来符合SEO优化:<title>、description、keywords

	<!-- 标题 -->
    <title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城">
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城">

2. 品优购首页制作

网站的首页一般都是使用index命名，比如index.html或者index.php

我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里。

2.1常用模块类名命名

以下是我们约定的命名模块，可以直接使用以下类名即可。

名称说明

快捷导航栏 shortcut

头部 header

标志 logo

购物车 shopcar

搜索 search

热点词 hotwords

导航 nav

导航左侧 dropdown 包含 .dd .dt

导航右侧 navitems

页面底部 footer

页面底部服务模块 mod_service

页面底部帮助模块 mod_help

页面底部版权模块 mod_copyright

2.2 快捷导航shortcut制作

通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含1号左侧盒子左浮动

版心盒子里面包含2号右侧盒子右浮动

 <!-- shortcut-快捷导航部分 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <!-- 每个li盒子里的文字不一样，所以不用给li设置宽度 -->
                <ul>
                    <li>品优购欢迎您! &nbsp; </li>
                    <li><a href="#">请登陆</a> &nbsp; <a href="register.html" 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>
            </div>
        </div>
    </section>

/* shortcut快捷导航部分 */
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
}

.shortcut ul li {
    float: left;

}

.shortcut .fr ul li:nth-child(even) {
    /* 结构伪类选择器-选择li为偶数的设置样式 */
    width: 1px;
    height: 15px;
    background-color: #666;
    margin: 9px 15px 0;
}

.arrow-icon::after {
    /* 设置字体图标(箭头图标)--伪元素 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

2.3 header制作

header盒子必须要有高度
1号盒子是logo标志模块定位
2号盒子是search搜索模块定位
3号盒子是hotwords热词模块定位

4号盒子是shopcar购物车模块定位

count统计部分用绝对定位做

count统计部分不要给宽度，因为可能买的件数笔记多，让件数撑开就好了，给一个高度

一定注意左下角不是圆角，其余三个是圆角:

boder-radius: 7px 7px 7px 0;

<!-- header-头部部分 -->
    <header class="header w">
        <!-- 1.logo模块 -->
        <div class="logo">
            <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
        </div>
        <!-- 2.搜索框模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发"><button>搜索</button>
        </div>
        <!-- 3.热词模块制作 -->
        <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>
        <!-- 4.购物车模块 -->
        <div class="shopcar">
            <a href="#">我的购物车</a>
            <i class="count">8</i>
        </div>
    </header>

/* header头部部分 */
.header {
    position: relative;
    height: 105px;

}

.logo {
    /* 头部里的盒子用定位来做更快速 */
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;

}

.logo a {
    /* logo的背景图片给上链接 */
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* a标签里的文字隐藏   淘宝做法*/
    /* text-indent: -9999px;
    overflow: hidden; */
    /* 京东做法 */
    font-size: 0;
}

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

}

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

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

.hotwords {
    position: absolute;
    top: 67px;
    left: 349px;


}

.hotwords a {
    margin: 0 11px;
}

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

}

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

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

.shopcar .count {
    /* 这里是子绝父绝 */
    position: absolute;
    left: 105px;
    top: -5px;
    /* 这里不用设置宽度，因为物品数量会增加，让他自然而然把盒子撑开 */
    height: 14px;
    line-height: 14px;
    border-radius: 7px 7px 7px 0;
    /* 字体和边框的距离左右为5px */
    padding: 0 5px;
    background-color: #e60012;
    color: #fff;
}

LOGO SEO 优化

1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要

2.h1里面再放一个链接，可以返回首页的，把logo的背景图片给上链接

3.为了搜索引擎收录我们，我们链接里面要放文字(网站名称),但是文字不要显示出来

方法1:text-indent移动到盒子外面(text-indent:-9999px), 然后overflow:hidden，淘宝的做法。
方法2:直接给font-size:0; 就看不到文字了，京东的做法。

4.最后给链接一个titile属性，这样鼠标放到logo上就可以看到提升文字了。

2.4 nav导航制作

nav盒子通栏有高度，而且有个下边框
1号盒子左侧浮动,dropdown
2号盒子左侧浮动,navitems导航栏组

1号盒子有讲究，根据其相关性里面包含.dt和.dd两个盒子

<!-- nav-导航栏部分 -->
    <nav class="nav">
        <div class="w">
            <!-- 1.下拉模块 -->
            <div class="dropdown">
                <!-- 全部商品分类下边部分是描述它的内容，所以dropdown里边有两个盒子。
                     分别为dt dd 只不过dt盒子和父盒子宽高一样，所以dd只能在下边显示。
                     dd盒子有自己的高度(样式层叠) -->
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="list.html">手机、</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 .navitems {
    float: left;
}

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

}

.dropdown .dd {
    /* display: none; */
    width: 100%;
    height: 465px;
    background-color: #c81623;
    /* 让dd贴着线的下沿 */
    margin-top: 2px;
}

.dropdown .dd ul li {
    position: relative;
    height: 30px;
    line-height: 30px;
    /* 给li设置margin  padding不用担心盒子撑开了--css3盒子模型 */
    margin-left: 2px;
    padding-left: 12px;

}

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

}

.dropdown .dd ul li::after {
    /* 统一把字体图标 > 做个定位 */
    position: absolute;
    top: 1px;
    right: 10px;
    content: '\e920';
    font-family: 'icomoon';
    color: #fff;
    font-size: 14px;


}

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

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

.navitems ul li {
    float: left;
}


.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    text-align: center;
    /* 给a设置左右的padding值更好,这样a有个区域范围鼠标经过后 也能触发链接 */
    padding: 0 25px;
}

2.5 footer底部制作

footer页面底部盒子通栏给一个高度和灰色的背景
footer里面有一个大的版心
版心里面包含1号盒子,mod_service服务模块
版心里面包含2号盒子,mod_help帮助模块

版心里面包含3号盒子,mod_copyright版权模块

<!-- footer底部部分 -->
    <footer class="footer">
        <div class="w">
            <!-- 1.服务模块 -->
            <div class="mod_sevice">
                <ul>
                    <li>
                        <h5 class="baozhang"></h5>
                        <div class="sevice_info">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="wuliu"></h5>
                        <div class="sevice_info">
                            <h4>急速物流</h4>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="shouhou"></h5>
                        <div class="sevice_info">
                            <h4>无忧售后</h4>
                            <p>7天无理由退换货</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="tese"></h5>
                        <div class="sevice_info">
                            <h4>特色服务</h4>
                            <p>私人定制家电套餐</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="bangzhu"></h5>
                        <div class="sevice_info">
                            <h4>帮助中心</h4>
                            <p>您的购物指南</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 2.帮助模块 -->

            <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="#">211限时达</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>


                </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>

                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DIY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>

                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <!-- 3.版权模块 -->
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|<a
                        href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a
                        href="#">品优购社区</a>|
                    <a href="#">品优购公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>

/* footer底部部分 */
.footer {
    height: 415px;
    padding-top: 30px;
    background-color: #f5f5f5;
}

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

.mod_sevice ul li {
    float: left;
    width: 240px;
    height: 50px;
    padding-left: 37px;

}

.mod_sevice ul li h5 {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    /* 精灵图制作小背景图标
    background: url(../images/icons.png) no-repeat -252px -2px; */
}

.mod_sevice ul li .baozhang {
    /* 精灵图制作小背景图标 */
    background: url(../images/icons.png) no-repeat -252px -2px;
}

/* 完善部分 */
.mod_sevice ul li .wuliu {

    background: url(../images/icons.png) no-repeat -255px -53px;
}

.mod_sevice ul li .shouhou {

    background: url(../images/icons.png) no-repeat -256px -106px;
}

.mod_sevice ul li .tese {

    background: url(../images/icons.png) no-repeat -257px -156px;
}

.mod_sevice ul li .bangzhu {

    background: url(../images/icons.png) no-repeat -256px -208px;
}


.sevice_info h4 {
    font-size: 14px;
    font-weight: 700;
}

.sevice_info p {
    font-size: 12px;

}

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

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

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

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

}

.mod_help dl dd {
    font-size: 12px;
}

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

.link {
    margin-bottom: 13px;
}

.link a {
    margin: 0 14px;
}

.copyright {
    line-height: 20px;
}

2.6 main主页部分制作

以前书写的就是模块化中的公共部分

main主体模块是index里面专有的，注意需要新的样式文件index.css。

main盒子宽度为980px,位置距离左边220px,给高度就不用清除浮动
main里面包含左侧盒子，左浮动，focus焦点模块

main里面包含右侧盒子，右浮动，newsflash新闻快报模块

<!-- main 主页部分 -->
    <div class="w">
        <div class="main">
            <!-- 1.焦点模块 -->
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/focus.png" alt="">
                    </li>
                </ul>
            </div>
            <!-- 2.新闻快报模块 -->
            <div class="newsflash">
                <div class="news">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li><a href="#"><strong>[重磅]</strong> 艾欧尼亚，昂扬不灭!</a></li>
                            <li><a href="#"><strong>[特惠]</strong> 断剑重铸之日，骑士归来之时!</a></li>
                            <li><a href="#"><strong>[公告]</strong> 即使一无所有，也要未雨绸缪!</a></li>
                            <li><a href="#"><strong>[特惠]</strong> 时间不在于你拥有多少，而在于你怎样使用!</a></li>
                            <li><a href="#"><strong>[公告]</strong> 且行且珍惜!</a></li>
                        </ul>
                    </div>
                </div>
                <div class="lifesevice">
                    <ul>
                        <li>
                            <i class="huafei"></i>
                            <p>话费</p>
                        </li>
                        <li class="jipiao-li">
                            <i class="jipiao"></i>
                            <img src="images/jian.png" alt="">
                            <p>机票</p>
                        </li>
                        <li>
                            <i class="dianying"></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i class="youxi"></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i class="caipiao"></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i class="jiayou"></i>
                            <p>加油卡</p>
                        </li>
                        <li class="jiudian-li">
                            <i class="jiudian"></i>
                            <img src="images/jian.png" alt="">
                            <p>酒店</p>
                        </li>
                        <li>
                            <i class="huoche"></i>
                            <p>火车票</p>
                        </li>
                        <li>
                            <i class="zhongchou"></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i class="licai"></i>
                            <p>理财</p>
                        </li>
                        <li>
                            <i class="liping"></i>
                            <p>礼品卡</p>
                        </li>
                        <li>
                            <i class="baitiao"></i>
                            <p>白条</p>
                        </li>

                    </ul>
                </div>
                <div class="bargin">
                    <img src="upload/bargin.png" alt="">
                </div>
            </div>
        </div>
    </div>

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}

.main .focus {
    float: left;
    width: 721px;
    height: 100%;

}

.main .newsflash {
    float: right;
    width: 250px;
    height: 100%;

}

.news {
    height: 165px;
    border: 1px solid #e4e4e4;

}

.news-hd {

    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}

.news-hd h5 {
    float: left;
    font-size: 14px;
}

.news-hd .more {
    float: right;

}

.news-hd .more::after {
    content: '\e920';
    font-family: 'icomoon';
}

.news-bd {
    height: 130px;
    padding: 5px 15px;
}

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lifesevice {
    /* li右边超出的边框,解决办法:让lifesevice盒子溢出部分隐藏 */
    overflow: hidden;
    height: 209px;
    border: 1px solid #e4e4e4;
    border-top: 0;
}

.lifesevice ul {
    /* lifesevice盒子装不下一排4个li  所以li会另起一行 */
    /* 解决办法:给ul设置一个大点的宽度 */
    width: 256px;
}

.lifesevice ul li {
    position: relative;
    float: left;
    text-align: center;
    width: 64px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

.lifesevice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    /* background-color: pink; */
    margin-top: 12px;
}

.lifesevice ul li .huafei {
    background: url(../images/icons.png) no-repeat -19px -16px;
}

/* 完善部分 */
.lifesevice ul li .jipiao {
    background: url(../images/icons.png) no-repeat -79px -17px;
}

.lifesevice ul li .dianying {
    background: url(../images/icons.png) no-repeat -142px -18px;
}

.lifesevice ul li .youxi {
    background: url(../images/icons.png) no-repeat -206px -17px;
}

.lifesevice ul li .caipiao {
    background: url(../images/icons.png) no-repeat -16px -88px;
}

.lifesevice ul li .jiayou {
    background: url(../images/icons.png) no-repeat -79px -88px;
}

.lifesevice ul li .jiudian {
    background: url(../images/icons.png) no-repeat -143px -87px;
}

.lifesevice ul li .huoche {
    background: url(../images/icons.png) no-repeat -209px -87px;
}

.lifesevice ul li .zhongchou {
    background: url(../images/icons.png) no-repeat -16px -158px;
}

.lifesevice ul li .licai {
    background: url(../images/icons.png) no-repeat -79px -158px;
}

.lifesevice ul li .liping {
    background: url(../images/icons.png) no-repeat -140px -156px;
}

.lifesevice ul li .baitiao {
    background: url(../images/icons.png) no-repeat -209px -160px;
}

.lifesevice ul .jipiao-li img,
.lifesevice ul .jiudian-li img {
    position: absolute;
    top: 0;
    right: 0;
}

.bargin {
    margin-top: 5px;
}

2.7推荐模块制作

大盒子recom推荐模块
里面包含2个盒子，浮动即可
1号盒子recom-hd

2号盒子recom-bd,注意里面的小竖线

<!-- 推荐部分 -->
    <div class="recom w">
        <div class="recom-hd">
            <img src="images/recom.png" alt="">
        </div>
        <div class="recom-bd">
            <ul>
                <li><img src="upload/recom-bd_01.png" alt=""></li>
                <li><img src="upload/recom-bd_02.png" alt=""></li>
                <li><img src="upload/recom-bd_03.png" alt=""></li>
                <li><img src="upload/recom-bd_04.png" alt=""></li>

            </ul>
        </div>
    </div>

/* 推荐模块 */
.recom {
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;
}

.recom-hd {
    float: left;
    width: 205px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 35px;
}

.recom-bd {
    float: left;
}

.recom-bd ul li {
    position: relative;
    float: left;
}

.recom-bd ul li img {
    /* 为了防止后台传的图片大或者小影响我们的布局，所以我们把图片高度宽度写死，这样就可以得到一样宽度高度的图片了 */
    width: 243px;
    height: 163px;
}

.recom-bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 0px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

2.8楼层区floor制作

注意这个floor,不要给高度，内容有多少，算多少

第一楼是家用电器模块:里面包含两个盒子

1号盒子box-hd,给一个高度，有下边框，里面分为左右两个盒子

2号盒子box-bd，不用给高度，因为产品可能会增加数量

<!-- 楼层区 -->
    <div class="floor">
        <!-- 1. 1楼家电楼层 -->
        <div class="w jiadian">
            <div class="box-hd">
                <h5>家用电器</h5>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style_red">热门</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="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-one">
                            <ul>
                                <li><a href="#">节能补贴</a></li>
                                <li><a href="#">4k电视</a></li>
                                <li><a href="#">空气净化器</a></li>
                                <li><a href="#">IH电饭煲</a></li>
                                <li><a href="#">滚筒洗衣机</a></li>
                                <li><a href="#">电热水器</a></li>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-two">
                            <a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
                        </div>
                        <div class="col-three">
                            <a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                        </div>
                        <div class="col-four">
                            <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
                        </div>
                        <div class="col-five">
                            <a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
                            <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. 2楼手机通讯层 -->
        <div class="w shouji">
            <div class="box-hd">
                <h5>手机通讯</h5>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style_red">热门</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="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-one">
                            <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>
                            </ul>
                            <a href="#">
                                <img src="upload/floor-2-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-two">
                            <a href="#"><img src="upload/floor-2-2.png" alt=""></a>
                        </div>
                        <div class="col-three">
                            <a href="#" class="bb"><img src="upload/floor-2-3.png" alt=""></a>
                            <a href="#"><img src="upload/floor-2-4.png" alt=""></a>
                        </div>
                        <div class="col-four">
                            <a href="#"><img src="upload/floor-2-5.png" alt=""></a>
                        </div>
                        <div class="col-five">
                            <a href="#" class="bb"><img src="upload/floor-2-6.png" alt=""></a>
                            <a href="#"><img src="upload/floor-2-7.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

/* 楼层区 */
.floor .w {
    margin-top: 29px;
}

.box-hd {
    height: 30px;
    border-bottom: 2px solid #c81623;

}

.box-hd h5 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-weight: 400;
}

.tab-list {
    float: right;
    line-height: 30px;

}

.tab-list ul li {
    float: left;
}

.tab-list ul li a {
    margin: 0 15px;
}

.box-bd {
    height: 361px;

}

.tab-list-item>div {
    float: left;
}

.col-one {
    width: 210px;
    background-color: #f9f9f9;
    text-align: center;
}

.col-one ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}

.col-one ul {
    padding-left: 12px;
}

.col-two {
    width: 329px;
}

.col-three {
    width: 221px;
    border-right: 1px solid #ccc;
}

.col-four {
    width: 221px;
    border-right: 1px solid #ccc;
}

.col-five {
    width: 219px;
}

.bb {
    /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
    display: block;
    border-bottom: 1px solid #ccc;
}

3.1 品优购列表页制作

列表页面是新的页面，我们需要新建页面文件list.html
因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
头部和底部的样式也需要，因此list.html还需要引入common.css
需要新的list.css样式文件，这是列表页专门的样式文件

1.秒杀模块sk盒子里直接放图片：

images/sk.png、定位、用padding撑开盒子

2.导航栏模块修改:

左右两个盒子，分别都是ul>li来做,用<a>撑开盒子，<a>的元素居中对齐

3.列表页主体sk-contais:

1号盒子sk-contais给宽度1200px，不要给高度
2号盒子sk-hd，插入图片即可

3号盒子sk-bd,里面包含很多ul和li

<!-- nav-导航栏部分 -->
    <nav class="nav">
        <div class="w">
            <div class="sk-list">
                <ul>
                    <li><a href="#">品优秒杀</a></li>
                    <li><a href="#">即将售馨</a></li>
                    <li><a href="#">超值低价</a></li>
                </ul>
            </div>
            <div class="sk-con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">女鞋</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>

    <!-- 列表主页部分 -->
    <div class="w sk-contains">
        <div class="sk-hd">
            <img src="upload/bg_03.png" alt="">
        </div>
        <div class="sk-bd">
            <ul class="clearfix">
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
                <li><img src="upload/list.jpg" alt=""></li>
            </ul>
        </div>
    </div>

/* 列表页专有的css */

.nav {
    overflow: hidden;
}

.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #b1191a;
    padding: 3px 0 0 14px;
}

.sk-list {
    float: left;
}

.sk-list ul li {
    float: left;

}

.sk-list ul li a {
    display: block;
    padding: 0 28px;
    line-height: 47px;
    font-size: 16px;
    font-weight: 700;
    color: #000;

}

.sk-con {
    float: left;
}

.sk-con ul li {
    float: left;

}

.sk-con ul li a {
    display: block;
    padding: 0 20px;
    line-height: 49px;
    font-size: 14px;

}

.sk-con ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}


.sk-contains {
    margin-bottom: 160px;
}

.sk-bd ul li {
    float: left;
    overflow: hidden;
    width: 290px;
    height: 460px;
    margin-right: 12px;
    /* 将li的边框设置为透明 */
    border: 1px solid transparent;
}

.sk-bd ul li:nth-child(4n) {
    /* 4的倍数的li是没有右边距的。所以要设置它的右边距为0 不然影响我们的布局 */
    margin-right: 0;
}

.sk-bd ul li:hover {
    /* 鼠标移动到li的时候，li往下移动了一点。其实是因为li本质上是有1px的边框的，所以我们将li的边框设置为透明就好了 */
    border: 1px solid #b1191a;
}

4.1注册页制作

注册页面:register.html

注意:注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <!-- 引入favicon.ico文件 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入css注册页面文件 -->
    <link rel="stylesheet" href="css/register.css">

</head>

<body>
    <div class="w">
        <!-- 头部区域 -->
        <header>
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>

        </header>
        <!-- 主体区域 -->
        <div class="register-area">
            <h3>
                注册新用户
                <div class="login">我有账号，去<a href="#">登陆</a></div>
            </h3>

            <div class="reg-form">
                <form action="">
                    <ul>
                        <li><label for="">手机号:</label>
                            <input type="tel" class="ipt">
                            <span class="error"> <i class="error-icon"></i> 手机号格式不正确，请重新输入</span>
                        </li>
                        <li><label for="">短信验证码:</label>
                            <input type="number" class="ipt">
                            <span class="success"> <i class="success-icon"></i> 短信验证码输入正确</span>
                        </li>
                        <li><label for="">登陆密码:</label>
                            <input type="password" class="ipt">
                            <span class="error"> <i class="error-icon"></i> 密码不少于6位数，请重新输入</span>
                        </li>
                        <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em>
                        </li>
                        <li><label for="">确认密码:</label>
                            <input type="password" class="ipt">
                            <span class="error"> <i class="error-icon"></i> 密码不一致，请重新输入</span>
                        </li>
                        <li class="agree"><input type="checkbox"> 同意协议并注册 <a href="#">知果果用户协议</a></li>
                        <li><input type="submit" value="完成注册" name="" id="" class="btn"></li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- 尾部区域 -->
        <footer>
            <div class="mod_copyright">
                <div class="link">
                    <a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|<a
                        href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a
                        href="#">品优购社区</a>|
                    <a href="#">品优购公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </footer>
    </div>

</body>

</html>

/* 注册页专有的css */
.w {
    width: 1200px;
    margin: 0 auto;
}

header {
    height: 84px;
    border-bottom: 2px solid #b1191a;
}

.logo {
    /* 这里使用margin-top会使用外边距塌陷，所以使用padding更好 */
    padding-top: 15px;
}

.register-area {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.register-area h3 {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    font-size: 18px;
    font-weight: 400;
}

.login {
    float: right;
    font-size: 14px;
}

.login a {
    color: #c81623;
}

/* 表单里的元素要给一个父盒子，并且给上宽度，这样就可以让表单元素垂直居中啦 */
.reg-form {
    width: 600px;
    /* background-color: aqua; */
    margin: 0 auto;
    margin-top: 52px;
}

.reg-form ul li {
    margin-bottom: 21px;
}

.reg-form ul li label {
    /* label标签是行内元素,要设置宽高转为行内块元素。因为label里边的内容是右对齐，所以我们要给label设置宽才能设置右对齐 */
    display: inline-block;
    width: 82px;
    text-align: right;

}

.reg-form ul li .ipt {
    /* 表单里的元素都可以用li来做的,整齐。li里边再包含表单元素 */
    width: 240px;
    height: 36px;
    border: 1px solid #ccc;
}

.error {
    /* 不正确的话才变红色提示，所以我们不妨给span添加一个class属性 error */
    color: #c81623;
}

/* 集合选择器 */
.error-icon,
.success-icon {
    /* i元素是行内元素，需要转换为行内块元素才可以设置宽高，并且能于其他元素同行显示 */
    display: inline-block;
    /* 行内块元素与文字居中对齐,用vertical-align */
    vertical-align: middle;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;

}

.success {
    color: green;
}

.success-icon {
    background: url(../images/success.png) no-repeat;
}

.safe {
    margin-left: 170px;
    color: #bebebe;
}

.safe em {
    padding: 0 10px;
}

.ruo {

    background-color: #de1111;
    color: #fff;
}

.zhong {

    background-color: #40b83f;
    color: #fff;
}

.qiang {

    background-color: #f79100;
    color: #fff;
}

.agree {
    padding-left: 87px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.btn {
    margin: 30px 0 0 90px;
    width: 200px;
    height: 34px;
    background-color: #c81623;
    color: #fff;
}

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

.link {
    margin-bottom: 13px;
}

.link a {
    margin: 0 14px;
}

.copyright {
    line-height: 20px;
}


.reg-form {
    width: 600px;
    /* background-color: aqua; */
    margin: 0 auto;
    margin-top: 52px;
}

.reg-form ul li {
    margin-bottom: 21px;
}

.reg-form ul li label {
    /* label标签是行内元素,要设置宽高转为行内块元素。因为label里边的内容是右对齐，所以我们要给label设置宽才能设置右对齐 */
    display: inline-block;
    width: 82px;
    text-align: right;

}

.reg-form ul li .ipt {
    /* 表单里的元素都可以用li来做的,整齐。li里边再包含表单元素 */
    width: 240px;
    height: 36px;
    border: 1px solid #ccc;
}

.error {
    /* 不正确的话才变红色提示，所以我们不妨给span添加一个class属性 error */
    color: #c81623;
}

/* 集合选择器 */
.error-icon,
.success-icon {
    /* i元素是行内元素，需要转换为行内块元素才可以设置宽高，并且能于其他元素同行显示 */
    display: inline-block;
    /* 行内块元素与文字居中对齐,用vertical-align */
    vertical-align: middle;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;

}

.success {
    color: green;
}

.success-icon {
    background: url(../images/success.png) no-repeat;
}

.safe {
    margin-left: 170px;
    color: #bebebe;
}

.safe em {
    padding: 0 10px;
}

.ruo {

    background-color: #de1111;
    color: #fff;
}

.zhong {

    background-color: #40b83f;
    color: #fff;
}

.qiang {

    background-color: #f79100;
    color: #fff;
}

.agree {
    padding-left: 87px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.btn {
    margin: 30px 0 0 90px;
    width: 200px;
    height: 34px;
    background-color: #c81623;
    color: #fff;
}

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

.link {
    margin-bottom: 13px;
}

.link a {
    margin: 0 14px;
}

.copyright {
    line-height: 20px;
}

PanCc220

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
品优购项目

品优购项目搭建工作文章目录品优购项目搭建工作一. 模块化开发1. 品优购项目规划1.1 品优购项目搭建工作1.2 网站favicon图标1.3 网站TDK三大标签SEO优化2. 品优购首页制作2.2 快捷导航shortcut制作2.3 header制作LOGO SEO 优化2.4 nav导航制作2.5 footer底部制作2.6 main主页部分制作2.7推荐模块制作2.8楼层区floor制作3.1 品优购列表页制作4.1注册页制作一. 模块化开发1. 品优购项目规划有些样式和结构在很多页面都会出现
复制链接

扫一扫