項目五 使用DIV+CSS布局網頁之【校園文學主頁】
】
一.
最終效果，制作過程的視頻如下。
圖5-1
【校園文學主頁】的制作視頻如下所示：
二.
制作校園文學主頁的過程
（一）制作校園文學主頁的導航欄。
1、網頁初始化。
打開CSS面板→新建CSS樣式→【選擇器類型】選擇復合內容→輸入*→設置內外間距均為0。如圖5-2所示：
PS：在*CSS樣式設置中添加：字體【微軟雅黑】，字號大小14。
圖5-2 網頁初始化
2、添加LOGO圖片
方法：
（1）添加DIV→命名head→為此DIV添加CSS樣式→【方框】中設置寬高800*65，居中。
（2）添加DIV→命名head1→為此DIV添加CSS樣式→【方框】中設置寬高230*65，向左浮動，并在【背景】中添加LOGO圖。效果如圖5-3所示。
圖5-3 添加LOGO圖片
3、制作導航等文字
方法：
（1）添加DIV→命名nav→為此DIV添加CSS樣式→【方框】中設置寬高470*65，向左浮動。在名為【nav】的DIV中，添加文字。其中：
A、“歡迎訪問校園文學網頁”設置為【標題3】，文字顏色為“深紅色”，居中，設置上下內間距6px。如圖5-4所示。
圖5-4 設置“歡迎訪問校園文學網頁”文字效果
B、“首頁 校園文化作品……”設置為導航條。分為以下幾步：
圖5-5設置標簽樣式
圖5-6 設置標簽樣式
圖5-7 設置標簽樣式
圖5-8 設置【a:hover】樣式
（2）添加DIV→命名head2 →為此DIV添加CSS樣式→【方框】中設置寬高100*65，向左浮動。在名為【nav】的DIV中，添加文字并設置文字的顏色，間距等。
至此，校園文學主頁的導航欄制作完成。最終效果如圖5-9所示。
圖5-9 導航條的最終效果
（二）制作校園文學主頁的主體內容。
1、添加主體內容DIV
方法：
（1）添加DIV→命名→為此DIV添加CSS樣式→【方框】中設置寬高800*580，居中。
2、設置主體左邊的內容
方法：
（1）添加DIV→命名left →為此DIV添加CSS樣式→【方框】中設置寬高200*570，上間距10px，左浮動。添加文字，并對文字進行設置，效果如圖5-10所示。
圖5-10 主體左邊內容的最終效果
3、設置主體右邊的內容
方法：
（1）添加DIV→命名right →為此DIV添加CSS樣式→【方框】中設置寬高560*580，左浮動，左間距40px。添加文字，并對文字進行設置。
（2）設置文字“校園文學作品征稿啟事”為【標題2】，設置標簽→CSS樣式中文字大小20px，顏色為深綠色，居中。如圖5-11所示。
圖5-11設置文字“校園文學作品征稿啟事”
（3）添加有序列表標簽，如圖5-12所示。
圖5-12設置有序列表
（4）添加無序列表標簽css設置a標簽居中css設置a標簽居中，如圖5-13所示。
圖5-13設置無序列表
至此，校園文學主頁的主體內容制作完成，稍加調整。最終效果如圖5-14所示。
圖5-14 主體右邊內容的最終效果
（三）制作校園文學主頁的尾部內容。
方法：
（1）添加DIV→命名foot→為此DIV添加CSS樣式→【方框】中設置寬高800*50。添加文字，并對文字進行設置。
最終效果如圖5-15所示。
圖5-15尾部內容的最終效果
至此，校園文學主頁制作完成，稍加調整，按F12預覽。
小羊大羊