DIVCSS基礎(chǔ)網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì).ppt

《DIVCSS基礎(chǔ)網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《DIVCSS基礎(chǔ)網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì).ppt（29頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、DIVpadding:0;,作用就是重置可能用到的標(biāo)簽,#logo,#Nav,#Banner,#Content,#Footer width:900px; margin:0 auto;,一般網(wǎng)站都會(huì)做到點(diǎn)擊logo，就會(huì)回到主頁(yè)，代碼一般會(huì)這么寫(xiě),【第二步布局Logo欄】,,另外一種方法，將圖片做成鏈接a 的背景，同樣可以達(dá)到上面說(shuō)的效果，并且HTML 代碼就會(huì)更精簡(jiǎn)，少了，, ,HTML 代碼：,CSS代碼,【第二步布局Logo欄】,#Logo height:80px;/*公共代碼中沒(méi)有定義高度，在這里定義*/ #logoLink display:block;/*將鏈接a 轉(zhuǎn)化成塊狀元素，這樣

2、才能顯示出背景*/ width:177px; height:51px; Background-image:url(“img/logo.jpg”); float:left;/*為了讓ie6和ff 顯示效果一樣，如果不加上這句話，后面的margin-top:20px; 兩個(gè)瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/ margin-top:20px;/*設(shè)置a 的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離， 才能和圖片中做的一樣*/ ,HTML 代碼：,【第三步布局導(dǎo)航欄Nav】, HOME PHOTOS ABOUT LINKS CONTACT ,CSS代碼,#Navhe

3、ight:42px; #Nav ul height:42px; list-style-type:none; background:#56990c; #Nav ul liheight:42px; float:left; #Nav ul li a display:block;/*轉(zhuǎn)化成塊狀元素，因鏈接是內(nèi)鏈元素，若想給它定義下面的屬性，必須 將它轉(zhuǎn)化成塊狀元素，*/ height:42px; color:#FFF; padding:0 10px; line-height:42px; font-size:14px; font-weight:bold; font-family:Arial; text-

4、decoration:none;/*去除鏈接樣式，默認(rèn)是有下劃線的，加上這句就沒(méi)有任何樣式， 下劃線也沒(méi)有了*/ float:left;/*這句一定要加，不然在IE6中會(huì)出現(xiàn)，這種效果*/ #Nav ul li a:hoverbackground:#68acd3;,有兩種方法 第一種：將圖片作為背景 第二種：直接將圖片插入：,【第四步Banner布局】,CSS代碼：,#Banner height:290px; Background-image:url(img/banner.jpg); ,內(nèi)容板塊分為左右兩個(gè)區(qū)域，左邊ContentL 寬度是600px，右邊ContentR寬度是300px,內(nèi)邊

5、距設(shè)置成15px,【第五步內(nèi)容Content板塊布局】,HTML 代碼：, 此處為左邊ContentL 此處為左邊ContentR ,CSS代碼:,#Content #ContentL,#Content #ContentRfloat:left; padding:15px;/*為什么 都要左側(cè)浮動(dòng)*/ #Content #ContentLwidth:600px; background:#f0f0f0; #Content #ContentRwidth:300px; background:#d3e7f2;,【第六步Footer布局】,#Footer text-align:center; backgr

6、ound:#68acd3; padding: 10px 0; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:20px; , 版權(quán)歸xxxxxxx (www. )所有 CSS 交流QQ 群:xxxxxxx/xxxxxxx ,,Content部分細(xì)化,結(jié)構(gòu)分析：包括標(biāo)題和文章內(nèi)容兩塊，并且標(biāo)題和內(nèi)容之間有一條虛線，而第二篇文章的內(nèi)容部分是圖片和文字相結(jié)合且文字環(huán)繞圖片。 標(biāo)題用標(biāo)簽，原因如下 第一:標(biāo)簽字體加粗，不用再定義字體粗細(xì) 第二:標(biāo)題用的話，搜索引擎會(huì)首先抓取里面的內(nèi)容，然

7、后提取關(guān)鍵詞 對(duì)于文章內(nèi)容，我們就放到,【第七步內(nèi)容左側(cè)板塊(ContentL)布局】,HTML 代碼：, 標(biāo)題 內(nèi)容 ,CSS代碼：,#Content #ContentL h1 height:40px; line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/ font-size:16px; color:#054d73; border-bottom:1px #969696 dashed;/*設(shè)置h1的下邊框?yàn)閷挾?像素的虛線*/ margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p 保持10像素的距離*/ #Content #Content

8、L p font-size:12px; line-height:20px; text-indent:2em;/*文章第一行縮進(jìn)兩個(gè)漢字，記住這句話就OK 了*/ ,圖片圍繞 #Content #ContentL p img float:left; ,,【第八步內(nèi)容右側(cè)板塊(ContentR)布局】,HTML 代碼：,加入我們！,CSS代碼：,#Content #ContentR h1 height:40px; line-height:40px;/*設(shè)置行距，目的是保證h1中的文字垂直居中*/ font-size:16px; color:#900; border-bottom:1px #9696

9、96 dashed;/*設(shè)置h1的下邊框?yàn)閷挾?像素的虛線*/ margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p 保持10像素的距離*/ ,兩行紅色的QQ 群信息怎么做？其實(shí)這個(gè)有很多辦法 方法一：ul、li 或者dl、dt、dd 來(lái)布局 方法二：表格(Table)來(lái)布局 方法三：用單純的標(biāo)簽來(lái)布局比如、、等標(biāo)簽,, 1群：5505810 2群：87951377 3群：73513641 4群：72263578 ,#Content #ContentR table font-size:12px; color:#900; <,如果用position來(lái)布局頁(yè)面，父級(jí)元素的

10、position 屬性必須為relative，而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用absolute，因?yàn)樗皇芨讣?jí)元素的padding 的屬性影響，當(dāng)然你也可以用position，不過(guò)到時(shí)候計(jì)算的時(shí)候不要忘記padding 的值,6、定位 (position),絕對(duì)定位，他默認(rèn)參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，有以下屬性： 1)如果沒(méi)有TRBL，以父級(jí)的左上角，在沒(méi)有父級(jí)的時(shí)候，他是參照瀏覽器左上角,如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以它前面 的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開(kāi)文字，覆蓋于上方。 2)如果設(shè)定TR

11、BL，并且父級(jí)沒(méi)有設(shè)定position 屬性，那么當(dāng)前的absolute 則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL 決定。 3)如果設(shè)定TRBL，并且父級(jí)設(shè)定position 屬性(無(wú)論是absolute 還是relative)，則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL 決定。即使父級(jí)有Padding 屬性，對(duì)其也不起作用，說(shuō)簡(jiǎn)單點(diǎn)就是：它只堅(jiān)持一點(diǎn)，就以父級(jí)左上角為原點(diǎn)進(jìn)行定位，父級(jí)的padding 對(duì)其根本沒(méi)有影響。,【position:absolute】,以上三點(diǎn)可以總結(jié)出，若想把一個(gè)定位屬性為absolute 的元素定位于其父級(jí)元素內(nèi)，只有滿足兩個(gè)條件， 第一：設(shè)定TR

12、BL 第二：父級(jí)設(shè)定Position 屬性,相對(duì)定位，他是默認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(jí)則以文本流的順序在上一個(gè)元素的底部為原始點(diǎn)，配合TRBL 進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding 等CSS 屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位，有以下屬性： 1)如果沒(méi)有TRBL，以父級(jí)的左上角，在沒(méi)有父級(jí)的時(shí)候，他是參照瀏覽器左上角(到這里 和absolute 第一條一樣)，如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以文本的底部為 原始點(diǎn)進(jìn)行定位并將文字?jǐn)嚅_(kāi)(和absolut 不同)。 2)如果設(shè)定TRBL，并且父級(jí)沒(méi)有設(shè)定position 屬性，仍舊以父級(jí)的左上角為原點(diǎn)進(jìn)行定 位(和

13、absolut 不同) 3)如果設(shè)定TRBL，并且父級(jí)設(shè)定position 屬性(無(wú)論是absolute 還是relative)，則以父 級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL 決定(前半段和absolut 一樣)。如果父級(jí)有 Padding 屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)，進(jìn)行定位(后半段和absolut 不同)。 以上三點(diǎn)可以總結(jié)出，無(wú)論父級(jí)存在不存在，無(wú)論有沒(méi)有TRBL，均是以父級(jí)的左上角進(jìn)行定位，但是父級(jí)的Padding 屬性會(huì)對(duì)其影響。,【position:relative】,屬性為relative 的元素可以用來(lái)布局頁(yè)面，屬性為absolute 的元素用來(lái)定位某元素在父級(jí)中

14、的位置,如果用position來(lái)布局頁(yè)面，父級(jí)元素的position屬性必須為relative，而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用absolute，因?yàn)樗皇芨讣?jí)元素的padding的屬性影響，當(dāng)然你也可以用position，不過(guò)到時(shí)候計(jì)算的時(shí)候不要忘記padding的值。,總結(jié)：,頭部blog 區(qū)域用定位(position)來(lái)布局一下,7、定位應(yīng)用,HTML 代碼和原來(lái)的沒(méi)有區(qū)別：, ,CSS 代碼就有變,#Logo height:80px; #logoLink display:block; width:173px; height:46px; background:url(logo.gi

15、f); float:left; margin-top:20px; ,用“浮動(dòng)+外邊距”布局的，將#logoLink 定位在距離頂部20 像素，左側(cè)0 像素的地 方；,#Logo height:80px; position:relative;/*相對(duì)定位*/ #logoLink display:block; width:173px; height:46px; background:url(logo.gif) no-repeat; position:absolute; top:20px; left:0; ,position 方法，首先給#logo 加上“position:relative;”，給#logoLink 加上“position:absolute;”,然后讓#logoLink 距離上面20 像素，左側(cè)0 像 素，,布局頁(yè)面，F(xiàn)loat為主，Position為輔！,,,,,,,,,,,,,,,,,,