【前端基础】Day 9 PC端品优购项目

m0_738054562025-03-06 8:29

目录

[1. 品优购项目规划](#1. 品优购项目规划)

[1.1 网站制作流程](#1.1 网站制作流程)

[1.2 品优购项目整体介绍](#1.2 品优购项目整体介绍)

[1.3 学习目的](#1.3 学习目的)

[1.4 开发工具以及技术栈](#1.4 开发工具以及技术栈)

[1.5 项目搭建工作](#1.5 项目搭建工作)

[1.6 网站favicon图标](#1.6 网站favicon图标)

[1.7 网站TDK三大标签SEO优化](#1.7 网站TDK三大标签SEO优化)

[2. 品优购首页制作](#2. 品优购首页制作)

[2.1 常见模块类命名](#2.1 常见模块类命名)

[2.2 快捷导航shortcut制作](#2.2 快捷导航shortcut制作)

[2.3 header制作](#2.3 header制作)

[2.4 nav导航制作](#2.4 nav导航制作)

[2.5 footer底部制作](#2.5 footer底部制作)

[2.6 main主题模块制作](#2.6 main主题模块制作)

[2.7 推荐模块制作](#2.7 推荐模块制作)

[2.8 楼层区 floor](#2.8 楼层区 floor)

index.html

base.css

common.css

[3. 列表页制作](#3. 列表页制作)

[3.1 准备工作](#3.1 准备工作)

[3.2 列表页 header 和 nav 修改](#3.2 列表页 header 和 nav 修改)

[​编辑 3.3 列表页主体 sk_container](#编辑 3.3 列表页主体 sk_container)

list.html

list.css

[4. 品优购注册页制作](#4. 品优购注册页制作)

register.html

register.css

[5. Web服务器](#5. Web服务器)

[6. 总结](#6. 总结)

1. 品优购项目规划

1.1 网站制作流程

1.2 品优购项目整体介绍

1.3 学习目的

1.4 开发工具以及技术栈

1.5 项目搭建工作

images文件夹中放不经常更换的、修饰类的图片，比如背景图片、精灵图；upload放和产品相关的图片。

1.6 网站favicon图标

css 复制代码 
<link rel="shortcut icon" href="favicon.ico">

1.7 网站TDK三大标签SEO优化

  1. title网站标题
  1. description网站说明

content里面的内容由专门制作SEO的人填写。

  1. keywords关键字

越重要的放越前

2. 品优购首页制作

2.1 常见模块类命名

2.2 快捷导航shortcut制作

2.3 header制作

logo seo优化

2.5 footer底部制作

2.6 main主题模块制作

2.7 推荐模块制作

2.8 楼层区 floor

index.html

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD" />

    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入CSS初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共的样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入index.css文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块 end -->

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

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

    <!-- 首页专有的模块 main start -->
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li>
                        <img src="upload/focus1.png" 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></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>
                <div class="bargin">
                    <img src="upload/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 首页专有的模块 main end -->

    <!-- 推荐模块 start -->
    <div class="w recom">
        <div class="recom_hd">
            <img src="images/clock.png" alt="">
            <h3>今日推荐</h3>
        </div>
        <div class="recom_bd">
            <ul>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
                <li><img src="upload/recom_03.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块 end -->

    <!-- 楼层区制作 start -->
    <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>
                    </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>
        <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>
                    </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>
    </div>
    <!-- 楼层区制作 end -->

    <!-- 底部模块的制作 start -->
    <div class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手
                    机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |

                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：
                    400-618-4000 <br>
                    京ICP备08001421
                </div>
            </div>
        </div>
    </div>
    <!-- 底部模块的制作 end -->

</body>

</html>

base.css

css 复制代码 
/* 14-京东css初始化 */
/* 把所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型，padding和border不会将盒子撑大 */
    box-sizing: border-box;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

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

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

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

a:hover {
    color: #ff0f23
}

button,
input {
    font-family: PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框需要手动去掉*/
    border: 0;
    outline: none;
}

body {
    /* CSS3 抗锯齿行，让文字显示得更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */
    font: 12px/1.5 PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

common.css

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: 31px;
    /* 垂直居中 */
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut li {
    float: left;
}

/* 选择所有序号为偶数的li */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

/* 向下的小三角 arrow箭头 icon小图标*/
.arrow-icon::after {
    font-family: 'icomoon';
    content: '\e91e';
    margin-left: 6px;
}

/* header头部制作 */
.header {
    position: relative;
    height: 105px;
}

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

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

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

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

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

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

.hotwords a {
    margin: 0 10px;
}

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

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

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

.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-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;
    color: #fff;
    text-align: center;
    font-size: 16px;
}

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

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

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

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

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

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

.navitems ul li {
    float: left;
}

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

/* 底部模块的制作 */
.footer {
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

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

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

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

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

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

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

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

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

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

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

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}

3. 列表页制作

3.1 准备工作

引入需要的link；

快捷导航栏、header、nav、footer 模块大体相同，复制过来即可，些许不同再修改。

3.3 列表页主体 sk_container

list.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑，MP3，CD，VCD" />
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入CSS初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共的样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入列表页的css文件 -->
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp;</li>
                    <li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航模块 end -->

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

    <!-- nav模块制作 start -->
    <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="#">女装</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模块制作 end -->

    <!-- 列表页主体部分 -->
    <div class="w sk_container">
        <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>
            </ul>
        </div>
    </div>

    <!-- 底部模块的制作 start -->
    <div class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="images/wx_cz.jpg" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手
                    机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |

                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：
                    400-618-4000 <br>
                    京ICP备08001421
                </div>
            </div>
        </div>
    </div>
    <!-- 底部模块的制作 end -->
</body>

</html>

list.css

css 复制代码 
/* 列表页专有的 */
.nav {
    /* .sk_con ul li a 行高超过了nav盒子，影响下面主体部分的排列 */
    overflow: hidden;
}

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

.sk_list {
    float: left;
}

.sk_list ul li {
    float: left;
    line-height: 47px;
}

.sk_list ul li a {
    /* display: block;
    line-height: 47px; */
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.sk_con {
    float: left;
}

.sk_con ul li {
    float: left;
    /* line-height: 49px; */
}

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

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

.sk_bd ul li {
    float: left;
    overflow: hidden;
    margin-right: 13px;
    width: 290px;
    height: 460px;
    /* 不然会抖动 */
    border: 1px solid transparent;
}

.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}

.sk_bd ul li:hover {
    border: 1px solid #c81523;
}

4. 品优购注册页制作

准备一个父盒子，再用ul>li ;

右对齐可通过盒子加宽度，再 text-align: right;

register.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <!-- 引入favicon图标 -->
    <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="registerarea">
            <h3>注册新用户
                <div class="login">我有账号，去<a href="#">登录</a></div>
            </h3>
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li>
                            <label for="">手机号 ：</label>
                            <input type="number" class="inp">
                            <span class="error"> <i class="error_icon"></i> 手机号码格式不正确</span>
                        </li>
                        <li>
                            <label for="">短信验证码 ：</label>
                            <input type="number" 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" name="" id="">
                            同意协议并注册 <a href="#">《知晓用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="提交注册" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <!-- 底部模块的制作 start -->
        <footer>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | 商家入驻 | 营销中心 | 手
                    机品优购 | 友情链接 | 销售联盟 |品优购社区 | 品优购公益 |

                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：
                    400-618-4000 <br>
                    京ICP备08001421
                </div>
            </div>
        </footer>
        <!-- 底部模块的制作 end -->
    </div>
</body>

</html>

register.css

css 复制代码 
.w {
    width: 1200px;
    margin: 0 auto;
}

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

.logo {
    padding-top: 18px;
}

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

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

}

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

.login a {
    color: #c81523;
}

.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;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;
    margin-top: -2px;
}

.success {
    color: green;
}

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

.safe {
    padding-left: 165px;
}

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

.safe .ruo {
    background-color: #de1111;
}

.safe .zhong {
    background-color: #40b83f;
}

.safe .qiang {
    background-color: #f79100;
}

.agree {
    padding-left: 90px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: #1ba1e6;
}

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

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

.links {
    margin-bottom: 15px;
}

.links a {
    margin: 0 3px;
}

.copyright {
    line-height: 20px;
}

5. Web服务器

6. 总结

  1. 对父盒子设置行高等于盒子高度，能使子盒子垂直方向居中，如果子盒子是由文字撑开的，那么可实现文字居中对齐；如果给子盒子设置了大小，那么想使子盒子居中对齐可以通过设置margin。

2.行的元素可以指定左右的margin值，margin：0 10px；

3.li里面放了链接a，想要给padding值实现不同字数盒子间间距相同，给a设置padding更好一些，这样使得链接的范围更大，不局限于文字占的空间。

4.轮播图父盒子里有多张图，最好通过ul里的li包含图

5.text-align: center; 可以使里面的文字、行内元素或行内块元素水平居中显示

6.一般情况下，a如果包含有宽度的盒子，a需要转化为块级元素

7.注意外边距塌陷问题，可以用padding避免

相关推荐
loriloy24 分钟前
在Electron中通过Node-API调用DLL导出函数的完整指南
前端·javascript·electron
环能jvav大师24 分钟前
Electron桌面应用开发：创建应用
前端·javascript·windows·ui·electron·前端框架
环能jvav大师26 分钟前
Electron桌面应用开发：自定义菜单
开发语言·前端·javascript·windows·electron
掘金一周1 小时前
你问我答，为什么class在前端开发中不常用？ | 掘金一周 3.6
前端·后端
gyc27271 小时前
快速熟悉JavaScript
开发语言·前端·javascript
没有鸡汤吃不下饭2 小时前
vue3项目实现数据字典、下拉数据缓存最佳方案，解决同一下拉数据并发多次调用接口
前端·javascript·vue.js
拉不动的猪2 小时前
刷刷题25（项目中遇到的难题，怎么解决的）
前端·javascript·面试
赔罪2 小时前
Python 面向对象高级编程-定制类
服务器·开发语言·前端·python
全栈小董2 小时前
arco design vue 表格Table自定义筛选
前端·vue.js·arco design
Vvc_b3 小时前
Vue3的核心语法【未完】
前端·javascript·vue.js
热门推荐
01DeepSeek各版本说明与优缺点分析02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03如何在WPS和Word/Excel中直接使用DeepSeek功能04Windows 11 安装 Dify 完整指南 非docker环境05DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具06DeepSeek本地部署详细指南07如何本地部署AI智能体平台，带你手搓一个AI Agent08本地部署DeepSeek教程（Mac版本）09在Windows下安装Ollama并体验DeepSeek r1大模型10WPF 复杂页面布局及漂亮 UI 界面设计全解析