DAY 11 | 自学前端第十一天

PC端品优购项目

---

一、品优购项目规划

1.1网站制作流程

1. 客户沟通制定方案
2. 签订合同
3. 预付定金——一般总额30%左右
4. 初稿审核（网页美工制作 原型图 和 psd效果图）
5. 前端人员页面设计 后端人员功能开发——前后端分离
6. 测试验收
7. 上线培训
8. 后期维护（一般半年到一年，bug修复&模块稍微改动）

一般有项目经理全程把控

1.2 品优购项目整体介绍

1. 电商网站，学习PC端首页、列表页、注册页的制作

1.3品优购项目学习目的

1. 了解常用布局；
2. 复习，总结，提高学过的布局技术；
3. 对实际开发中制作PC端页面流程有一个整体的感知；
4. 为学习移动端项目做铺垫。

1.4 开发工具以及技术栈

1. 开发工具：VScode、photoshop、Chrome浏览器
2. 技术栈：HTML5+CSS3；结构样式分离，模块化开发；代码规范

1.5 品优购项目搭建工作

• 需要创建以下文件夹：

1. shopping项目文件夹
2. images样式图片文件夹（不经常更换的）
3. upload产品类图片文件夹（可能会定期更换的）
4. css样式文件夹
5. fonts字体文件夹
6. js脚本文件夹

• 首页创建如下文件：

1. index.html 首页
2. base.css CSS初始化样式文件 box-sizing: border-box
3. common.css CSS公用样式文件

• 列表页创建如下文件：

1. list.html
2. list.css

• 注册页创建如下文件：

1. register.html
2. register.css

• 模块化开发：

1. 有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独做一个模块，重复使用；
2. common.css公共样式。写好一个样式，其他页面用相同样式；
3. 模块化开发可以重复性使用，修改方便。

1.6 网站favicon图标

favicon.ico  网站标志。

1. 制作favicon图标
2. favicon图标放到网站根目录下(shopping下)
3. HTML页面引入favicon图标

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

• 制作favicon图标

1. 把品优购图标切成PNG图片；
2. 用比特虫把PNG转换为ico图标

1.7 网站TDK三大标签SEO优化

SEO优化：搜索引擎优化，迎合搜索引擎排名规则，提高网站排名。公司一般有专门的SEO人员 

页面必须有三个标签来符合SEO优化：title  / description / keywords

1. title  网站标题

建议：网站名（产品名）-网站的介绍（尽量不超30字） 

例如：京东（JD.COM）- 正品低价、品质保障、配送及时、轻松购物！

2.description 网站说明

 “我们是...”“我们提供....”“电话：010....”之类的

3.keywords 关键字

6-8个关键字，英文逗号分割，最好的产品往前写

---

二、品优购首页制作

2.1常用模块命名 

1.  快捷导航栏——shortcut
2. 标志——logo
3. 头部——header
4. 购物车——shopcar
5. 搜索——search
6. 热点词——hotwords
7. 导航——nav
8. 导航左侧——dropdown包含dd dt
9. 导航右侧——navitems
10. 页面底部——footer
11. 页面底部服务模块——mod_service
12. 页面底部帮助模块——mod_help
13. 页面底部版权模块——mod_copyright

2.2 快捷导航栏shortcut制作

1. 通栏——版心——左浮动右浮动
2. fl——ul>li>a
3. 空格 
4. 公共类名的调用style_red
5. fr——小竖线是设置成宽度1px的even li，margin值布局
6. 伪元素字体图标arrow-icon、fonts文件夹、字体声明css路径

2.3 头部header制作

1. 版心header——logo、search、hotwords、shopcar

• LOGO SEO优化：

1. logo里放一个h1标签；（提高权重）
2. h1里放一个a标签，路径可以返回首页的，a标签设置logo的背景图片；转成块级设置宽高
3. 链接里要放文字（网站名称），但文字不要显示出来；text-indent:-9999px，overflow-hidden；font-size:0;
4. 最后给链接一个title属性，这样鼠标放在logo上可以看到提示文字。

• search

1. 大边框盒子search包含两个小盒子input search（placeholder）和button

2.4 nav导航制作

1. 只有下边框的大盒子——版心——浮动的两个盒子dropdown和navitems
2. dropdown 下拉栏要写dt dd
3. 给块级化的a标签padding值，可以扩大选中范围

2.5 footer底部制作

1. 通栏——版心——上中下三个盒子 mod_service、mod_help、mod_copyright
2. mod_service 下边框——ul>li——图标h5精灵图——div (h4 p)
3. mod_help下边框——dl>dt>dd>a——dl浮动
4. mod_copyright

2.6 main主体模块制作

1. main主体模块是index里面专有的，注意需要新的样式文件index.css。
2. 版心——main盒子——两个盒子focus、newsflash
3. newsflash——news（hd bd）、lifeservice（ul>li）字体图标i、bargin

2.7推荐模块recom制作

1. 版心——左右两个盒子
2. 左hd——img p
3. 右bd——ul>li

2.8楼层区floor 制作

1. 楼层区没有高度
2. 一楼——版心——hd（h3、tab_list-ul>li）
3.  Tab栏原理——布局需求——tab_content-tab_list_item

---

三、品优购列表页制作

 3.1 准备工作

1. list.html
2. 列表页头部尾部基本一致，去首页将头尾结构复制过来
3. 头尾样式也需要，list.html引入common.css
4. list.css

 3.2 列表页header和nav修改

1. 秒杀 sk 绝对定位
2. nav——版心——sk_list（ul>li>a）——sk_con（ul>li>a）

---

四、品优购注册页制作

4.1 注册页命名

1. register.html ——注册页面比较隐私，不需要对当前页面进行SEO优化
2. 注册专区——registerarea
3. 注册内容——reg-form
4. 错误的——error
5. 成功的——success
6. 默认的——default

4.1 注册页布局

1. 头部 header——div-logo
2. 主体 registerarea——h3-div——reg_form-form>ul>li（label input span i）
3. 底部 footer

---

五、代码

5.1 base.css:

/* 把所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* CSS3盒子模型 */
    box-sizing: border-box;
}

/* 斜体文字不倾斜 */
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: red;
}

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

body {
    /* CSS3属性，抗锯齿性，让文字放大显示更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /* 1.5倍行高 */
    font: 12px/1.5 microsoft yahei, heiti SC, tahoma, arial, hiragino sans gb;
    color: #666;
}

.hide,
none {
    display: none;
}

/* 清除浮动 */
.clearfix:after {
    /* 溢出隐藏，位置保留 */
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1
}

5.2 common.css :

/* 声明字体图标  这里一定要注意路径变化！ */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?no40lt');
    src:  url('../fonts/icomoon.eot?no40lt#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?no40lt') format('truetype'),
      url('../fonts/icomoon.woff?no40lt') format('woff'),
      url('../fonts/icomoon.svg?no40lt#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
/* 版心 */
.w {
    width: 1200px;
    margin: auto;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.style_red {
    color: #c81623;
}
/* 快捷导航模块 start*/
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
    font-size: 12px;
}
.shortcut ul li {
    float: left;
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    margin: 9px 15px 0;
    background-color: #666;
}
.arrow-icon::after {
    margin-left: 10px;
    content: '\f107';
    font-family: 'icomoon';
}
/* 快捷导航模块 end*/
 /* header头部模块 start */
 .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;
    top: 25px;
    left: 348px;
    width: 540px;
    height: 38px;
    border: 2px solid #b1191a;
}
.search input {
    float: left;
    width: 456px;
    height: 34px;
    padding-left: 10px;
    background-color: #fff;
}
.search button {
    float: left;
    width: 80px;
    height: 34px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}
.hotwords {
    position: absolute;
    top: 70px;
    left: 348px;
}
.hotwords a {
    margin: 0 10px;
}
.shopcar {
    position: absolute;
    top: 25px;
    right: 65px;
    width: 140px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
.shopcar::before {
    margin-left: 20px;
    content: '\f07a';
    font-family:'icomoon';
    color: #b1191a;
}
.shopcar::after {
    margin: 0 15px;
    content: '\f105';
    font-family:'icomoon';
}
.count {
    position: absolute;
    top: -5px;
    /* 右对齐的话 数字转向是反向 */
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #b1191a;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}
/* header 模块 end */
/* nav 模块 start  */
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}
.dropdown .dt {
    width: 100%;
    height: 100%;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
.dropdown .dd {
    /* display: none; */
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}
.dropdown ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
    color: #fff;
}
.dropdown ul li::after {
    position: absolute;
    right: 15px;
    font-family: 'icomoon';
    content: '\f105';
}
.dropdown ul li:hover {
    background-color: #fff;
}
.dropdown ul li:hover a {
    color: #c81623;
}
.dropdown ul li a {
    font-size: 14px;
    color: #fff;
}
.nav .navitems {
    float: left;
}
.navitems ul li {
    float: left;
}
.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 25px;
    font-size: 16px;
}
/* nav模块 end */

/* footer 区域 start */
.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 -253px -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;
}
.mod_help dl dd {
    font-size: 10px;
}
.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.links a {
    padding: 15px;
}
.copyright {
    line-height: 20px;
}
/* footer 区域 end */

5.3 index.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>
    <!-- 网站说明，一般ico人员来写 -->
    <meta name="description"
        content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!-- 关键字，一般ico人员来写 -->
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />

    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入css初始化 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入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;&nbsp;<a href="register.html" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="#">我的品优购</a></li>
                    <li></li>
                    <li><a href="#">品优购会员</a></li>
                    <li></li>
                    <li><a href="#">企业采购</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="#">关注品优购</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="#">客户服务</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="#">网站导航</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航栏模块 end -->
    <!-- header头部模块 start -->
    <header class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- search模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <!-- hotwords模块 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">
            <a href="#">我的购物车</a>
            <i class="count">8</i>
        </div>
    </header>
    <!-- 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>