联盟简介模块分析与设计.pptxVIP

《物联网Web前端开发基础》课程 联盟简介模块分析与设计 【任务7-8】制作简介模块效果分析——结构分析“简介”模块整体由一个大盒子控制，其内部包含标题标签h2、定义列表dl和无缝滚动模块div 【任务7-8】制作简介模块效果分析——样式分析需设置最外层div的宽和外边距，使其在页面中居中显示。还需设置标题和定义列表内的文字样式及无缝滚动模块的大小、外边距、溢出隐藏等样式。 【任务7-8】制作简介模块效果分析——JavaScript特效分析图片展示是通过无缝滚动的效果完成的，当鼠标移动到图片上时停止滚动，当鼠标移出时继续滚动。 【任务7-8】制作简介模块模块制作——搭建结构 h2工业互联产业联盟简介/h2 dl dt/dt dd class=txt1你知道工业互联产业联盟吗？/dd dd class=txt2为加快我国工业互联网发展，推进工业互联网产学研用协同发展，在工业和信息化部的指导下，2016年2月1日由工业、信息通信业、互联网等领域百余家单位共同发起成立工业互联网产业联盟。在工业和信息化部的指导下，依托各工作组和特设组，与联盟成员单位共同努力，先后从工业互联网顶层设计、技术研发、标准研制、测试床、产业实践、国际合作等多方面开展工作，发布了工业互联网白皮书、工业互联网平台、测试床、优秀应用案例等系列成果，广泛参与国内外大型工业互联网相关活动，为政府决策、产业发展提供智力支持，联盟已经成为我国具有国际影响力的工业互联网产业生态载体。/dd /dl 【任务7-8】制作简介模块模块制作——搭建结构 div class=imgbox id=imgbox span a href=#img src=images/1.jpg //a a href=#img src=images/2.jpg //a a href=#img src=images/3.jpg //a a href=#img src=images/4.jpg //a /span /div 【任务7-8】制作简介模块模块制作——添加样式#introduction{ width:980px; margin:0 auto;}h2{ font-weight:100; font-size:24px; color:#585858; padding:40px 0; border-bottom:7px solid #ececec;}#introduction dl{ width:980px; height:220px;} 【任务7-8】制作简介模块模块制作——添加样式#introduction dt{ width:145px; height:220px; background:url(../images/introduction.jpg) center center no-repeat; float:left;}#introduction dd{ width:780px; padding:20px 0 0 30px; float:left;} 【任务7-8】制作简介模块模块制作——添加样式#introduction .txt1{ font-size:24px; color:#ffa800;}#introduction .txt2{ color:#6b6862; line-height:24px;}.imgbox{ width:940px; padding:0 20px; white-space:nowrap; overflow:hidden;} 【任务7-8】制作简介模块模块制作——添加样式.imgbox img{ width:226px; height:129px; padding:2px;}.imgbox a{margin-right:20px;} 【任务7-8】制作简介模块模块制作——添加JS效果var speed = 50; //定义滚动速度 var imgbox = document.getElementById(imgbox); imgbox.innerHTML += imgbox.innerHTML; //复制一个span，用于无缝滚动 var span = imgbox.getElementsByTagName(span); //获取两个span元素 var timer1 = window.setInterval(marquee