banner和交通分类模块分析与设计

《物联网Web前端开发基础》课程

banner和交通分类模块分析与设计【任务4-6】制作banner模块和交通分类模块效果分析——结构分析“banner模块”结构非常简单，由一张图片构成。“交通分类模块”由一个大盒子构成，该模块主要包括三部分，分别由三对<dl>标签搭建结构。其中，左边的图片由<dt>标签来定义，右边的内容部分由<dd>标签定义。另外，内容部分的文字说明可以通过<a>标签定义。【任务4-6】制作banner模块和交通分类模块效果分析——样式分析“交通分类模块”的左、中、右三部分在同一行排列，需要对<dl>标签设置浮动。同样，对于每个模块中的<dt>标签、<dd>标签也需要应用浮动。当鼠标移上超链接时，交通分类模块的背景颜色会发生变化。【任务4-6】制作banner模块和交通分类模块模块制作——搭建结构<divid="content"><divclass="banner"><imgsrc="images/banner.jpg"/></div><divclass="style_bg"><divclass="style"><dl><dtclass="left1"></dt><ddclass="left2"><ahref="#">智慧高速</a></dd><dtclass="left3"></dt><ddclass="left4"><ahref="#">智慧路网</a></dd></dl><dl><dtclass="center1"></dt><ddclass="center2"><ahref="#">ETC</a></dd><dtclass="center3"></dt><ddclass="center4"><ahref="#">交通运输</a></dd></dl><dlclass="third"><dtclass="right1"></dt><ddclass="right2"><ahref="#">交通管理</a></dd></dl></div></div></div>【任务4-6】制作banner模块和交通分类模块模块制作——搭建结构#content{ width:980px; margin:0auto;}.style_bg{ width:908px; height:330px; background:#ec6e47; padding:10px36px5px;}.style{ width:892px; height:314px; background:#fff; padding:8px10px8px6px;}【任务4-6】制作banner模块和交通分类模块模块制作——添加样式.styledl{ width:279px; height:313px; float:left; margin-left:4px;}.style.third{width:322px;}.styledt,.styledd{float:left;}.style.left1,.style.left3,.style.center1,.style.center3{width:162px;}.style.left2,.style.left4,.style.center2,.style.center4,.style.right2{width:117px;}【任务4-6】制作banner模块和交通分类模块模块制作——添加样式.style.left1,.style.left2,.style.center1,.style.center2{margin-bottom:8px;}.style.left1{ height:169px; background:url(../images/pic01.jpg)no-repeat;}.style.left2{ height:169px; line-height:169px;}.style.left3{ height:137px; background:url(../images/pic02.jpg)no-repeat; }【任务4-6】制作banner模块和交通分类模块模块制作——添加样式.style.left4{ height:137px; line-height:137px; }.style.center1{ height:117px; background:url(../images/pic03.jpg)no-repeat;}.style.center2{ height:117px; line-height:117px;}【任务4-6】制作banner模块和交通分类模块模块制作——添加样式.style.center3{ height:188px; background:url(../images/pic04.jpg)no-repeat;}.style.center4{ height:188px; line-height:188px;}.style.right1{ width:205px; height:314px; background:url(../images/pic05.jpg)no-repeat;}【任务4-6】制作banner模块和交通分类模块模块制作——添加样式.style.right2{ height:314px; line-height:314px;}