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

下載本文檔

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

文檔簡介

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

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

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

單列布局01

兩列布局02

三列布局03

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

單列布局頁面

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

二列布局頁面

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

三列布局頁面

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

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

通欄布局頁面

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

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

樣式定義10.3.2定義布局塊CSS樣式樣式定義樣式表文件代碼如下。10.3.2定義布局塊CSS樣式樣式定義瀏覽網(wǎng)頁，效果如圖所示。學院網(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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論