網頁制作項目15

項目15

使用CSS樣式布局頁面項目描述

知識儲備

實踐向導

能力拓展

退出項目小結

15.1項目描述

在學習CSS基礎知識之后，進一步學習更高級的CSS應用技能，使用CSS樣式表進行網頁布局。本項目主要通過實例講解CSS布局的手工編寫和工具運用，完成“海思教育”網站首頁的草稿布局和首頁的布局美化。在最后一個任務中增加了CS6的流體網格布局內容。返回15.2知識儲備15.2.1常用布局標記15.2.2盒子模型15.2.3元素定位方法15.2知識儲備

15.2.1常用布局標記1.塊級元素

div–區(qū)塊標記center–居中對齊塊h1–h6標題hr-水平分隔線form-交互表單dl-定義列表menu-菜單列表p-段落pre-格式化文本ol–有序列表ul–無序列表table-表格表15-1常見的塊級元素(blockelement)15.2知識儲備

15.2.1常用布局標記2.行內元素

span-常用內聯(lián)容器img-圖片b-粗體font-字體設定select-項目選擇br-換行

label-表格標簽sub-下標input-輸入框strong-粗體強調u-下劃線a-錨點textarea-多行文本輸入框

表15-2常見的行內元素(inlineelement)15.2知識儲備

15.2.2

盒子模型

CSS盒子模型是CSS中最重要的概念之一，也叫框模型。一個盒子模型的基本組成如圖15-1所示。圖15-1盒子模型15.2知識儲備

15.2.2

盒子模型1.內邊距

CSS中，padding屬性定義元素邊框與元素內容之間的空白區(qū)域。padding屬性接受長度值或百分比值，但不允許使用負值。例如，希望所有元素的各邊都有10像素的內邊距，只需如下規(guī)則：

*{padding:10px;}

這里的符號“*”是通用選擇器，即所有的標記都選擇，與DOS操作系統(tǒng)中通配符“*”作用相似。也可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值，例如：

div{padding:5px0.5em0px40%;}15.2知識儲備

15.2.2

盒子模型2.外邊距

圍繞在元素邊框的空白區(qū)域是外邊距。設置外邊距會在元素外創(chuàng)建額外的“空白”。設置外邊距的最簡單的方法就是使用margin屬性，這個屬性接受任何長度單位可以是像素、英寸、毫米或em，百分數值甚至負值都可以。margin還可以設置為auto。當然，常見的做法是為外邊距設置長度值。

例如：h1{margin:10px0px15px5px;}

上例為h1元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素(px)，與內邊距的設置相同，這些值的順序是從上外邊距(top)開始圍著元素順時針旋轉的。15.2知識儲備

15.2.2

盒子模型3.外邊距的合并當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。如圖15-3所示。圖15-3邊距合并15.2知識儲備

15.2.2

盒子模型3.外邊距的合并

當元素發(fā)生嵌套時（這里內邊距為0），內外元素的上下外邊距也會發(fā)生合并。如圖15-4所示。圖15-4嵌套邊距合并15.2知識儲備

15.2.3元素定位方法1.float浮動定位

浮動定位（float）是CSS排版中最常用的手段，圖片的浮動可以使文字環(huán)繞圖片。浮動的元素仍然是網頁流的一部分，常常通過對DIV元素應用float浮動來進行定位。

屬性float的值可以設置為left、right或者默認值none。當設置了元素向左或者向右浮動時，元素會向其父元素的左側或右側靠緊。15.2知識儲備

15.2.3元素定位方法2.position定位CSS中通過position屬性可以選擇四種不同類型的定位：Static（無定位）：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。Relative（相對定位）：元素框偏移一定距離。元素仍保持形狀，它原本所占的位置保留。Absolute（絕對定位）：元素框從標準流刪除，并相對于其包含塊級元素定位。包含塊級元素可以是文檔中的另一個元素。元素原先在正常文檔流中所占的位置會失去。元素定位后生成一個塊級元素，無論定位之前是否是塊級元素。Fixed（相對于窗口的固定定位）：表現類似于把position設置為absolute，固定在瀏覽器的某個位置。IE6不支持該屬性。15.2知識儲備

15.2.3元素定位方法2.position定位圖15-7相對定位圖15-8絕對定位返回15.3實踐向導任務15-1手工代碼草稿布局

通常在進行頁面布局前，都會對頁面的“盒子”擺放進行一個簡單的規(guī)劃，構筑基礎的頁面結構，然后再進行具體的設置和美化。在Dreamweaver中手工編寫代碼進行基礎布局，是前端工作的基本功之一。對一個頁面進行如圖15-9所示的簡單色塊結構布局。圖15-9草稿頁面規(guī)劃15.3實踐向導任務15-1手工代碼草稿布局1.固定容器位置以及設置容器大小body{margin:0px; padding:0px; }#container{width:960px;padding:5px;background-color:#CCC;margin:autoauto;}15.3實踐向導任務15-1手工代碼草稿布局2.設置頁首部分#head{ height:120px; background-color:#99F; }

這里并沒有對容器head的寬度進行設置是因為在它所占的行中只有一個元素，會自動伸展到父元素的寬度960px。15.3實踐向導任務15-1手工代碼草稿布局3.設置中間各板塊元素#guide{ width:260px; height:400px; float:left; background-color:#966; }#banner{ width:700px; height:200px; float:left; background-color:#069; }#news,#ad{ width:350px; height:200px; float:left; background-color:#999; }15.3實踐向導任務15-1手工代碼草稿布局4.底部色塊#footer{ height:100px; background-color:#96C; float:left; width:960px; }

這里定義了寬度，因為在某些瀏覽器下，若不定義頁腳寬度，容器將無法伸展。完成頁腳后發(fā)現頁面中的父容器并未隨著內部容器的增加而自動擴展高度，因此要對其進行固定高度為620px，完成后效果如圖15-10所示。15.3實踐向導任務15-2編寫純CSS彈出菜單1.編寫HTML代碼<ul><li><ahref="#">網站首頁</a></li><li><ahref="#">服務項目</a><ul><li><ahref="#">網站建設</a></li><li><ahref="#">廣告設計</a></li><li><ahref="#">影視制作</a></li></ul></li><li><ahref="#">案例精選</a><ul><li><ahref="#">地球集團</a></li><li><ahref="#">火星集團</a></li><li><ahref="#">銀河企業(yè)</a></li></ul></li><li><ahref="#">聯(lián)系我們</a></li></ul>圖15-13菜單標準流15.3實踐向導任務15-2編寫純CSS彈出菜單2.編寫CSS代碼ul{margin:0px;padding:0px;}ulli{float:left;display:inline;height:30px;width:100px;list-style:none;}ullia{color:#FFF;text-decoration:none;line-height:29px;width:91px;margin:0px;padding:0px0px0px8px;display:block;border-right:solid1px#ccc;border-bottom:solid1px#ccc;background:#808080;font-family:微軟雅黑;font-size:0.9em;}圖15-12彈出菜單原始狀態(tài)15.3實踐向導任務15-3對任務15-1手工代碼草稿布局的頁面進行詳細制作，并對頁面進行美化，網頁效果如圖15-14所示。1.頁首的修飾圖15-14首頁效果圖15.3實踐向導任務15-31.頁首的修飾#head{ height:119px; background:url(15-5/logo.jpg)centerleftno-repeat; background-color:#FFF; border-bottom:#0361pxsolid; }15.3實踐向導任務15-32.中間主體部分①導航菜單

導航菜單是本頁面的難點，任務15-2中介紹了如何使用UL標記制作純CSS彈出菜單，這里的豎排菜單無需彈出，原理完全相同且更加簡單。首先應準備好HTML標準流，再加工div本身以及ul邊框。圖15-15修改UL前后效果圖15.3實踐向導任務15-32.中間主體部分接著可以制作“按鈕”，主要通過li與a標記完成，li負責定位，a負責表現出按鈕的形狀和簡單的鼠標懸停效果。有兩個關鍵點，首先是a標記的高度要和行高一致，文字才能垂直居中，其次display屬性設置為block，a標記的可選區(qū)域才會呈現按鈕狀。這里利用左側和頂部的margin值，強行把span拉到了應該顯示的位置，這也是一種定位的技巧。但是這種定位方式會在不同瀏覽器中可能有不同的表現。Span標記就位后空位依然很大，可以為每個按鈕增加一個背景圖案進一步美化。圖15-17導航菜單15.3實踐向導任務15-32.中間主體部分②右側橫幅banner部分

這個部分一般都是放置圖片切換的FLASH或者JS特效，或者是固定的大幅圖片，主要依靠的不是CSS技術而是圖像處理或者動畫制作技術，這里只需將其載入即可，這里我們插入一個靜態(tài)圖片。圖15-18橫幅效果15.3實踐向導任務15-32.中間主體部分③新聞板塊的設計

一般顯示文本片段或者文章列表的版塊，通常都有標題欄，以及正文內容塊。若是文本片段，則由h1-h6和p標記構成，文章列表則由h1-h6和ul-li-a列表標記構成。圖15-19新聞列表15.3實踐向導任務15-32.中間主體部分④廣告版塊的設計

新聞旁邊的廣告版塊，用來放置人物評論，這個部分的內容采取圖片、簡介二者合一的形式，下面先列出HTML標準流代碼。左側放置IMG圖片標記，右側放置P標記，每行容納一個IMG和一個P標記。圖15-20廣告版塊15.3實踐向導任務15-33.頁腳的設計#footer{ height:89px; float:left; width:950px; border-top:#0361pxsolid; background-color:#F9F9F9; }#footerp{ font-size:12px; color:#666; text-align:center; line-height:20px; }15.3實踐向導任務15-4流體網格布局1.新建流體網格

圖15-22設備中央的小框中填寫的是格數，即把頁面劃分成幾個等分。下方的格中填寫的是頁面內容寬度占整個瀏覽界面的百分比，可以根據實際需要的情況填寫。本例中將設置為：移動設備中15列寬百分比，桌面電腦用12格網格。單擊“創(chuàng)建”按鈕后，首先會詢問保存CSS文件的位置和命名，這里命名為main.css。先保存HTML文件本身，然后保存CSS文件，保存時系統(tǒng)會自動將流體網格所需要的boilerplate.css和respond.min.js一起復制到目標文件夾。圖15-22三種預設15.3實踐向導任務15-4流體網格布局2.使用流體網格布局

為了方便操作，可以將界面調整為“經典”模式，然后通過工具菜單新建網格。注意：默認頁面上會有一些文字和一個DIV元素，可以刪除它，但是不能把<divclass="gridContainerclearfix"></div>這部分DIV標記刪除，否則流體網格將失去作用。單擊按鈕“插入流體網格布局標簽”后，會詢問是否新建一行（即是否作為塊級元素），作為網頁頭部，一般都獨占一行。將其命名為“top”后單擊“確定“按鈕。CS6會自動生成一個DIV標記的代碼，并在其中用文字注明：這是布局Div標簽“top”的內容。如圖15-24所示。圖15-24“插入流體網格布局Div標簽”對話框15.3實踐向導任務15-4流體網格布局2.使用流體網格布局

用同樣的方法再添加一個DIV，命名為“content”同樣獨占一行。而接下來的“interview”版塊因為是多個分欄的情況，所以不能勾選“新建行”。建立之后會發(fā)現效果如圖15-25所示，它表示這個Div并非當作傳統(tǒng)塊級元素處理：注意：可以通過“可視化助理”來選擇是否顯示淺綠色的流體網格布局參考線，如圖15-26所示圖15-25流體網格非獨占行圖15-26可視化助理15.3實踐向導任務15-4流體網格布局2.使用流體網格布局

同樣再增加一個并列的非獨占DIV“pictures”，最后增加一個底部用的版塊“bottom”，一共5個主要版塊。接下來將要用的內容填入HTM文檔對應的版塊位置，成為一個無CSS的標準流文件。最終效果如圖15-27所示。圖15-27標準流HTML15.3實踐向導任務15-4流體網格布局2.使用流體網格布局

可以使用鼠標操作來控制布局，拖動#content的右側邊緣，向左移動，縮小它的范圍到四格，軟件會自動吸附臨近的網格，不用擔心鼠標拖放不夠精確。效果如圖15-28所示。

若從左側縮放Div，并不會有從右側縮放相同的效果，而是產生相應的外邊距寬度。以同樣的方式，將#picture和#interview縮小到四格寬度。這里的頁面并不理想，因此需要為頁面編寫基本的排版樣式，樣式保存在文件type.css中，可以直接導入使用，樣式的美化方法在前一任務中已有敘述。單擊“附加樣式表”按鈕，添加type.css樣式表。添加后的效果如圖15-29所示。圖15-28拖放改變網格寬度圖15-29網頁布局效果15.3實踐向導任務15-4流體網格布局3．布局適應性調整

在做完普通的流體網格調整