axiu呀

跟着pink老师前端入门教程-day13

品优购案例

一、品优购项目规划

1. 品优购项目整体介绍

项目名称：品优购

项目描述：品优购是一个电商网站，我们要完成 PC 端首页、列表页、注册页面的制作

2. 品优购项目学习目的

1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。

2. 品优购项目能复习、总结、提高基础班所学布局技术。

3. 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知。

4. 为后期学习移动端项目做铺垫。

3. 开发工具以及技术栈

3.1 开发工具：切图用ps，代码用Vscode，测试用chrome

3.2 技术栈

利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式

采取结构与样式相分离，模块化开发

良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹--- 品优购代码规范.md）

4 品优购项目搭建工作

4.1 需要创建如下文件夹：

4.2 需要创建如下文件：

有些网站初始化的不太提倡 * { margin: 0; padding: 0; }

比如新浪：

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

base.css

/* 把所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

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

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

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

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

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 宋体 浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

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

.hide,
.none {
    display: none
}

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

.clearfix {
    zoom: 1
}

4.3 模块化开发

有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

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

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

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

5、网站favicon图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

目前主要的浏览器都支持 favicon.ico 图标。

5.1 制作favicon图标

把品优购图标切成png图片

把png图片转换为ico图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

5.2 favicon图标放到网站根目录下

5.3 HTML页面引入favicon图标

在html页面里面的元素之间引入代码。

7、网站TDK三大标签SEO优化

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

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

页面必须有三个标签用来符合 SEO 优化，有专门的 SEO 人员准备。

7.1 title网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

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

例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！

小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

7.2 description 网站说明

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

例如：

家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

3. keywords 关键字

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。

例如：

件,手表,存储卡,京东" />

二、品优购首页制作

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

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

2.1 常用模块类名命名

2.2 快捷导航shortcut制作

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

/* 快捷导航 shortcut 制作 */
.w {
    width: 1200px;
    margin: 0 auto;
}

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

.left {
    float: left;
}

.style_red {
    color: #c81623;
}

.right {
    float: right;
}

.shortcut ul li {
    float: left;
    line-height: 31px;

}

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

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

2.3 header制作

LOGO SEO优化

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

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

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

方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法

方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。

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

HTML

CSS

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

.header .logo {
    position: absolute;
    top: 25px;
    height: 56px;
    width: 171px;
    background-image: url(../images/logo.png);
}

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

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

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

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

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

.hotwords a {
    margin: 0 10px;
}

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

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

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

2.4 nav导航制作

nav 盒子通栏有高度，而且有个下边框

1 号盒子左侧浮动，dropdown

2 号盒子左侧浮动，navitems 导航栏组

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