DIV和CSS布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18、border-border-top, border-top-width, border-top-style, border-top -top-width, border-top-style, border-top -colorcolor。 設(shè)定下邊框?qū)傩栽O(shè)定下邊框?qū)傩?，你可以使用，你可以使用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。 設(shè)定左邊框?qū)傩?，你可以使用設(shè)定左邊框?qū)傩裕憧梢允褂胋order-left, border-left, border-left-width , border-left-style , border-left-width , border-left-style , border-left-colorborder-left-color。 設(shè)定上邊框?qū)傩裕憧梢允褂迷O(shè)定上邊框?qū)傩?，你可以使用border-right, border-right, border-right-width, border-right-style, b border-right-width, border-right-

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

21、例如：.outsidepadding:10px 30px 50px 100px; /* 同時設(shè)置，順時針 （上右下左）*/border:1px solid #000000;/* 外邊框 */background-color:#fffcd3;/* 外背景 */.insidebackground-color:#66b2ff;/* 內(nèi)背景 */border:1px solid #005dbc;/* 內(nèi)邊框 */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 當(dāng)兩個行內(nèi)元素緊鄰的時候,它們之間的距離為第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; 行內(nèi)元素1 行內(nèi)元素2 30+40=70pxdiv2 但如果不是行內(nèi)元素,而是產(chǎn)生換行效果的塊級元素,情況就會變的有些不同.塊級元素之間的距離不再是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í)行結(jié)果沒有任何變化.若將其從30px修改為60px,則發(fā)現(xiàn)塊元素2向下移動了10個像素. 除了上面提到的行內(nèi)元素間隔和塊級元素間隔兩種關(guān)系外,還有一種位置關(guān)系,它的margin值對CSS排版也有重要的作用.這就是父子關(guān)系.當(dāng)一個塊包含在另一個塊中間時,便形成了典型的父子關(guān)系.其中子塊的margin將以父塊的content為參考.(子子塊在父塊的內(nèi)容區(qū)塊在父塊的內(nèi)容區(qū))父div父divContent區(qū)子div子div的margin-44-DIV+CSS布局-1DIV+CSS布局p 使用使用DIV+CSS布局，可先不考慮外觀，首先布局，可先不考慮外觀，首先需要將頁面內(nèi)容的語義或結(jié)構(gòu)確定下來。需要將頁面內(nèi)容的語義或結(jié)構(gòu)確定下來。 p 使用使用DIV+CSS布局，外觀不是最重要的，一布局，外觀不是最重要的，一個結(jié)構(gòu)良好的個結(jié)構(gòu)良好的HTML頁面可以通過頁面可以通過C