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

下載本文檔

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

文檔簡(jiǎn)介

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

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

<ol> <li>ASP</li> <li>PHP</li> <li>CGI</li> </ol> </li></ol>顯示效果如下：課堂練習(xí)1-4-4有序列表和無序列表的嵌套使用圖1-4-4有序列表和無序列表的嵌套使用任務(wù)實(shí)施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>高級(jí)會(huì)員</li>

溫馨提示

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

評(píng)論

0/150

提交評(píng)論