《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

banner和場景選擇模塊分析與設(shè)計(jì)【任務(wù)6-8】制作banner和場景選擇模塊效果分析——結(jié)構(gòu)分析“banner”模塊由一張圖片構(gòu)成，使用<img>標(biāo)簽定義?！皥鼍斑x擇”模塊由無序列表<ul>構(gòu)成，每個(gè)場景欄目分別由<li>標(biāo)簽搭建結(jié)構(gòu)。另外，場景欄目中的文字說明可以通過<a>標(biāo)簽定義效果分析——樣式分析分析“banner和場景選擇”模塊，需要定義banner的固定寬高并設(shè)置在瀏覽器中居中對(duì)齊。另外，觀察場景模塊，需要設(shè)置<li>左浮動(dòng)使其在一行內(nèi)排列。此外，需要將<a>元素轉(zhuǎn)為行內(nèi)塊元素，控制其邊框效果，并設(shè)置鼠標(biāo)移上<a>元素時(shí)背景和邊框產(chǎn)生的變化?！救蝿?wù)6-8】制作banner和場景選擇模塊模塊制作——搭建結(jié)構(gòu)<divid="banner"><imgsrc="images/banner.jpg"/></div><ulid="week"><li><ahref="#">業(yè)主管理</a></li><li><ahref="#"class="next">預(yù)警管理</a></li><li><ahref="#"class="next">車輛管理</a></li><li><ahref="#"class="next">燃?xì)獗O(jiān)測</a></li><li><ahref="#"class="next">電子地圖</a></li><li><ahref="#"class="next">故障管理</a></li><li><ahref="#"class="next">場景管理</a></li></ul>【任務(wù)6-8】制作banner和場景選擇模塊模塊制作——添加樣式#banner{ width:980px; height:519px; margin:0auto;}#week{ width:980px; height:80px; margin:30pxauto;font-size:16px;}#weekli{float:left;box-shadow:0px0px10px#3efbff;}【任務(wù)6-8】制作banner和場景選擇模塊模塊制作——添加樣式#weeka{ display:inline-block; width:137px; height:50px; border:2pxsolid#ffc393; text-align:center; padding-top:28px; background:#fff8f2;color:#99d5e0;}#week.next{border-left:0;}#weeka:hover{ background:#fff; border-bottom:2pxsolid#fff;co