实践项目二：品优购电商项目

【项目前提】

• 掌握HTML语义化标签；
• 掌握css基本语法；
• 掌握css选择器的使用；
• 掌握css盒子模型；
• 掌握css浮动；
• 掌握css定位；
• 会使用精灵图及图标字体；

【项目说明】

品优购网上商城是一个综合性的B2B2C平台，类似京东商城、天猫商城。网站采用商家入驻的模式，商家入驻平台提交申请，有平台进行资质审核，审核通过后，商家拥有独立的管理后台录入商品信息。商品经过平台审核后即可发布。

通过本阶段的学习我们需要实现品优购网上商城网站前台的部分页面。包括品优购网站首页、品优购商品列表页，商品详情页、品优购用户注册页。

【项目时长】

4天（实际完成时间1周）

【注意事项】

1. 首先弄清楚页面的组成部分，弄清楚每个模块内容，开发过程中可以参照页面的三大组成部分，头部，身体，底部的思想进行布局，每一个部分的开发结合盒子模型的思想进行布局。
2. 在开发过程中应用W3Cshool文档进行查询。W3Cshool查询链接：HTML 教程
3. 注意命名（文件夹名，文件名，class类名，id名，注释等），请严格遵循《品优购代码规范》完成项目。
4. 开发过程中对于公共部分的开发书写到新的文件中，可以方便页面的引用。
5. 在开发过程中，遇到不会调色的颜色，可使用Snipaste工具，进行RGB值的获取。

一、HTML语义化标签

基础语义化标签：

• <header> 头部标签
• <nav> 导航标签
• <article> 内容标签
• <section> 定义文档某个区域
• <aside> 侧边栏标签
• <footer> 尾部标签

二、css基本语法

基本语法：选择器 {

样式：属性名1：属性值1;

属性名2：属性值2;

}

选择器是用来选择标签的，选出来以后给标签加样式。

自我小结：CSS的三种引入方式（实际开发时用的是外部样式表链接式引入的方法）；三大特性（继承性、层叠性、优先级），其中权重的计算不容小觑，开发时我就总会因为不熟练算错权重而影响布局，层叠性的影响在布局时也需考虑；盒子模型在布局时尤为重要且方便实用；浮动使用时要注意清除浮动的影响，定位则需注意“子绝父相”；还有元素显示模式的转换也很有用。在项目开发过程中，我对CSS大致的看法也就这些了。

三、css选择器的使用

常用选择器（越精准，优先级越高）

• id选择器
• 类选择器
• 元素/标签选择器
• 通配符选择器
• 属性选择器
• 结构伪类选择器
• 伪元素选择器

详细内容可以看我的其它博客（不是很详细，你可以试试自己去查资料之类的）

四、css盒子模型

网页布局的核心本质： 利用 CSS 摆盒子

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

• 普通流（标准流/文档流）
• 浮动
• 定位

实际开发中，一个页面基本都包含了这三种布局方式，网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里面装内容

参考：CSS盒子模型总结

五、css浮动

我觉得浮动需要掌握的大概就是以下几点：

• 什么是浮动
• 浮动的特性
• 为什么需要浮动
• 为什么需要清除浮动
• 清除浮动的方式

为了约束浮动元素位置, 我们网页布局一般采取的策略：先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置。

六、css定位、精灵图、图标字体

关卡四：CSS 定位，元素的显示隐藏_墨问莫问645的博客-CSDN博客

其中需要注意的就是每种定位布局的参照位置及区别，精灵图和字体图标的作用及使用步骤。