小米官网仿写部分代码+实训报告

实训老师带着做的，很基础，相似的功能只做了一个（下拉菜单、侧导航……），仅供参考，代码有注释。

实训报告

老师课上得讲解+小部分的一些文章的摘抄
一、项目简介
二、项目的技术准备
三、项目的分析与设计
四、关键问题的解决
五、总结与展望

一、项目简介
项目名称：实现“小米商城”页面
随着网络普及和发展，网站作为一种很强大的工具和平台越来越融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有的重视。可以看到前端重构的行业发展潜力巨大，各大知名的网络公司对前端人才的求饥若渴。近年来HTML5和CSS3的风行，还有移动web领域的崛起，apple和google这两大巨擘都推动移动领域的发展，而且现在的前端开发都越来越注重用户体验。相对来说，前端的人才需求比以前有了质的飞跃。
二、项目的技术准备
此次实训主要以HTML+CSS+JavaScript三项内容开展，从中学到了很多关键且实用的技术。
1、CSS技术
（1） 组合选择器：并列关系，对多个不同选择器使用相同样式
例如：css样式：p,div { color:#FF0000;}
html代码：< p >P标签显示段落。</ p > < div >DIV标签显示段落</ div>
注：多个不同选择器要用逗号分隔开。
（2）伪元素选择器：在html中预先定义好的一些选择器称为伪元素。
例如：a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H – A
注：伪元素 :hover在css1中只对a标签有效，在css2中对所有标签有效。
（3）盒子模型
是在网页设计中经常用到的css技术所使用的du一种思维模型，每个盒子都有：边界、边框、填充、内容四个属性；每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；边框有大小和颜色之分，边界就是该盒子与其它东西要保留多大距离。
例如：标准盒模型/w3c盒模型
①组成部分：content+padding+border+margin
内容 内边距 边框 外边距
②实际大小
实际宽度：width+padding+border+margin
高度：height+padding+border+margin
③content内容区域
width:; 设置元素的宽度；height:; 设置元素的高度
块级元素默认宽度为100%，行内元素宽度由内容撑开
块级元素和行内元素的高度都由内容撑开
块级元素可以设置宽高，行内元素设置宽高不生效
④border边框
border-style:solid(实线)|none(不显示); 必须属性 默认3px 黑色
border-width:; border-color:;
简写：border:width style color; 四周的边框
⑤padding内边距
设置内容距边框的距离，不能取负值和auto
padding:value; 四周
padding:value value; 上下 左右
padding:value value value; 上 左右 下
padding:value value value value; 上 右 下 左(顺时针)
padding-top:; padding-bottom:; padding-left:; padding-right:;
⑥margin外边距
设置元素之间的距离，可取正负、auto
margin:val