|
初識(shí)div div標(biāo)簽是雙標(biāo)簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容， 包括其他的div標(biāo)簽。也就是說，div標(biāo)簽是一個(gè)沒有任何特性的容器。XHTML中的塊狀元素和內(nèi)聯(lián)元素 XHTML的標(biāo)簽?zāi)J(rèn)為兩種元素：(1)、塊狀元素：該元素是矩形的，有自己的高度和寬度。塊狀元素就是一個(gè)矩形形容器。 (2)、內(nèi)聯(lián)元素：和塊級(jí)元素相反，內(nèi)聯(lián)元素沒有固定形狀，也無法設(shè)置寬度和高度。 內(nèi)聯(lián)元素形狀由其內(nèi)含的內(nèi)容決定，所以在寬度足夠的情況下，一行能容納多個(gè)內(nèi)聯(lián)元素。有人說相對(duì)于塊狀元素是一個(gè)硬盒子，內(nèi)聯(lián)元素就是一個(gè)軟軟的布袋子（形狀由內(nèi)容決定）。 塊狀元素適合于大塊的區(qū)域排版，所以常用來布局頁面。而內(nèi)聯(lián)元素適合于局部元素的樣式設(shè)置，所以常用于局部的文字樣式設(shè)置。 由于網(wǎng)頁大多數(shù)為計(jì)算機(jī)顯示屏幕作媒介，所以常用像素作為固定尺寸單位，即px 注意：在HTML元素中設(shè)置樣式不需要填寫單位，默認(rèn)為像素 布局頁面的寬度： 瀏覽者常見顯示分辨率（單位：像素）為 800*600、1024*768、 1280*1024、 1440*960 等。所以在頁面布局頁面時(shí)，要充分考慮頁面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過顯示寬度，頁面將出現(xiàn)水平滾動(dòng)條。過去瀏覽者用戶的顯示分辨率最小為800*600( 15寸CRT顯示器 )，其最小寬度為800像素，瀏覽器的邊框及滾動(dòng)條部分約占24像素左右。 布局頁面水平居中： HTML表格布局頁面時(shí)，只需要設(shè)置布局表格的align屬性為center即可。而div居中沒有屬性可以設(shè)置，只能通過CSS控制其位置 在布局頁面前，網(wǎng)頁制作者一定要把頁面的默認(rèn)邊距清除。為了方便操作，常用的方法是使用通配選擇符 “*”將所有對(duì)象的邊距清除，即margin屬性和padding 屬性 說明：盡量保證網(wǎng)頁只有垂直滾動(dòng)條，才符合瀏覽者的習(xí)慣，所以高度不需要考慮，由頁面內(nèi)容決定網(wǎng)頁高度 使div元素水平居中的方法有很多種，常用的方法是用CSS設(shè)置div的左右邊距，即margin-left屬性和margin-right屬性。當(dāng)設(shè)置div左外邊距和右外邊距的值為auto，即自動(dòng)時(shí)，左外邊距和右外邊距將相等，即達(dá)到了div水平居中效果。 居中程序： <head> <meta http-equiv="content-Type" content="text/html; charset=gb2312"/> <title>設(shè)置div水平居中</title> <style type=text/css> * { margin:0px; padding:0px; } #all{ width:75%; height:200px; background-color:red; border:1px solid blue; margin-left:auto; margin-right:auto; } </style> </head> <body> <div id="all">布局頁面內(nèi)容</div> </body> 注意：上面居中程序中margin屬性值前面的"0"代表上邊距和下邊距為 "0"像素,auto代表左邊距和右邊距為auto,即自動(dòng)設(shè)置。 說明：在頁面布局時(shí)盡量少嵌套，因?yàn)閄HTML元素多重嵌套將影響瀏覽器對(duì)代碼的解析速度 div元素的浮動(dòng) 通過div布局網(wǎng)頁，css設(shè)置其屬性，完全符合內(nèi)容與表現(xiàn)分離。不過一個(gè)div標(biāo)簽占據(jù)一行，塊狀元素有一個(gè)很重要的foalt屬性，可以使多個(gè)塊狀元素并列于一行 float屬性的值有l(wèi)eft、right、none和inherit。很多對(duì)象都有inhreit屬性，這是繼承屬性。代表繼承父容器的屬性。float屬性值為none時(shí)，塊狀元素不會(huì)附送，這也是塊狀元素的默認(rèn)值 一個(gè)典型的網(wǎng)頁布局實(shí)例 這個(gè)例子要求頁面有上下4行區(qū)域，分別用做廣告區(qū)(#top)、導(dǎo)航區(qū)(#nav)、主題區(qū)(#mid)、和版權(quán)區(qū)(footer) 案例程序： <head> < mate http-equiv="content-Type" content="text/html;charset=gb2312"> <title>網(wǎng)頁布局實(shí)例</title> <style type="text/css"> *{ margin:0px; padding:auto; } #top,#nav,#footer{ width:500px; margin:0px auto; } #top{ height:80px; background-color:#ddd; } #nav{ height:25px; background-color:#fc0; } #mid{ height:300px; } #left{ width:98px; height:298px; border:1px solid #999; float:left; background-color:#ddd; } #right{ height:298px; background-color:#ccc; } .content{ width:98px; height:148px; background-color:#c000; border:1px solid #999; float:left; } #content2{ background-color:#fc0; } </head> <body> <div id="top">頂部廣告區(qū)</div> <div id="nav">導(dǎo)航區(qū)</div> <div id="mid"> <div id="left">縱行導(dǎo)航區(qū)</div> <div id="right"> <div class="content">內(nèi)容A</div> <div class="content" id="content2">內(nèi)容B</div> <div class="content">內(nèi)容C</div> <div class="content" id="content2">內(nèi)容D</div> <div class="content" id="content2">內(nèi)容E</div> <div class="content">內(nèi)容F</div> <div class="content" id="content2">內(nèi)容G</div> <div class="content">內(nèi)容H</div> </div> <div id="footer">底部版權(quán)區(qū)</div> </body> 說明：主體內(nèi)容區(qū)寬度=縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度*4 主體內(nèi)容區(qū)高度=縱向?qū)Ш絽^(qū)高度=具體內(nèi)容區(qū)高度*2 縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度*4=490(像素) 縱向?qū)Ш絽^(qū)高度=298(像素) 具體內(nèi)容區(qū)高度*2=296(像素) 注意：在跨度和高度計(jì)算中，IE6.0以前版本的瀏覽器解析div的寬度和高度設(shè)置值包括邊框 導(dǎo)航條制作：為了增加導(dǎo)航條的互動(dòng)，列表元素常常配合超級(jí)鏈接元素一起使用，超級(jí)鏈接有為類選擇符，可以呈現(xiàn)鏈接文字和用戶互動(dòng)的4個(gè)狀態(tài)，即： a:link {color: #FF0000} /* 未訪問的鏈接 a:visited {color: #00FF00} /* 已訪問的鏈接 a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 a:active {color: #0000FF} /* 鼠標(biāo)單擊時(shí)的鏈接 互動(dòng)導(dǎo)航條程序： <head> <mate http-equiv="content-type" content="text/html ; charset= gb2312" > <title>導(dǎo)航條制作</title> <style type="text/css"> * { margin:0px; padding:0px; } ul{ list-style:none } #nav{ width:425px; height:22px; margin:0px auto; background-color:#ddd; } li{ float:left; } li a { display:block; width:98px; height:20px; border:1px solid #d00; margin-left:5px; font-weight:bold; text-decorration:none; text-align:center; } li a:link{ background-color:#cf3; color:#333; } li a:hover{ background-color:#69c; color:#fff; } li a:active{ background-color:#f00; } li a:visited{ background-color:#cf3; color:#333; } </style> </head> <body> <ul id="nav"> <li> <a href="#" title="這是首頁的鏈接">首頁</a> </li> <li> <a href="#" title="這是產(chǎn)品的鏈接">產(chǎn)品</a> </li> <li> <a href="#" title="這是企業(yè)文化的鏈接">企業(yè)文化</a> </li> <li> <a href="#" title="這是留言板的鏈接">留言板</a> </li> </ul> </body> 心得：雖然超級(jí)鏈接塊沒有設(shè)置浮動(dòng)屬性，但其直屬的父容器，即li元素設(shè)置了浮動(dòng)屬性，所以實(shí)例中的4個(gè)li元素會(huì)出現(xiàn)并列。通過引入超級(jí)鏈接的偽類選擇符，導(dǎo)航條有了互動(dòng)性。 本例中使用的屬性： font-weight:bolid (文本加粗) text-decoration:none (除去超級(jí)鏈接默認(rèn)的下畫線) margin-left:5px; (是每個(gè)超級(jí)連接塊都有了5個(gè)像素的左邊距) 注意：通常網(wǎng)頁設(shè)計(jì)中很少使用ul元素的列表符號(hào)，所以把ul標(biāo)簽選擇符的list-style屬性設(shè)置為none，表示頁面中任何ul列表結(jié)構(gòu)都沒有列表符號(hào)。 CSS盒子模型 “盒”模型是CSS定位布局的核心內(nèi)容 什么是CSS盒模型： XHTML中大部分的元素(特別是塊狀元素)都可以看做一個(gè)盒子，而網(wǎng)頁元素的定位實(shí)際就是這些大大小小的盒子在頁面中的定位。而這些盒子是"流動(dòng)"的,當(dāng)某個(gè)塊狀元素被CSS設(shè)置了浮動(dòng)屬性，這個(gè)盒子就會(huì)"流動(dòng)"的，當(dāng)某個(gè)塊狀元素被CSS設(shè)置了浮動(dòng)屬性，這個(gè)盒子就會(huì) "流"到上一行。 邊框的樣式設(shè)置： 邊框(border)作為盒模型的組成部分之一，其樣式非常受重視。邊框的CSS樣式設(shè)置不但影響到盒子的尺寸，還影響到盒子的外觀。邊框(border)屬性的值有3中，即邊框尺寸(像素)、邊框類型和邊框顏色 ( 十六進(jìn)制 )。 border的4條邊框： border-top:頂部邊框 border-bottom:底部邊框 border-left:左邊框 border-right:右邊框 修改不同樣子的邊框線條： solid:實(shí)線 dashed:虛線 dotted:點(diǎn)狀線 groove：立體線 double：雙線 outset:浮雕線 內(nèi)邊距(padding)和外邊距(margin)都是不可見的盒子組成部分，只不過它們倆之間夾有一條可見的邊框(border) 盒子兼容問題 DTD(文檔類型聲明) <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml/DTD/xhtml1-transitional.dtd " > <html xmlns= " http://www./1999/xhtml " > 代表XHTML的文檔類型聲明 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/ html4/ strict.dtd"> <html xmlns= " http://www./1999/xhtml " > 代表HTML4.0的嚴(yán)格類型的文檔類型聲明 元素的非常規(guī)定位方式： position的原意為位置、狀態(tài)、安置 position屬性非常重，很多特殊容器的定位必須用position來完成 position屬性有4個(gè)值，分別是static、absolute、fixed、relative， static是默認(rèn)值，代表無定位(一般用于取消特殊定位的繼承，回復(fù)默認(rèn)) absolute:絕對(duì)定位 relative：相對(duì)定位 fixed：固定定位（定位的容器不會(huì)隨著滾動(dòng)條的拖動(dòng)而變化位置） 注意：絕對(duì)定位的容器也會(huì)有上下的關(guān)系，在同一個(gè)位置只會(huì)顯示最上面的容器。在計(jì)算機(jī)顯示中把垂直顯示屏幕平面的方向稱為 "z" 方向，CSS絕對(duì)定位的容器的 z-index屬性對(duì)應(yīng)這個(gè)方向，z-index屬性值越大，容器越靠上。即同一個(gè)位置的兩個(gè)絕對(duì)定位的容器只會(huì)顯示z-index屬性值較大的。 |
|
|
