HTML5+CSS3網頁設計與制作課件：添加菜單欄列表_第1頁
HTML5+CSS3網頁設計與制作課件：添加菜單欄列表_第2頁
HTML5+CSS3網頁設計與制作課件：添加菜單欄列表_第3頁
HTML5+CSS3網頁設計與制作課件：添加菜單欄列表_第4頁
HTML5+CSS3網頁設計與制作課件：添加菜單欄列表_第5頁
已閱讀5頁，還剩19頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網頁設計與制作添加菜單欄列表項目將通過“制作一個D清單網頁廣告單頁”項目，即通過制作一個HTML頁面來承載網頁制作知識，完成網頁開發環境搭建、HTML5標簽、CSS3疊層樣式和響應式布局等的學習。項目目標D清單是某公司推出的一款跨平臺同步的待辦事項和任務提醒軟件,旨在協助您完成待辦事務比如生日提醒,旅行安排,會議準備等以便更好的進行時間和事項管理。為了方便D清單應用的推廣，其公司需要制作一個該應用產品的介紹網頁。該頁面主要用于手機端進行分享推廣，同時也要求能夠在電腦端進行訪問。前端工程師小王所在的科技公司已經拿到了設計稿，如圖1所示。主管希望他擔任本次項目的前端工作，開發完成后將成果交付給程序員完成邏輯制作、測試和發布。項目情境圖1-1-1項目移動端和電腦端頁面截圖網頁制作的一般流程如下：項目分析項目發布需求分析規劃設計實施測試交付根據“移動優先”原則，我們需要制定項目完成的計劃：項目分析時間段1時間段2時間段3時間段4時間段5分析規劃實施階段1移動端內容制作階段2移動端格式制作階段3響應式制作測試與交付D清單前端開發甘特圖時間進度任務制作網頁內容本次任務要求根據D清單網頁效果圖的菜單欄內容，本任務需在的基礎上使用HTML列表添加菜單欄的內容（不考慮格式）。完成后的網頁菜單欄效果圖如圖1-4所示。任務描述

添加菜單欄列表圖1-4添加網頁菜單欄列表內容后的菜單欄效果圖要完成D清單網頁菜單欄列表內容的制作，需要：學習HTML列表的結構組成、無序列表及有序列表的語法；分析D清單頁面中的列表內容，正確選擇及使用列表標簽完成D清單網頁中的列表制作。任務分析圖1-4-1D清單菜單欄展開后的網頁效果圖

添加菜單欄列表知識與技能準備HTML的列表元素是一個由列表標簽封閉的結構，包含的列表項由<li></li>組成。1、列表的結構組成列表在網頁中占有比較大的比重，如信息分類、新聞列表、菜單、排行榜等，列表形式顯示信息非常整齊直觀，便于用戶理解，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等。HTML支持有序、無序和定義列表，常用列表結構有無序列表和有序列表。知識與技能準備無序列表就是列表結構中的列表項沒有先后順序的列表形式。無序列表適合列表項之間無級別順序關系的情況，大部分網頁應用中的列表均采用無序列表，其列表標簽采用<ul></ul>，其語法形式如下：1.1無序列表<ul><ul><li>列表項一</li><li>列表項二</li><li>列表項三</li></ul>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-4-1無序列表的簡單應用12345<ul><li>HTML</li><li>CSS</li><li>JS</li></ul>顯示效果如下：課堂練習1-4-1無序列表的簡單應用圖1-4-2無序列表的簡單應用知識與技能準備有序列表就是列表結構中的列表項有先后順序的列表形式，有序列表適合各項目之間存在順序關系的情況。其列表標簽采用<ol></ol>，其語法形式如下：1.2有序列表<ol><ol><li>列表項一</li><li>列表項二</li><li>列表項三</li></ol>打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-4-2有序列表的簡單應用12345<ol><li>HTML</li><li>CSS</li><li>JS</li></ol>顯示效果如下：課堂練習1-4-1無序列表的簡單應用圖1-4-3有序列表的簡單應用知識與技能準備當一個列表內容里還有細分的列表，就需要我們嵌套一個列表進去。語法結構與數學中的括號嵌套類似。2、嵌套列表打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-4-3列表的嵌套使用1234567891011121314<ol> <li>牛奶

<ol> <li>純牛奶</li> <li>高鈣奶</li> </ol> </li> <li>茶

<ol> <li>紅茶</li> <li>綠茶</li> </ol> </li></ol>顯示效果如下：課堂練習1-4-3列表的嵌套使用圖1-4-4列表的嵌套使用打開VisualStudioCode軟件，在<body>標簽中輸入如下代碼：課堂練習1-4-4有序列表和無序列表的嵌套使用12345678910111213141516<ol> <li>網頁前端技術

<ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </li> <li>網頁后臺的學習

<ol> <li>ASP</li> <li>PHP</li> <li>CGI</li> </ol> </li></ol>顯示效果如下：課堂練習1-4-4有序列表和無序列表的嵌套使用圖1-4-4有序列表和無序列表的嵌套使用任務實施1、打開中的index.html文件2、分析后采用HTML無序列表完成網頁菜單欄內容的制作，在之前的<header>網頁結構標簽中添加列表代碼。參考代碼如下：123456789101112<header><nav><ul><li>首頁</li><li>功能介紹</li><li>下載應用</li><li>高級會員</li>

溫馨提示

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

評論

0/150

提交評論