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

下載本文檔

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

文檔簡介

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

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

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

單列布局01

兩列布局02

三列布局03

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

單列布局頁面

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

二列布局頁面

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

三列布局頁面

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

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

通欄布局頁面

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

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

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

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論