DIV和CSS布局

1、網頁布局和操作-2- 利用CSS操作表格和表單的樣式 利用CSS進行菜單制作 掌握表格布局技術及優(yōu)缺點 掌握框架布局及其優(yōu)缺點 了解層的概念及應用 熟練使用標簽 掌握DIV+CSS布局技術目標用CSS修飾文本簡單CSS屬性的應用CSS的文本屬性 CSS中控制文本樣式的屬性主要有font-屬性類和text-屬性類，再加上修改顏色的color屬性和行高line-height屬性。DW中這些屬性的設置是放在CSS規(guī)則定義面板的“類型”和“區(qū)塊”中的。 其中text-indent表示首行縮進，在每段開頭空兩格通常是用text-indent: 2em;來實現(xiàn)，text-decoration: none;

2、表示去掉下劃線，line-height: 150%;表示調整為1.5 倍行間距。文本對齊屬性(text-align)這個屬性用來設定文本的對齊方式。有以下值：left (居左，缺省值) right (居右) center (居中) justify (兩端對齊) 示例代碼如下：.p2 text-align:right注意：行內元素應用對齊屬性無效注意：行內元素應用對齊屬性無效文本修飾屬性(text-decoration)這個屬性主要設定文本劃線的屬性。有以下值：none (無，缺省值) underline (下劃線) overline (上劃線) line-through (當中劃線)示例代碼如

3、下：.p2 text-decoration: underline overline; 文本縮進屬性(text-indent)這個屬性設定文本首行縮進。其值有以下設定方法：length (長度，可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px) percentage (百分比，相當于父對象寬度的百分比)示例代碼如下：.p1 text-indent: 8mm行高屬性(line-height)這個屬性設定每行之間的距離。其值有以下設定方法：normal (缺省值) length (長度，可以用絕對單位(cm, mm, in, pt,pc)或者相對單位 (em

4、, ex, px) percentage (百分比，相當于父對象高度的百分比)示例代碼如下：.p1 line-height:1cm顏色屬性(color)用顏色屬性(color)可以改變文本的字體顏色。示例代碼如下：.p1color:gray字間距屬性(letter-spacing)這個屬性用來設定字符之間的距離。normal (缺省值) length (長度，可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px)示例代碼如下：.p1 letter-spacing: 3mm CSS的層疊性 CSS具有兩個特性：層疊性和繼承性。 層疊性是指當有多個選擇器都作用

5、于同一元素時，CSS怎樣處理？CSS的處理原則是： 1）如果多個選擇器定義的規(guī)則不發(fā)生沖突，則元素將應用所有選擇器定義的樣式。如：p/* 標記選擇器 */color:blue;font-size:18px;.special/* 類別選擇器 */font-style: italic; /* 斜體 */text-decoration: underline;/* 有下劃線 */class選擇器與標記選擇器1class選擇器與標記選擇器2class選擇器與標記選擇器3class選擇器與標記選擇器4class選擇器與標記選擇器5 2）如果多個選擇器定義的規(guī)則發(fā)生了沖突，則CSS按選擇器的優(yōu)先級讓元素應用

6、優(yōu)先級高的選擇器定義的樣式。CSS規(guī)定選擇器的優(yōu)先級從高到低為： 行內樣式 ID樣式 類別樣式 標記樣式?？偟脑瓌t是：越特殊的樣式，優(yōu)先級越高。如： p/* 標記選擇器 */color:blue; /* 藍色 */font-style: italic; /* 斜體 */.green/* 類別選擇器 */color:green;/* 綠色 */.purplecolor:purple; /* 青色 */#red/* ID選擇器 */color:red; /* 紅色 */這是第1行文本這是第2行文本這是第3行文本這是第4行文本這是第5行文本 CSS的繼承性 CSS的繼承性 CSS的繼承性是指如果子元

7、素定義的樣式沒有和父元素定義的樣式發(fā)生沖突，那么子元素將繼承父元素的樣式風格，并可以在父元素樣式的基礎上再加以修改，自己定義新的樣式，而子元素的樣式風格不會影響父元素。如：body text-align: center;.righttext-align: right;em color: #FF0000;p font-size: 24px;text-decoration: underline;電子商務教研室電子商務教研室要善于利用CSS繼承性 CSS的繼承貫穿整個CSS設計的始終，每個標記都遵循著CSS繼承的概念。可以利用這種巧妙的繼承關系，大大縮減代碼的編寫量，并提高可讀性，尤其在頁面內容很多

8、且關系復雜的情況下。 例如，如果網頁中大部分文字的字體大小都是12px，我們可以對body或td標記定義樣式為12象素。這樣由于其他標記都是body的子標記，會繼承這一樣式，就不需要對這么多子標記去定義樣式了，有些特殊的地方如果字體大小要求是14px，我們可以再利用類選擇器或id選擇器單獨定義。 作業(yè) 自己建一個css文件，完成下列樣式的定義（1）h1：紅色，字體大小12px，bold。（2）#f3: 幼圓，水平居中，字符間距：10px，下劃線。（3）.s1:綠色，段落行距：8px，首行縮進：25px。 在html中調用這個css文件中的這三個樣式利用CSS進行表格樣式設置 設置表格邊框的粗細

9、，通過Border屬性 單元格之間的縫隙問題，通過border-collapse屬性 學習如何通過CSS完成隔行變色的效果CSS進行菜單樣式設置 通過列表設置相應的菜單 通過DIV區(qū)塊對相應的列表項進行樣式設置 Display:block屬性設置，使得超鏈接被設置成塊元素，當鼠標進入該塊任何部分時都被激活，而不是僅僅在文字上方時才被激活。 設置鼠標屬性，經過時的相應動態(tài)效果-23-頁面布局 頁面布局一般分為以下幾種 ：p 表格布局表格布局p 框架布局框架布局 p DIV+CSS布局布局 表格布局和表格布局和DIV+CSS布局布局是目前最常用的布局方式是目前最常用的布局方式-24-表格布局表格布

10、局 p 表格在網頁中更多的是用于網頁的布局，其優(yōu)勢在于可以有效地定位網表格在網頁中更多的是用于網頁的布局，其優(yōu)勢在于可以有效地定位網頁中不同的元素，結構清晰。頁中不同的元素，結構清晰。 p Dreamweaver8提供了提供了“布局布局”模式。在模式。在“布局布局”模式中，可以使用表模式中，可以使用表格作為基礎布局結構來設計網頁。格作為基礎布局結構來設計網頁。表格布局有以下原則 ：p 不要把整個網頁當成一個大表格，盡可能使用多個表格進行分塊。不要把整個網頁當成一個大表格，盡可能使用多個表格進行分塊。 p 使用嵌套表格。使用嵌套表格。p 表格的邊框設置。表格的邊框設置。表格布局步驟： 使用布局視

11、圖；使用布局視圖； 繪制布局表格繪制布局表格 ； 繪制布局單元格；繪制布局單元格； 設置單元格屬性；設置單元格屬性； 預覽網頁。預覽網頁。-25-框架布局框架布局p框架是另一種常用的網頁布局排版工具?？蚣苁橇硪环N常用的網頁布局排版工具。p框架結構就是把瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以框架結構就是把瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以分別顯示不同的網頁。分別顯示不同的網頁。p使用框架最常見的用途就是導航，在使用了框架以后，用戶的使用框架最常見的用途就是導航，在使用了框架以后，用戶的瀏覽器不需要為每個頁面重新加載與導航相關的圖。瀏覽器不需要為每個頁面重新加載與導航相關的圖?？蚣懿季植襟E

12、： 建立框架；建立框架； 設置框架模板；設置框架模板； 設置框架的屬性；設置框架的屬性； 保存框架；保存框架； 設置嵌套框架屬性。設置嵌套框架屬性。 -26-DIV層 DIV層p 標簽的主要作用是用于設定文字、圖片、表格等的擺放位標簽的主要作用是用于設定文字、圖片、表格等的擺放位置置 p 當把文字，圖片等放在當把文字，圖片等放在標簽中時，該標簽被稱為標簽中時，該標簽被稱為“DIV塊塊”或或“DIV元素元素”或或“DIV層層”。 p 使用使用CSS和和DIV可以很好的解決圖像或文字定位的難題，通過可以很好的解決圖像或文字定位的難題，通過DIV和和CSS結合使用，網頁設計人員可以精確的設定內容的位

13、置，結合使用，網頁設計人員可以精確的設定內容的位置，還可以將定位的內容上下疊放。還可以將定位的內容上下疊放。 如果單獨使用如果單獨使用標簽，而不加標簽，而不加任何任何CSS樣式修飾，那么它在網頁樣式修飾，那么它在網頁中的效果和使用段落標簽中的效果和使用段落標簽的效果是相同的的效果是相同的 （一）、 標記與標記 在設計網頁時,能否控制好各個模塊在頁面中的位置是非常關鍵的.在CSS中我們主要利用與兩個標記. 1、 是一個區(qū)塊容器標記,它們之間相當一個容器,可以容納段落、標題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素。因此對進行控制，就可以控制中的其他標記元素。例如：div font-si

14、ze:18px;/* 字號大小 */font-weight:bold;/* 字體粗細 */font-family:Arial;/* 字體 */color:#FF0000;/* 顏色 */background-color:#FFFF00; /* 背景顏色 */text-align:center;/* 對齊方式 */width:300px;/* 塊寬度 */height:100px;/* 塊高度 */ 標記與標記一樣，作為容器標記而被廣泛應用，在上面的例題中如果將替換成，執(zhí)行后效果是一樣的。可以說和兩個標記都有獨立出各個區(qū)塊的作用，在這個意義上兩者沒有太多不同。2、 與的區(qū)別：包含的元素會自動換行

15、：在它的前后不會換行標記可以包含于標記之中，而反過來則不成立。 例如： div標記不同行：span標記同一行：Margin-topMargin-bottomMargin-leftMargin-right（二）、 盒子模型 盒子模型是CSS控制頁面時一個很重要的概念，只用掌握了盒子模型以及其中每個元素的用法，才能真正的控制頁面中各元素的位置。 1、盒子模型的概念 一個盒子模型由content、border、padding、margin這4個部分組成。Border-topBorder-bottomBorder-leftBorder-rightPadding-topPadding-bottomPad

16、ding-leftPadding-rightcontent （1） 一個盒子的實際高度或寬度是由：content+padding+border+margin組成的。（2）width和height的值控制content的大小,背景顏色是設置邊框區(qū)域內的顏色（包括邊框）（3）并且對于任何一個盒子都可以分別設定4條邊各自的border、padding和margin（4）倘若將盒子模型比作展覽館里展出的一幅幅畫，那么 Content就是畫面本身； Padding就是畫面與畫框之間的留白； Border就是畫框； Margin就是畫與畫之間的距離。（5）利用好盒子的這些屬性，就能夠實現(xiàn)各種各樣的排版效果

17、。（6）DM設計視圖查看盒子模型2、 border（畫框） border會占據空間，計算實際寬度和高度時應考慮。 border屬性主要有3個：color、width和style。 Width:thin/medium(默認,約2px)/thick/具體的數(shù)值; style:none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset等。IE支持的不理想 上下左右四個邊框不但可以統(tǒng)一設定，也可以分開上下左右四個邊框不但可以統(tǒng)一設定，也可以分開設定設定 。 設定上邊框屬性，你可以使用設定上邊框屬性，你可以使用border-top,

18、border-border-top, border-top-width, border-top-style, border-top -top-width, border-top-style, border-top -colorcolor。 設定下邊框屬性設定下邊框屬性 ，你可以使用，你可以使用b order-bottom, b order-bottom, border-bottom-width, border-bottom-style, border-bottom-width, border-bottom-style, border-bottom-colorborder-bottom-colo

19、r。 設定左邊框屬性，你可以使用設定左邊框屬性，你可以使用border-left, border-left, border-left-width , border-left-style , border-left-width , border-left-style , border-left-colorborder-left-color。 設定上邊框屬性，你可以使用設定上邊框屬性，你可以使用border-right, border-right, border-right-width, border-right-style, b border-right-width, border-right-

20、style, b order-right-colororder-right-color。 如果希望在某段文字結束后加上虛線用于分割，而不是用border將整個段框起來，可以通過單獨設置border-bottom來實現(xiàn)。例如：We can read of things that happened 5,000 years ago .Next paragraph3、 padding（留白） padding用于控制content與border之間的距離，如果修改上例，加入padding-bottom:30px;顯示效果如下： 某些時候需要同時設置4個方向的padding值時，可以將4個語句合成到一起，

21、例如：.outsidepadding:10px 30px 50px 100px; /* 同時設置，順時針 （上右下左）*/border:1px solid #000000;/* 外邊框 */background-color:#fffcd3;/* 外背景 */.insidebackground-color:#66b2ff;/* 內背景 */border:1px solid #005dbc;/* 內邊框 */width:100%; line-height:40px;text-align:center;font-family:Arial;4、 margin（畫與畫之間的間隔） margin指的是元素

22、與元素之間的距離。例如： We can read of things that happened 5,000 years ago in the Near East, . Next paragraph60px 當兩個行內元素緊鄰的時候,它們之間的距離為第1個元素的margin-right加上第2個元素的margin-left.span1span2Margin-rightMargin-left spanbackground-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;

23、padding:10px; span.leftmargin-right:30px;background-color:#a9d6ff; span.rightmargin-left:40px;background-color:#eeb0b0; 行內元素1 行內元素2 30+40=70pxdiv2 但如果不是行內元素,而是產生換行效果的塊級元素,情況就會變的有些不同.塊級元素之間的距離不再是margin-top與margin-bottom之和,而是兩者中的較大值.Div1的margindiv1Div1的Margin-bottomDiv2的Margin-topdivbackground-color:#

24、a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;塊元素1塊元素2 如果將塊元素2的margin-top由30px改為40px,會發(fā)現(xiàn)執(zhí)行結果沒有任何變化.若將其從30px修改為60px,則發(fā)現(xiàn)塊元素2向下移動了10個像素. 除了上面提到的行內元素間隔和塊級元素間隔兩種關系外,還有一種位置關系,它的margin值對CSS排版也有重要的作用.這就是父子關系.當一個塊包含在另一個塊中間時,便形成了典型的父子關系.其中子塊的margin將以父塊的content為參考.(子子塊在父塊的內容區(qū)塊在父塊的內容區(qū))父div父divContent區(qū)子div子div的margin-44-DIV+CSS布局-1DIV+CSS布局p 使用使用DIV+CSS布局，可先不考慮外觀，首先布局，可先不考慮外觀，首先需要將頁面內容的語義或結構確定下來。需要將頁面內容的語義或結構確定下來。 p 使用使用DIV+CSS布局，外觀不是最重要的，一布局，外觀不是最重要的，一個結構良好的個結構良好的HTML頁面可以通過頁面可以通過C