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

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

一、项目简介 项目名称：实现“小米商城”页面 随着网络普及和发展，网站作为一种很强大的工具和平台越来越融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有的重视。可以看到前端重构的行业发展潜力巨大，各大知名的网络公司对前端人才的求饥若渴。近年来HTML5和CSS3的风行，还有移动web领域的崛起，apple和google这两大巨擘都推动移动领域的发展，而且现在的前端开发都越来越注重用户体验。相对来说，前端的人才需求比以前有了质的飞跃。 二、项目的技术准备 此次实训主要以HTML+CSS+JavaScript三项内容开展，从中学到了很多关键且实用的技术。 1、CSS技术 （1） 组合选择器：并列关系，对多个不同选择器使用相同样式 例如：css样式：p,div { color:#FF0000;} html代码：< p >P标签显示段落。 < 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