任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)_第1頁(yè)
任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)_第2頁(yè)
任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)_第3頁(yè)
任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)_第4頁(yè)
任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩28頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

任務(wù)10布局學(xué)院網(wǎng)站主頁(yè)Web前端開(kāi)發(fā)案例教程HTML5+CSS3項(xiàng)目式微課版網(wǎng)頁(yè)是由若干版塊構(gòu)成的，就像一張報(bào)紙的內(nèi)容劃分為若干版塊，各版塊經(jīng)過(guò)合理的排版，使版面清晰、易讀。在制作網(wǎng)頁(yè)時(shí)，也需要對(duì)網(wǎng)頁(yè)進(jìn)行“排版”，網(wǎng)頁(yè)的“排版”是通過(guò)布局來(lái)實(shí)現(xiàn)的。本任務(wù)對(duì)學(xué)院網(wǎng)站中的主頁(yè)進(jìn)行布局，將主頁(yè)劃分為多個(gè)塊，使用HTML5標(biāo)記定義這些塊，并對(duì)每個(gè)塊定義CSS樣式進(jìn)行布局。通過(guò)本任務(wù)的實(shí)現(xiàn)，掌握常用網(wǎng)頁(yè)的布局方式，實(shí)現(xiàn)各種網(wǎng)頁(yè)布局。任務(wù)3布局學(xué)院網(wǎng)站主頁(yè)任務(wù)10任務(wù)效果

學(xué)院網(wǎng)站主頁(yè)劃分布局塊

布局效果根據(jù)學(xué)院網(wǎng)站主頁(yè)效果圖，對(duì)主頁(yè)的版塊進(jìn)行劃分，如左圖所示。創(chuàng)建網(wǎng)頁(yè)，對(duì)學(xué)院網(wǎng)站的主頁(yè)進(jìn)行布局。布局效果如右圖所示。知識(shí)點(diǎn)

單列布局01

兩列布局02

三列布局03

通欄布局01任務(wù)3布局學(xué)院網(wǎng)站主頁(yè)任務(wù)1010.2知識(shí)準(zhǔn)備HTML5+CSS3在布局時(shí)首先將頁(yè)面分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。常用的HTML5+CSS3布局方式有單列布局、兩列布局、三列布局和通欄布局等。網(wǎng)頁(yè)的主體內(nèi)容寬度現(xiàn)在一般采用1000px～1920px。下面通過(guò)示例介紹常用的網(wǎng)頁(yè)布局方式。10.2.1單列布局單列布局將頁(yè)面上的塊從上到下依次排列，即單列布局。例10-1將頁(yè)面進(jìn)行單列布局，效果如圖所示，文件名：example01.html。

單列布局頁(yè)面

單列布局10.2.1單列布局樣式表文件style1.css，代碼如下。單列布局10.2.1單列布局注意：通常給塊定義類(lèi)選擇器名稱(chēng)時(shí)，都會(huì)遵循一些常用的命名規(guī)范。案例中的命名便是按照規(guī)范命名的。10.2.2二列布局二列布局單列布局雖然統(tǒng)一、有序，但會(huì)讓人覺(jué)得呆板，所以在實(shí)際網(wǎng)頁(yè)制作中，會(huì)采用二列布局。二列布局實(shí)際上是將中間內(nèi)容分成左、右兩部分。10.2.2二列布局二列布局例10-2將頁(yè)面進(jìn)行二列布局，效果如圖所示，文件名為：example02.html。

二列布局頁(yè)面

頁(yè)面的HTML結(jié)構(gòu)代碼如下。10.2.2二列布局二列布局外部樣式表文件style2.css，代碼如下。10.2.2二列布局二列布局10.2.2二列布局二列布局注意：在上面的代碼中，為右邊的塊設(shè)置了右浮動(dòng)，實(shí)際上也可以設(shè)置左浮動(dòng)，但如果設(shè)置左浮動(dòng)，就需要設(shè)置margin-left屬性，使其與左邊的塊間隔一定的距離，最終效果是一樣的。讀者可以自行嘗試。對(duì)于內(nèi)容比較多的網(wǎng)站，有時(shí)需要采用三列布局。三列布局實(shí)際上是將中間內(nèi)容分成左、中、右三部分。10.2.3三列布局三列布局10.2.3三列布局例10-3將頁(yè)面進(jìn)行三列布局，效果如圖所示，文件名：example03.html。三列布局

三列布局頁(yè)面

10.2.3三列布局頁(yè)面的HTML結(jié)構(gòu)代碼如下：三列布局10.2.3三列布局外部樣式表文件style3.css，代碼如下：三列布局注意：因?yàn)楹芏酁g覽器在顯示未指定width屬性的浮動(dòng)元素時(shí)會(huì)出現(xiàn)Bug。所以，一定要為浮動(dòng)的元素指定width屬性?，F(xiàn)在很多流行的網(wǎng)站采用通欄布局，即網(wǎng)頁(yè)中的一些模塊，如頭部、導(dǎo)航和頁(yè)面底部等經(jīng)常需要通欄顯示。也就是說(shuō)這些模塊無(wú)論頁(yè)面放大或縮小，這些通欄模塊的寬度始終保持與瀏覽器一樣的寬度。10.2.4通欄布局通欄布局

學(xué)院網(wǎng)站的布局就采用了該種布局，如圖所示。10.2.4通欄布局通欄布局

通欄布局頁(yè)面

導(dǎo)航欄和頁(yè)面底部為通欄顯示，它們與瀏覽器的寬度保持一致。通欄布局的關(guān)鍵在于在通欄模塊的寬度設(shè)置為100%，即與瀏覽器一樣寬。該布局頁(yè)面在10.3節(jié)任務(wù)中實(shí)現(xiàn)。前面所講的布局是網(wǎng)頁(yè)中的基本布局，實(shí)際上，在設(shè)計(jì)網(wǎng)站時(shí)需要綜合運(yùn)用這幾種布局，實(shí)現(xiàn)各種各樣的網(wǎng)頁(yè)布局樣式。10.2.4通欄布局通欄布局任務(wù)3布局學(xué)院網(wǎng)站主頁(yè)任務(wù)1010.3.1搭建布局塊結(jié)構(gòu)在項(xiàng)目chapter10中再新建一個(gè)網(wǎng)頁(yè)文件，文件名：index.html，在文件中首先定義頁(yè)面布局的結(jié)構(gòu)，然后定義各個(gè)布局塊的樣式。分析學(xué)院網(wǎng)站主頁(yè)布局頁(yè)面效果，該頁(yè)面采用的是通欄布局。先搭建該頁(yè)面的結(jié)構(gòu)。單擊文件index.html，打開(kāi)該文件，添加頁(yè)面結(jié)構(gòu)代碼如下。頁(yè)面結(jié)構(gòu)10.3.1搭建布局塊結(jié)構(gòu)上述代碼定義了網(wǎng)頁(yè)需要的布局塊，用<header>標(biāo)記放置頁(yè)面頭部?jī)?nèi)容，用<nav>標(biāo)記構(gòu)建頁(yè)面導(dǎo)航，用<footer>標(biāo)記存放頁(yè)腳信息，其它塊使用<div>標(biāo)記。此時(shí)瀏覽網(wǎng)頁(yè)，效果如圖所示。10.3.1搭建布局塊結(jié)構(gòu)頁(yè)面結(jié)構(gòu)沒(méi)有添加樣式的頁(yè)面

搭建頁(yè)面布局塊后，使用CSS外部樣式表設(shè)置頁(yè)面中各個(gè)塊的樣式，創(chuàng)建外部樣式表文件style.css，在index.html文件的<head>標(biāo)記內(nèi)添加如下代碼，將外部樣式表文件鏈接到頁(yè)面文件中。10.3.2定義布局塊CSS樣式<linkhref="style.css"rel="stylesheet"type="text/css"/>

樣式定義10.3.2定義布局塊CSS樣式樣式定義樣式表文件代碼如下。10.3.2定義布局塊CSS樣式樣式定義瀏覽網(wǎng)頁(yè)，效果如圖所示。學(xué)院網(wǎng)站主頁(yè)采用通欄布局，目前采用這種

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論