品优购网站项目

LiNO3

已于 2022-01-23 13:30:11 修改

阅读量1.6k

点赞数 5

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

于 2022-01-16 11:45:46 首次发布

本文链接：https://blog.csdn.net/qq_60471941/article/details/122509744

版权

笔记专栏收录该内容

54 篇文章 2 订阅

订阅专栏

目录

目录

首先设置favicon图标

1.制作favicon图标

2.favicon图标放到网站根目录下

3.在HTML页面引入favicon图标

网站TDK三大标签SEO优化

SEO：搜索引擎优化，利用搜索引擎规则提高网站自然排名

TDK：

首页制作：

1.制作快捷导航模块（shortcut）

2.制作头部模块header

logo的seo优化：

搜索模块

购物车模块

3.nav导航制作

全部商品的dropdown盒子

4.底部模块

1.mod-service模块

2.mod-help模块

3.mod-copyright模块

5.主体模块

1.焦点图模块(focus)

2.新闻快报模块（newsflash）

6.推荐模块（recom）：

7.猜你喜欢

8.楼层区域制作

1.家电模块

2.手机模块

首页制作完成

html部分总和：

css：

2.列表页制作

1.插入公共部分

2.列表页主体

3.注册页面：

标题：

内容

底部直接迁移首页内容

项目介绍：

项目名称：品优购

项目描述：品优购是电商网站要完成首页，列表页，注册页的制作

项目的构建

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

需要创建的文件

名称	说明
index.html	首页
base.css	css初始化样式文件
common.css	css公共样式文件

common公共样式模块化开发，将各个页面相同的模块放在一个公共样式文件中

首先设置favicon图标

1.制作favicon图标

将图标切成png图片
将图片转换为ico图标

2.favicon图标放到网站根目录下

3.在HTML页面引入favicon图标

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

网站TDK三大标签SEO优化

SEO：搜索引擎优化，利用搜索引擎规则提高网站自然排名

TDK：

T：title网站标题

建议：网站名（产品名）+网站介绍（不超过30个汉字）

D：description网站说明

说明文字主要做说明

K：keywords关键字

限制为6-8个关键字，关键字之间使用英文逗号隔开，采用关键词1，关键词2

例：

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、
        家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手机，存储卡，品优购" />

首页制作：

首先确定版心

1.制作快捷导航模块（shortcut）

通栏的盒子命名为shortcut，
里面包含版心的盒子
版心的盒子里包含1号左侧盒子左浮动
版心的盒子里包含2号右左侧盒子左浮动

html

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

css

@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;
}

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

.fl {
    float: left;
}

.fr {
    float: right;
}

.style-red {
    color: #c81623;
}

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

.shortcut ul li {
    float: left;
}

.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;
}

效果

2.制作头部模块header

logo的seo优化：

logo里面首先放一个h1标签，提权
h1里面放链接返回首页，把logo作为背景图片
为了搜索引擎收录，链接里面放文字但文字不用显示

方法1.text-indent：-9999px；overflow：hidden
方法2.font-size：0；

4.给链接一个tital属性，鼠标放logo上显示提示文字

搜索模块

购物车模块

头部模块 html部分

    <!-- 头部模块 -->
    <header class="header w">
        <div class="logo">
            <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
        </div>
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <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>

头部模块 css部分

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

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

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    font-size: 0px;
}

.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;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 35px;
    text-align: center;
}

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

.shopcar::after {
    font-family: 'icomoon';
    content: '\e920';
    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导航制作

全部商品的dropdown盒子

左侧浮动
根据相关性需要包含.dt和.dd两个盒子

html:

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

css:


/* nav导航模块 */

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

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

.nav .navitems {
    float: left;
}

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

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

.nav .dropdown .dd ul li {
    position: relative;
    width: 100%;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
}

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

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

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

.nav .dropdown .dd ul li :hover a {
    /*好像不起作用 */
}

.nav .navitems li {
    float: left;
}

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

4.底部模块

1.mod-service模块

2.mod-help模块

3.mod-copyright模块

html：

    <footer class="footer">
        <div class="w">
            <div class="mod-service">
                <ul>
                    <li>
                        <h5 class="img1"></h5>
                        <div class="service-txt">
                            <h4>正品保证</h4>
                            <p>正品保证，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="img2"></h5>
                        <div class="service-txt">
                            <h4>急速物流</h4>
                            <p>急速物流，急速送达</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="img3"></h5>
                        <div class="service-txt">
                            <h4>无忧售后</h4>
                            <p>七天无理由，退换货</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="img4"></h5>
                        <div class="service-txt">
                            <h4>特色服务</h4>
                            <p>私人定制，家居套装</p>
                        </div>
                </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>|
                    <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="#" style="border: none;">Contact U</a>
                </div>
                <div class="copyright">
                    地址: 重庆市南岸区南山街道崇文路重庆邮电大学 邮编：400065 电话：400-618-**** 传真：010-8293**** 邮箱: Jeniluo@163.com &ensp;渝ICP备20210009425号
                </div>
            </div>
        </div>
    </footer>

css：

/* 底部模块 */

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

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

.mod-service ul li {
    float: left;
    width: 300px;
    height: 50px;
    background-color: pink;
    padding-left: 35px;
}

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

.mod-service ul li .img2 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -255px -54px;
    margin-right: 8px;
}

.mod-service ul li .img3 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -256px -105px;
    margin-right: 8px;
}

.mod-service ul li .img4 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -257px -156px;
    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 {
    text-align: center;
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    text-align: center;
    line-height: 20px;
}

5.主体模块

因为该模块是index专用的，所以需要创建一个新的样式表（index.css）

里面有：

1.焦点图模块(focus)

2.新闻快报模块（newsflash）

html

 <!-- main盒子 -->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li><img src="upload/focus1.jpg" alt=""></li>
                </ul>
            </div>
            <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="lifeservice">
                    <ul>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -158px;"></i>
                            <p>白条</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -16px;"></i>
                            <p>话费</p>
                            
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -78px -16px;"></i>
                            <p>机票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -141px -16px;"></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -16px;"></i>
                            <p>游戏</p>
                            
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -88px;"></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -77px -88px;"></i>
                            <p>加油卡</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -141px -88px;"></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -88px;"></i>
                            <p>火车票</p>
                            
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -158px;"></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -78px -158px;"></i>
                            <p>理财</p>
                        </li>
                        <li>

                            <i style="background: url(images/icons.png) no-repeat -141px -158px;"></i>
                            <p>礼品卡</p>
                            
                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

css

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

.focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}

.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}

.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 {
    font-size: 14px;
    float: left;
}

.news-hd .more {
    float: right;
}

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

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

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}

.lifeservice {
    height: 209px;
    border: solid 1px #e4e4e4;
    border-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lifeservice ul li {
    float: left;
    height: 70px;
    width: 25%;
    border-right: #e4e4e4 solid 1px;
    border-bottom: #e4e4e4 solid 1px;
    text-align: center;
}

.lifeservice ul li i {
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-top: 12px;
}

.bargain {
    margin-top: 5px;
}

6.推荐模块（recom）：

html:

<div class="recom w">
        <div class="recom-hd">
            <img src="images/clock.png" alt="">
            <p>今日推荐</p>
        </div>
        <div class="recom-bd">
            <ul>
                <li><img src="upload/recom1.png" alt=""></li>
                <li><img src="upload/recom2.png" alt=""></li>
                <li><img src="upload/recom3.png" alt=""></li>
                <li><img src="upload/recom4.png" alt=""></li>
            </ul>
        </div>
    </div>

css

.recom {
    height: 163px;
    margin-top: 12px;
}

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

.recom-hd p {
    color: #fff;
    font-size: 18px;
}

.recom-bd {
    float: left;
}

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

.recom-bd ul li img {
    height: 163px;
    width: 248px;
}

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

7.猜你喜欢

html

<!-- 猜你喜欢 -->
    <div class="w like">
        <div class="like-hd">
            <p style="float: left; font-size: 18px;">猜你喜欢</p>
            <a href="#" class="like-hd-w">换一批&nbsp;</a>
        </div>
        <div class="like-bd">
            <ul>
                <li>
                    <a href="#"><img src="upload/like1.png" alt="" style="width: 200px; height: 160px;">
                        <div class="intro">
                            <p>阳光美包新款单肩包女<br> 包时尚子母包四件套女
                            </p><br>
                            <div class="price">￥116.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like2.png" alt="">
                        <div class="intro">
                            <p>爱仕达 30CM炒锅不粘<br> 锅NWG8330E电磁炉炒
                            </p><br>
                            <div class="price">￥99.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like3.png" alt="">
                        <div class="intro">
                            <p>捷波朗 <br> （jabra）BOOSI劲步
                            </p><br>
                            <div class="price">￥245.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like4.png" alt="">
                        <div class="intro">
                            <p>欧普<br> JYLZ08面板灯平板灯铝
                            </p><br>
                            <div class="price">￥238.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like5.png" alt="">
                        <div class="intro">
                            <p>三星<br> （G5500）移动联
                            </p><br>
                            <div class="price">￥649.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like6.png" alt="">
                        <div class="intro">
                            <p>韩国所望<br> 紧致湿润精华露400ml
                            </p><br>
                            <div class="price">￥649.00</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

css:

.like {
    position: relative;
    width: 1200px;
    height: 395px;
}

.like .like-hd .like-hd-w {
    position: absolute;
    right: 15px;
    font-family: 'icomoon';
}

.like-hd {
    height: 35px;
    width: 1200px;
    line-height: 35px;
}

.like-bd {
    height: 250px;
    width: 1200px;
    border: 1px solid #e4e4e4;
}

.like-bd ul li {
    position: relative;
    float: left;
    width: 199px;
    height: 400px;
}

.intro {
    font-size: 16px;
}

.intro .price {
    font-size: 20px;
    margin-top: -15px;
    color: red;
}

.like-bd ul li:nth-child(-n+5)::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 70px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

8.楼层区域制作

1.家电模块

2.手机模块

html：

<div class="floor">
        <!-- 一楼家用电器 -->
        <!-- 1楼家用电器楼层 -->
        <div class="w jiadian">
            <div class="box-hd">
                <h3>家用电器</h3>
                <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>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-210">
                            <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-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col-221">
                            <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-221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col-219">
                            <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手机楼层 -->
        <div class="w shouji">
            <div class="box-hd">
                <h3>手机通讯</h3>
                <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>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-210">
                            <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-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col-221">
                            <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-221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col-219">
                            <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>

css：

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

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

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

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

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

.floor .w {
    margin-top: 30px;
}

.box-bd {
    height: 361px;
    background-color: pink;
}

.tab-list-item>div {
    float: left;
    height: 361px;
    border-right: solid 1px #ccc;
}

.bb {
    display: block;
    border-bottom: 1px solid #ccc;
}

.col-210 {
    width: 210px;
    text-align: center;
}

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

.col-210 ul {
    margin-left: 12px;
}

.col-329 {
    width: 329px;
}

.col-221 {
    width: 221px;
}

.col-219 {
    width: 219px;
}

首页制作完成

效果图：

html部分总和：

<!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>
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、
        家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手机，存储卡，品优购" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
    <!-- 快捷导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li><a href="#">请登录&nbsp;</a><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>
            </div>
        </div>
    </section>
    <!-- 头部模块 -->
    <header class="header w">
        <div class="logo">
            <h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
        </div>
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <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>
    <!-- nav导航模块 -->
    <div 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>
    </div>
    <!-- main盒子 -->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li><img src="upload/focus1.jpg" alt=""></li>
                </ul>
            </div>
            <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="lifeservice">
                    <ul>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -158px;"></i>
                            <p>白条</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -16px;"></i>
                            <p>话费</p>

                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -78px -16px;"></i>
                            <p>机票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -141px -16px;"></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -16px;"></i>
                            <p>游戏</p>

                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -88px;"></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -77px -88px;"></i>
                            <p>加油卡</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -141px -88px;"></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -206px -88px;"></i>
                            <p>火车票</p>

                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -17px -158px;"></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i style="background: url(images/icons.png) no-repeat -78px -158px;"></i>
                            <p>理财</p>
                        </li>
                        <li>

                            <i style="background: url(images/icons.png) no-repeat -141px -158px;"></i>
                            <p>礼品卡</p>

                        </li>
                    </ul>
                </div>
                <div class="bargain">
                    <img src="upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 推荐模块 -->
    <div class="recom w">
        <div class="recom-hd">
            <img src="images/clock.png" alt="">
            <p>今日推荐</p>
        </div>
        <div class="recom-bd">
            <ul>
                <li><img src="upload/recom1.png" alt=""></li>
                <li><img src="upload/recom2.png" alt=""></li>
                <li><img src="upload/recom3.png" alt=""></li>
                <li><img src="upload/recom4.png" alt=""></li>
            </ul>
        </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="w like">
        <div class="like-hd">
            <p style="float: left; font-size: 18px;">猜你喜欢</p>
            <a href="#" class="like-hd-w">换一批&nbsp;</a>
        </div>
        <div class="like-bd">
            <ul>
                <li>
                    <a href="#"><img src="upload/like1.png" alt="" style="width: 200px; height: 160px;">
                        <div class="intro">
                            <p>阳光美包新款单肩包女<br> 包时尚子母包四件套女
                            </p><br>
                            <div class="price">￥116.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like2.png" alt="">
                        <div class="intro">
                            <p>爱仕达 30CM炒锅不粘<br> 锅NWG8330E电磁炉炒
                            </p><br>
                            <div class="price">￥99.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like3.png" alt="">
                        <div class="intro">
                            <p>捷波朗 <br> （jabra）BOOSI劲步
                            </p><br>
                            <div class="price">￥245.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like4.png" alt="">
                        <div class="intro">
                            <p>欧普<br> JYLZ08面板灯平板灯铝
                            </p><br>
                            <div class="price">￥238.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like5.png" alt="">
                        <div class="intro">
                            <p>三星<br> （G5500）移动联
                            </p><br>
                            <div class="price">￥649.00</div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/like6.png" alt="">
                        <div class="intro">
                            <p>韩国所望<br> 紧致湿润精华露400ml
                            </p><br>
                            <div class="price">￥649.00</div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 楼层区域制作 -->
    <div class="floor">
        <!-- 一楼家用电器 -->
        <!-- 1楼家用电器楼层 -->
        <div class="w jiadian">
            <div class="box-hd">
                <h3>家用电器</h3>
                <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>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-210">
                            <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-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col-221">
                            <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-221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col-219">
                            <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手机楼层 -->
        <div class="w shouji">
            <div class="box-hd">
                <h3>手机通讯</h3>
                <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>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <div class="tab-content">
                    <div class="tab-list-item">
                        <div class="col-210">
                            <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-1-1.png" alt="">
                            </a>
                        </div>
                        <div class="col-329">
                            <a href="#">
                                <img src="upload/floor-1-b01.png" alt="">
                            </a>
                        </div>
                        <div class="col-221">
                            <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-221">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <div class="col-219">
                            <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>
        <!-- 底部模块 -->
        <footer class="footer">
            <div class="w">
                <div class="mod-service">
                    <ul>
                        <li>
                            <h5 class="img1"></h5>
                            <div class="service-txt">
                                <h4>正品保证</h4>
                                <p>正品保证，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="img2"></h5>
                            <div class="service-txt">
                                <h4>急速物流</h4>
                                <p>急速物流，急速送达</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="img3"></h5>
                            <div class="service-txt">
                                <h4>无忧售后</h4>
                                <p>七天无理由，退换货</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="img4"></h5>
                            <div class="service-txt">
                                <h4>特色服务</h4>
                                <p>私人定制，家居套装</p>
                            </div>
                    </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>|
                        <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="#" style="border: none;">Contact U</a>
                    </div>
                    <div class="copyright">
                        地址: 重庆市南岸区南山街道崇文路重庆邮电大学 邮编：400065 电话：400-618-**** 传真：010-8293**** 邮箱: Jeniluo@163.com &ensp;渝ICP备20210009425号
                    </div>
                </div>
            </div>
        </footer>
</body>

</html>

css：

公共部分

@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;
}

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

.fl {
    float: left;
}

.fr {
    float: right;
}

.style-red {
    color: #c81623;
}

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

.shortcut ul li {
    float: left;
}

.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;
}

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


/* 头部模块 */

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

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    font-size: 0px;
}

.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;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 35px;
    text-align: center;
}

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

.shopcar::after {
    font-family: 'icomoon';
    content: '\e920';
    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;
}


/* nav导航模块 */

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

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

.nav .navitems {
    float: left;
}

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

.nav .dropdown .dd {
    /* display: none; */
    height: 465px;
    width: 100%;
    background-color: #c81623;
    margin-top: 0px;
}

.nav .dropdown .dd ul li {
    position: relative;
    width: 100%;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
}

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

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

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

.nav .dropdown .dd ul li :hover a {
    /*好像不起作用 */
}

.nav .navitems li {
    float: left;
}

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


/* 底部模块 */

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

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

.mod-service ul li {
    float: left;
    width: 300px;
    height: 50px;
    background-color: pink;
    padding-left: 35px;
}

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

.mod-service ul li .img2 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -255px -54px;
    margin-right: 8px;
}

.mod-service ul li .img3 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -256px -105px;
    margin-right: 8px;
}

.mod-service ul li .img4 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -257px -156px;
    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 {
    text-align: center;
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    text-align: center;
    line-height: 20px;
}

首页部分：

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

.focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}

.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}

.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 {
    font-size: 14px;
    float: left;
}

.news-hd .more {
    float: right;
}

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

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

.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}

.lifeservice {
    height: 209px;
    border: solid 1px #e4e4e4;
    border-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lifeservice ul li {
    float: left;
    height: 70px;
    width: 25%;
    border-right: #e4e4e4 solid 1px;
    border-bottom: #e4e4e4 solid 1px;
    text-align: center;
}

.lifeservice ul li i {
    display: inline-block;
    height: 24px;
    width: 24px;
    margin-top: 12px;
}

.bargain {
    margin-top: 5px;
}

.recom {
    height: 163px;
    margin-top: 12px;
}

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

.recom-hd p {
    color: #fff;
    font-size: 18px;
}

.recom-bd {
    float: left;
}

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

.recom-bd ul li img {
    height: 163px;
    width: 248px;
}

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

.like {
    position: relative;
    width: 1200px;
    height: 285px;
}

.like .like-hd .like-hd-w {
    position: absolute;
    right: 15px;
    font-family: 'icomoon';
}

.like-hd {
    height: 35px;
    width: 1200px;
    line-height: 35px;
}

.like-bd {
    height: 250px;
    width: 1200px;
    border: 1px solid #e4e4e4;
}

.like-bd ul li {
    position: relative;
    float: left;
    width: 199px;
    height: 250px;
}

.intro {
    font-size: 16px;
}

.intro .price {
    font-size: 20px;
    margin-top: -15px;
    color: red;
}

.like-bd ul li:nth-child(-n+5)::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 70px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

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

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

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

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

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

.floor .w {
    margin-top: 30px;
}

.box-bd {
    height: 361px;
    background-color: pink;
}

.tab-list-item>div {
    float: left;
    height: 361px;
    border-right: solid 1px #ccc;
}

.bb {
    display: block;
    border-bottom: 1px solid #ccc;
}

.col-210 {
    width: 210px;
    text-align: center;
}

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

.col-210 ul {
    margin-left: 12px;
}

.col-329 {
    width: 329px;
}

.col-221 {
    width: 221px;
}

.col-219 {
    width: 219px;
}

2.列表页制作

1.插入公共部分

插入头部，快捷导航，nav导航，底部模块

修改：在头部插入秒杀模块，对导航栏内容修改，并调整css

2.列表页主体

html:

<!-- 列表页主体部分 -->
    <div class="w sk-container">
        <div class="sk-hd">
            <img src="upload/bg_03.png" alt="">
        </div>
        <div class="sk-bd">
            <ul>
                <li>
                    <div class="shopgood">
                        <div><img src="upload/xq-sj.jpg"></div>
                        <div>
                            <em>
                                <p style="font-size: 18px;">Apple苹果iPhone 6S Plus(41699)</p>
                                <p style="font-size: 16px;">32G 金色 移动联通电信4G手机</p>
                            </em>
                            <span class="price-0">￥6088</span><del>￥6988</del>
                            <p class="yishou">已售87%
                                <div class="ban">
                                    <div class="banin"></div>
                                </div> 剩余
                                <span class="quantity">29</span>件
                            </p>
                        </div>
                        <button>立即抢购</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>

css:

.sk-bd {
    height: 1500px;
    width: 1360px;
}

.ban {
    float: left;
    height: 15px;
    width: 200px;
    border: 1px red solid;
    padding: 1px;
    border-radius: 7px;
}

.banin {
    height: 100%;
    width: 87%;
    background-color: red;
    transition: all 1s;
}

.price-0 {
    font-size: 22px;
    color: #c81523;
    font-weight: 600;
}

button {
    height: 30px;
    width: 300px;
    background-color: #c81523;
    color: aliceblue;
    font-size: 23px;
}

.sk-bd ul li {
    float: left;
}

.sk-bd ul li .shopgood {
    display: inline-block;
    height: 454px;
    width: 301px;
    border: 1px solid transparent;
}

.sk-bd ul>li .shopgood:hover {
    border: 1px solid #c81523;
}

3.注册页面：

不需要推荐越简单越好。

标题：

html

 <header>
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
        </header>
        <div class="registerarea">
            <h3>
                注册新账号
                <div class="login">我有账号，去<a href="#" style="color: #c81523;">登录</a></div>
            </h3>
        </div>

css

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

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

.logo {
    padding-top: 18px;
}

.registerarea {
    height: 322px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

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

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

内容

html：

<div class="registerarea">
            <h3>
                注册新账号
                <div class="login">我有账号，去<a href="#" style="color: #c81523;">登录</a></div>
            </h3>
            <div class="reg-form">
                <form action="">
                    <ul>
                        <li><label for="">手机号：</label><input type="text" class="inp"><span class="error"><i class="error-icon"></i>手机号格式不正确，请重新输入</span></li>
                        <li><label for="">验证码：</label><input type="text" class="inp"><span class="success"><i class="success-icon"></i>正确</span></li>
                        <li><label for="">登录密码：</label><input type="password" class="inp"><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="inp"><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="完成注册" class="bth"></li>
                    </ul>
                </form>
            </div>
        </div>

css：

.registerarea {
    height: 490px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

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

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

.reg-form {
    width: 600px;
    margin: 50px auto 0;
}

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

.reg-form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg-form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.error {
    color: #c81523
}

.error-icon,
.success-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 2px;
}

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

.success {
    color: green;
}

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

.safe {
    padding-left: 175px;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.ruo {
    background-color: #c81523;
}

.zhong {
    background-color: yellow;
}

.qiang {
    background-color: greenyellow;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.bth {
    width: 200px;
    height: 34px;
    background-color: #c81523;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 70px;
}

底部：

直接迁移首页内容

综合：

huml

<!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>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.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="registerarea">
            <h3>
                注册新账号
                <div class="login">我有账号，去<a href="#" style="color: #c81523;">登录</a></div>
            </h3>
            <div class="reg-form">
                <form action="">
                    <ul>
                        <li><label for="">手机号：</label><input type="text" class="inp"><span class="error"><i class="error-icon"></i>手机号格式不正确，请重新输入</span></li>
                        <li><label for="">验证码：</label><input type="text" class="inp"><span class="success"><i class="success-icon"></i>正确</span></li>
                        <li><label for="">登录密码：</label><input type="password" class="inp"><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="inp"><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="完成注册" class="bth"></li>
                    </ul>
                </form>
            </div>
        </div>
        <footer>
            <footer class="footer">
                <div class="w">
                    <div class="mod_copyright">
                        <div class="links">
                            <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="#" style="border: none;">Contact U</a>
                        </div>
                        <div class="copyright">
                            地址: 重庆市南岸区南山街道崇文路重庆邮电大学 邮编：400065 电话：400-618-**** 传真：010-8293**** 邮箱: Jeniluo@163.com &ensp;渝ICP备20210009425号
                        </div>
                    </div>
                </div>
            </footer>
        </footer>
    </div>
</body>

</html>

css

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

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

.logo {
    padding-top: 18px;
}

.registerarea {
    height: 490px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

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

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

.reg-form {
    width: 600px;
    margin: 50px auto 0;
}

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

.reg-form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg-form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.error {
    color: #c81523
}

.error-icon,
.success-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 2px;
}

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

.success {
    color: green;
}

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

.safe {
    padding-left: 175px;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.ruo {
    background-color: #c81523;
}

.zhong {
    background-color: yellow;
}

.qiang {
    background-color: greenyellow;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

.bth {
    width: 200px;
    height: 34px;
    background-color: #c81523;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 70px;
}

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

.links {
    text-align: center;
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    text-align: center;
    line-height: 20px;
}

LiNO3

关注

5
点赞
踩
11

收藏

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

品优购项目规划品优购首页制作品优购列表页制作品优购注册页制作域名注册与网站上传项目介绍：项目名称：品优购项目描述：品优购是电商网站要完成首页，列表页，注册页的制作项目的构建名称说明 shoping 项目文件夹 images 样式类图片文件夹 css 样式文件夹 upload 产品类图片文件夹 fonts 字体类文件夹 js 脚本文件夹需要创建的文件名称说明 index.html
复制链接

扫一扫

专栏目录