pink老师看到p299，开始品优购项目

1 品优购项目介绍

1.1

1.5 项目搭建工作

模块化开发：

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

1.6 网站favicon图标

制作favicon图标

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

favicon图标放到网站根目录下

HTML页面引入favicon图标

• 在html 页面里面的 元素之间引入代码：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/

在网址后面输入/favicon.ico就可以得到网站的favicon图标

1.7 网站TDK三大标签SEO优化

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

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

页面必须有三个标签用来符合 SEO 优化：

title 网站标题

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

description 网站说明

<meta name="description" content="说明的内容" />

keywords 关键字

<meta name= " keywords" content="6-8个关键字，关键词之间用英文逗号隔开" />

2 品优购首页制作

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

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

2.1 常用模块类名

名称	说明
快速导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

2.2 快捷导航shortcut制作

• 通栏的盒子命名为 shortcut ，是快捷导航的意思。 注意这里的行高， 可以继承给里面的子盒子
• 里面包含版心的盒子
• 版心盒子里面包含 1 号左侧盒子左浮动
• 版心盒子里面包含 2 号右侧盒子右浮动
• 需要用到字体图标

“小竖线也作为一个li，给li设置宽度为1、高度、背景颜色”

2.3 header 制作

• header 盒子必须要有高度
• 1号盒子是 logo 标志定位
• 2号盒子是 search 搜索模块定位
• 3号盒子是 hotwords 热词模块定位
• 4号盒子是 shopcar 购物车模块
  • count 统计部分用绝对定位做
  • count 统计部分不要给宽度，因为可能买的件数比较多， 让件数撑开就好了， 给一个高度
  • 一定注意左下角不是圆角， 其余三个是圆角 写法： border-radius: 7px 7px 7px 0;

LOGO SEO 优化

• logo 里面首先放一个 h1 标签， 目的是为了提权，告诉搜索引擎，这个地方很重要。
• h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
• 为了搜索引擎收录我们，我们链接里面要放文字（网站名称）， 但是文字不要显示出来。
  • 方法1： text-indent 移到盒子外面（ text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
  • 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。
• 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

<div class="logo">
    <h1>
        <a href="index.html" title="品优购商城">品优购商城</a>
    </h1>
</div>

search 搜索模块定位

2.4 nav 导航制作

3 列表页制作

4 注册页制作

5 Web服务器

标签：盒子,项目,网站,favicon,品优购,模块,页面,图标
来源： https://blog.csdn.net/CZNEU/article/details/112732444