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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

添加菜單欄列表圖1-4添加網(wǎng)頁菜單欄列表內(nèi)容后的菜單欄效果圖要完成D清單網(wǎng)頁菜單欄列表內(nèi)容的制作，需要：學(xué)習(xí)HTML列表的結(jié)構(gòu)組成、無序列表及有序列表的語法；分析D清單頁面中的列表內(nèi)容，正確選擇及使用列表標(biāo)簽完成D清單網(wǎng)頁中的列表制作。任務(wù)分析圖1-4-1D清單菜單欄展開后的網(wǎng)頁效果圖

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

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

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

<ol> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </li> <li>網(wǎng)頁后臺的學(xué)習(xí)

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

溫馨提示

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

評論

0/150

提交評論