頭部及導航菜單模塊分析與設計_第1頁
頭部及導航菜單模塊分析與設計_第2頁
頭部及導航菜單模塊分析與設計_第3頁
頭部及導航菜單模塊分析與設計_第4頁
頭部及導航菜單模塊分析與設計_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

頭部及導航菜單模塊分析與設計【任務7-6】制作頭部及導航模塊效果分析——結構分析“頭部”及“導航”模塊分別包還在一個<div>大盒子里，其中頭部嵌套兩個<div>分別定義左右兩部分內容，導航部分的內容由無序列表<ul>搭建【任務7-6】制作頭部及導航模塊效果分析——樣式分析頭部模塊中，需要為插入圖片的兩個<div>分別設置左右浮動。由于導航部分背景顏色通欄顯示，因此需設置<div>的寬度100%，并設置<ul>的寬高及文字樣式，<ul>內的<li>左浮動，最后還需設置鼠標懸浮時<a>鏈接的樣式?！救蝿?-6】制作頭部及導航模塊模塊制作——搭建結構<!--headbegin--><divclass="head"><divclass="left"><imgsrc="images/logo.jpg"/></div><divclass="right"><imgsrc="images/phone.jpg"/></div></div><!--headend-->【任務7-6】制作頭部及導航模塊模塊制作——搭建結構<!--navbegin--><divid="nav"><ulclass="nav"><li><ahref="#"class="color_in">首頁</a></li><li><ahref="#">聯(lián)盟動態(tài)</a></li><li><ahref="#">成果發(fā)布</a></li><li><ahref="#">工作組</a></li><li><ahref="#">相關服務</a></li><li><ahref="#">案例展示</a></li><li><ahref="#">聯(lián)系我們</a></li></ul></div><!--navend-->【任務7-6】制作頭部及導航模塊模塊制作——控制樣式.head{ width:980px; margin:0auto; height:50px; padding-top:30px}.head.left{float:left;}.head.right{float:right;}#nav{ width:100%; background:#0373b9;}【任務7-6】制作頭部及導航模塊模塊制作——控制樣式.nav{ width:980px; height:35px; line-height:35px; margin:0auto; text-align:center; font-size:14px;}.navli{float:left;}【任務7-6】制作頭部及導航模塊模塊制作——控制樣式.nava{ display:inline-block; padding:040px;}.nava:hover{background:#2

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論