《DIVCSS基礎(chǔ)網(wǎng)頁開發(fā)設(shè)計.ppt》由會員分享，可在線閱讀，更多相關(guān)《DIVCSS基礎(chǔ)網(wǎng)頁開發(fā)設(shè)計.ppt（29頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、DIVpadding:0;,作用就是重置可能用到的標(biāo)簽,#logo,#Nav,#Banner,#Content,#Footer width:900px; margin:0 auto;,一般網(wǎng)站都會做到點擊logo，就會回到主頁，代碼一般會這么寫,【第二步布局Logo欄】,另外一種方法，將圖片做成鏈接a 的背景，同樣可以達(dá)到上面說的效果，并且HTML 代碼就會更精簡，少了，, ,HTML 代碼：,CSS代碼,【第二步布局Logo欄】,#Logo height:80px;/*公共代碼中沒有定義高度，在這里定義*/ #logoLink display:block;/*將鏈接a 轉(zhuǎn)化成塊狀元素，這樣才
2、能顯示出背景*/ width:177px; height:51px; Background-image:url(“img/logo.jpg”); float:left;/*為了讓ie6和ff 顯示效果一樣，如果不加上這句話，后面的margin-top:20px; 兩個瀏覽器解析不一樣，大家可以去掉這句話，看看兩者顯示效果差別*/ margin-top:20px;/*設(shè)置a 的頂部外邊距為20像素，這樣才能和瀏覽器頂部有段距離， 才能和圖片中做的一樣*/ ,HTML 代碼：,【第三步布局導(dǎo)航欄Nav】, HOME PHOTOS ABOUT LINKS CONTACT ,CSS代碼,#Navhei
3、ght: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-d
4、ecoration:none;/*去除鏈接樣式，默認(rèn)是有下劃線的，加上這句就沒有任何樣式， 下劃線也沒有了*/ float:left;/*這句一定要加，不然在IE6中會出現(xiàn)，這種效果*/ #Nav ul li a:hoverbackground:#68acd3;,有兩種方法 第一種：將圖片作為背景 第二種：直接將圖片插入：,【第四步Banner布局】,CSS代碼：,#Banner height:290px; Background-image:url(img/banner.jpg); ,內(nèi)容板塊分為左右兩個區(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è)浮動*/ #Content #ContentLwidth:600px; background:#f0f0f0; #Content #ContentRwidth:300px; background:#d3e7f2;,【第六步Footer布局】,#Footer text-align:center; backgro
6、und:#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)題用的話，搜索引擎會首先抓取里面的內(nèi)容，然后提
7、取關(guān)鍵詞 對于文章內(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的下邊框為寬度1像素的虛線*/ margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p 保持10像素的距離*/ #Content #ContentL
8、p font-size:12px; line-height:20px; text-indent:2em;/*文章第一行縮進(jìn)兩個漢字，記住這句話就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 #969696
9、dashed;/*設(shè)置h1的下邊框為寬度1像素的虛線*/ margin-bottom:10px;/*設(shè)置外邊距，讓h1和下面的內(nèi)容區(qū)域p 保持10像素的距離*/ ,兩行紅色的QQ 群信息怎么做？其實這個有很多辦法 方法一：ul、li 或者dl、dt、dd 來布局 方法二：表格(Table)來布局 方法三：用單純的標(biāo)簽來布局比如、等標(biāo)簽, 1群：5505810 2群：87951377 3群：73513641 4群：72263578 ,#Content #ContentR table font-size:12px; color:#900; ,如果用position來布局頁面，父級元素的positi
10、on 屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因為它不受父級元素的padding 的屬性影響，當(dāng)然你也可以用position，不過到時候計算的時候不要忘記padding 的值,6、定位 (position),絕對定位，他默認(rèn)參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，有以下屬性： 1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文本，則以它前面 的最后一個文字的右上角為原點進(jìn)行定位但是不斷開文字，覆蓋于上方。 2)如果設(shè)定TRBL，并且父
11、級沒有設(shè)定position 屬性，那么當(dāng)前的absolute 則以瀏覽器左上角為原始點進(jìn)行定位，位置將由TRBL 決定。 3)如果設(shè)定TRBL，并且父級設(shè)定position 屬性(無論是absolute 還是relative)，則以父級的左上角為原點進(jìn)行定位，位置由TRBL 決定。即使父級有Padding 屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進(jìn)行定位，父級的padding 對其根本沒有影響。,【position:absolute】,以上三點可以總結(jié)出，若想把一個定位屬性為absolute 的元素定位于其父級元素內(nèi)，只有滿足兩個條件， 第一：設(shè)定TRBL 第二：
12、父級設(shè)定Position 屬性,相對定位，他是默認(rèn)參照父級的原始點為原始點，無父級則以文本流的順序在上一個元素的底部為原始點，配合TRBL 進(jìn)行定位，當(dāng)父級內(nèi)有padding 等CSS 屬性時，當(dāng)前級的原始點則參照父級內(nèi)容區(qū)的原始點進(jìn)行定位，有以下屬性： 1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這里 和absolute 第一條一樣)，如果在沒有父級元素的情況下，存在文本，則以文本的底部為 原始點進(jìn)行定位并將文字?jǐn)嚅_(和absolut 不同)。 2)如果設(shè)定TRBL，并且父級沒有設(shè)定position 屬性，仍舊以父級的左上角為原點進(jìn)行定 位(和absolu
13、t 不同) 3)如果設(shè)定TRBL，并且父級設(shè)定position 屬性(無論是absolute 還是relative)，則以父 級的左上角為原點進(jìn)行定位，位置由TRBL 決定(前半段和absolut 一樣)。如果父級有 Padding 屬性，那么就以內(nèi)容區(qū)域的左上角為原點，進(jìn)行定位(后半段和absolut 不同)。 以上三點可以總結(jié)出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進(jìn)行定位，但是父級的Padding 屬性會對其影響。,【position:relative】,屬性為relative 的元素可以用來布局頁面，屬性為absolute 的元素用來定位某元素在父級中的位置,如果
14、用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當(dāng)然你也可以用position，不過到時候計算的時候不要忘記padding的值。,總結(jié)：,頭部blog 區(qū)域用定位(position)來布局一下,7、定位應(yīng)用,HTML 代碼和原來的沒有區(qū)別：, ,CSS 代碼就有變,#Logo height:80px; #logoLink display:block; width:173px; height:46px; background:url(logo.gif); fl
15、oat:left; margin-top:20px; ,用“浮動+外邊距”布局的，將#logoLink 定位在距離頂部20 像素，左側(cè)0 像素的地 方；,#Logo height:80px; position:relative;/*相對定位*/ #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 像 素，,布局頁面，F(xiàn)loat為主，Position為輔！,
DIVCSS基礎(chǔ)網(wǎng)頁開發(fā)設(shè)計.ppt
