老师课上得讲解+小部分的一些文章的摘抄 一、项目简介 二、项目的技术准备 三、项目的分析与设计 四、关键问题的解决 五、总结与展望
一、项目简介 项目名称：实现“小米商城”页面 随着网络普及和发展，网站作为一种很强大的工具和平台越来越融入了人们的生活，而与用户关系最密切的前端技术也逐渐得到应有的重视。可以看到前端重构的行业发展潜力巨大，各大知名的网络公司对前端人才的求饥若渴。近年来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:value; 四周 margin:value value; 上下 左右 margin:value value value; 上 左右 下 margin:value value value value; 上 右 下 左(顺时针) margin-top:; margin-bottom:; margin-left:; margin-right:; 应用：块级元素水平居中margin:0 auto; 注意：垂直方向上外边距合并问题 当垂直方向上外边距相撞时，取较大值 （4）浮动：块级元素在同一行显示 ①原理：元素浮动后排除到普通文档流之外； 元素浮动后在页面不占据位置(原位置不保留)； 浮动是碰到父元素的边框或者浮动元素的边框就会停止； 浮动不会重叠，只有左右浮动； 浮动后所有元素转换为块级元素； ②浮动的语法：float:left|right|none; ③清除浮动的影响：如果父元素不设置高度，默认由内容撑开，当子元素浮动后，父元素的高度坍塌，对后面的元素产生影响 ④解决浮动的影响： 1）浮动元素的父元素加高(高度已知) 2）浮动元素的父元素加overflow:hidden;自动找高，子元素溢出时，直接隐藏 3）受影响的元素加clear:left|right|both;浮动元素的父元素高度没有找到 4）空div法(父元素的高度可以找到，页面会增加大量的div元素) 浮动元素后加一个空div，空div{clear:both;} 5）伪对象法 浮动元素的父元素::after{content:""; display:block; clear:both; } （5）定位position:; ①static静态定位 默认值 ②relative相对定位：相对于自己原位置定位，定位后原位置保留 配合left、top、right、bottom移动(四个属性同时存在，左上优先级高) 应用场景： a、配合绝对定位使用b、自己小范围移动 ③absolute绝对定位：相对于已经定位(relative、absolute、fixed)的父元素定位，父元素没有定位，逐级往上找，最后相对于body定位，定位后原位置不保留 配合left、top、right、bottom移动(四个属性同时存在，左上优先级高) 应用场景：形成独立的一层 ④fixed固定定位：相对于流浏览器窗口定位，定位后原位置不保留 配合left、top、right、bottom移动(四个属性同时存在，左上优先级高) 应用场景：固定在页面某个位置 （6）堆叠顺序z-index: 取值number; 取值越大，层级越往上(默认值为auto，习惯最大值给999，可取负值) 注：同时定位后，后面的元素会覆盖前面的元素，必须配合定位使用(relative、absolute、fixed) （7）display：规定元素生成框的类型。 none：该元素不会被显示。 block：该元素以块状元素显示出来，前后都有换行符。 inline：默认；无法设置宽高。 inline-block：行内块元素；可设置宽高，且可在一行显示。 （8）transform：使元素在位置或者形状上发生一定的改变 ①位移：transform:translate(x,y); （单位：px、%） 只有一个值，表示水平方向位移的距离； 有两个值，表示水平和垂直方向位移的距离 transform:translateX();transform:translateY(); 注:对行内元素不生效 ②旋转：transform:rotate(30deg); （单位deg） 取正值，顺时针旋转；取负值，逆时针旋转 元素默认的中心点为宽高的一半 transform-origin:; 可以修改元素的中心点 注：位移和旋转同时存在，建议位移写旋转的前面 ③缩放：transform:scale(x,y); 取值number 0-1：缩小 >1：放大 默认为1 只取一个值，等比例缩放；取两个值，表示水平和垂直方向 transform:scaleX();transform:scaleY(); ④倾斜：transform:skew(x,y);（单位deg） 只取一个值，表示水平方向倾斜的弧度； 取两个值，表示水平方向和垂直方向倾斜的弧度 transform:skewX();transform:skewY(); 注：倾斜弧度和屏幕不能是直角 2、JavaScript技术 （1）定时器 ①语法：setInterval(函数,毫秒数) 注：定时器默认不会停止 setInterval(function(){console.log(‘hello’);},1000); function fn(){console.log(‘hello’); } setInterval(fn,1000); ②停止定时器：clearInterval(编号) （2）获取页面元素 ①通过ID：document.getElementById(‘IDName’) ②通过tagName：document.getElementsByTagName(‘标签名’)返回集合 ③通过className(IE8以上支持)： document.getElementsByClassName(‘类名’)返回集合 ④通过css选择器(IE8及其以上) document.querySelector(‘css选择器’) 返回符合条件的第一个元素 document.querySelectorAll(‘css选择器’) 返回符合条件所有元素的集合 （3）操作页面元素的style属性 ①元素.style.css属性 = ‘属性值’; 注：当css属性有-时，横杠去掉，换成首字母大写 例如：backgroundColor 当css属性为js关键词时，在属性前面加css 例如：cssFloat ②元素.style.cssText = ‘属性:属性值;属性:属性值;’; （4）事件：事件一般配合函数使用，onclick 点击事件 三、项目的分析与设计 1、轮播图设计 轮播图的设计可以使浏览者在第一眼看到几张很大又最具有卖点的商品图片在循环自动播放，直观的向顾客传递最新最热产品信息。 以下是实现该功能的核心步骤： HTML部分： ①定义轮播图片 首先定义一个div为轮播图片的区域大小，在一个div中包裹无序列表标签ul，ul中包裹几个li列表项标签，用于显示图片，准备轮播几张图片就写几个li标签，每一个li标签下设置超链接a标签，包裹img图片标签，因为点击每一张图片要跳转到相应的内容。 ②轮播图中下方圆点循环按钮 在ul标签下定义一个div，用于存放轮播图下方顺序按钮。 ③左右两侧按钮 定义好图片循环下方圆点按钮之后，定义左右两侧按钮。 核心JS代码动画部分： ①导入jQuery 首先要导入JavaScript插件jQuery库，要在所写的js代码上面，不然不会起作用。而js代码写在body的最下方，可以一边加载内容一边显示，否则要等图片动画等都加载完成才能显示内容。 ②写主要实现函数 设置变量、播放图片函数、写循环轮播图片函数、设置图片播放间隔、给各按钮绑定事件 2、鼠标悬浮出现浮框 可以使顾客更加方便、快捷、直观的进一步获取商品信息。 重点步骤总结： ①祖盒和悬浮出现部分盒使用定位布局 ②祖盒position（布局）为 relative 辅助 隐藏部分的 absolute 布局 ③设定隐藏部分的样式 ④清浮动隐藏需要隐藏部分：height: 0; overflow: hidden; ⑤可以适当设置过渡动画 transition: .1s; 3、下载app app下载和弹出框下载是同源的，点击都指向同一个链接，所以属于同一个a标签下，巧妙之处是使用矩形边框绘制小三角，且利用为元素::after的方式加入页面，以及小三角在菜单栏内的绝对定位，包括响应hover，显示隐藏操作，存在渐入渐出的效果，利用transition: height 0.3s; 对高度变化进行响应。 4、左侧导航 布局： 它的组成部分，分别是轮播图和左侧导航，因为这两个是重叠在一起的，因此轮播图用了 position：absolute 来进行定位的，左侧开始菜单，也可以使用position：absolute来定位，左侧菜单使用了定位后，层叠优先级会将左侧显示在前面，轮播图就在下层了。 弹出页面框：看到动画效果，左侧菜单切换内容框是没有过渡效果，因此不用设置 transition 属性，就可以通过display的none和block来设置，页面的布局也是通过绝对定位父元素来进行的，全部的定位都是基于父元素居中盒子进行的。 里面的内容每一列通过ul和li来进行设置，ul最多只能有4个，也就是只能4列内容的显示，宽度计算也很简单 总宽度 / N(取决于想显示多少列)。 li 通过设置内边距填充，使其内容居中 ， padding：上下18px 左右20px。 5、悬浮上移+阴影 关键代码： .ad-list a:hover{ /上移，变大/ transform: translateY(-1px) scale(1.02); /阴影/ box-shadow: 0 10px 30px -5px rgba(0,0,0,0.7)} 四、关键问题的解决 1、浮动的使用 做小米网页时，遇到了这样的问题，有时盒子内部的浮动会影响到盒子外部的浮动，遇到这样的情况可以给盒子加上overflow属性，属性值为hidden。 2、关于块标签和内敛标签 块标签默认情况下会单独占用一行，内敛标签则是接着前面的元素的后面不会换行，但是当我们给他定义display：block时，他就会变得跟快标签一样，拥有快标签的各种属性。 3、关于透明的使用 透明暂时接触到两种，一种是背景和盒子里面的内容全透明，一种是只透明背景，但是盒子里面的内容不会透明。如果只是背景透明，那么可以给background设置rgba()的颜色属性值，其中rgb代表了颜色，而a则代表了透明度，默认的透明度是1。全透明为0。 4、实现按压效果 主要是利用css里面的选择器active（活动链接） 在选择器里面写transfrom属性让他旋转：当transalteY(2px)表示向上移动两个px,当点击事件结束时就会恢复原样这样就实现了按压的效果。 5、单行或多行文本的垂直居中问题 line-height的约束条件，它只适合给里面只有一行字的盒子设置上下居中，当超过一行字时就会出现错误。 如果一段内容，它的高度是可变的，可以设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把< div>完全填充的一种访求而已。 这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 多行文本固定高度居中： CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟< table>，所以我们可以使用这个属性来让< div>模拟< table>就可以使用vertical-align了。注意：display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此要为需要定位的文本再增加一个< div>元素： 这个方法应该是很理想了，但是InternetExplorer6并不能正确地理解display:table和display:table-cell，因此这种方法在InternetExplorer6及以下的版本中是无效的。 6、设置html、body的height、width为100%，二者上方留有空白 body、html的margin、padding、border值未清零，此时应设置清零： *{margin:0;padding:0;border:0;} 7、在多个行内元素排成一行时，元素之前存在间隔 换行符、tab（制表符）、空格产生间隙 解决：font-size设为0；元素写成一行 8、同时使用vertical-align和line-height对于元素位置的影响 当文字和图片处于同一行的时候，设置vertical-align：middle和line-height：center并不能使文字和图片都处于中间从而实现文字和图片的居中对齐。 此时让上级元素的高和图片的高相同，在图片属性中设置vertical-align：top，同时设置文字的height和line-height即可居中。 9、内部绝对定位，overflow失效 绝对定位元素不总是被父级元素overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块（含position:relative/absolute/fixed声明的父级元素）之间的时候。 解决：父级元素设为包含块 10、使用列表制作二级导航的时候，二级列表会相对于一级列表有一定偏差 解决：将二级列表设为绝对定位并且清楚浮动即可 五、总结与展望 通过五天的HTML5前端开发实训学习，虽然时间不长，但学的东西很全面，有很大的收获，在这里总结一些心得体会。 主要来说，H5用于大体界面的编写，如：需要一些基本的输入框、单选按钮、普通按钮、以及下拉选择框等，标记的学习是一门语言最基础的部分，熟练的使用这些标记其实不是很大的问题。 而CSS3呢则是主要用于对整体界面细节化的修饰。比如：一个普通按钮，输入框边角默认是直角，可以用CSS来改变其形状。还可以用来设置不同的样式。CSS是最麻烦的，而且也是调试频率最大的，因为在H5中取消了之前一些界面的布局样式，导致我们需要用CSS来替代。 另外在CSS3中界面的排版也是一个关键的方面。屏幕大小及分辨率的不同，会导致我们的界面在绝大部分的设备上能按照我们设计的来正常显示。但是对于一小部分的设备来说就很有可能会导致我们布局的设计会偏离正常的轨道。这就需要不断的调试以便更好地满足不同的设备。 在JavaScript中的主要是要跟服务端打交道，实现数据交互。现代JavaScript为前端开发带来了不可替代的技术革新。所以我们不仅要学习JavaScript的语法知识，还要学习利用它实现DOM元素的使用，学会面向对象的编程思想。但JavaScript是HTML5实训中很难理解和学习的部分，像一些对属性的操作的标记之类，懂得怎么用，但不是很熟悉，经常在操作的时候要去查手册。学的最不好的一个地方应该是将数组中的元素按照一定的规则或者顺序添加到指定或对应的表格中，目前对JavaScript的基础部分理解就是大量算法的集合，很多时候都会用到函数，只是多了一些找元素和对元素绑定标记的过程，最重要的还是构造函数，调用函数的过程。 在实训中除了学到了许多新的知识，锻炼了我做项目的能力，提高了独立思考问题、自己动手操作的能力，丰富了经验，将会有利于我更好的适应以后的工作。最后，我要感谢这次十分有意义的实训，使我们学到了很多，也领悟了很多。
链接：https://pan.baidu.com/s/1nkWCEu54oPENHALEYu9cLA 提取码：ktcx
