說明案例筆記divcss

1、1.使用 a加入 對(duì)測(cè)試使用 a。href=# 表示到本頁(yè)，點(diǎn)擊后仍然在本頁(yè)面，也可以。例如 href=如果要到 其他這樣就連接到別的網(wǎng)頁(yè)了， 如果想不在同一個(gè)窗口打開也就是新的窗口打開， 就要加入=_bl也就是=好了，下面使用 css 重新定義 ，這樣會(huì)使效果更加好。我還是使用上次說的 新建一個(gè)style.css 文件吧。然后在頁(yè)面下面開始重新定義了。a color: red;這樣凡是使用 到 的地方 顏色 都會(huì)紅色。上面去 可以改變文字顏色那么當(dāng)鼠標(biāo)移到a:hover color: blue;看到了吧， a:hover 就是表示鼠標(biāo)移到上面去的時(shí)候 顯示的顏色。還可以加入 文字大小 fon

2、t-size: 19px;也可以去掉 下劃線， text-decoration: none;當(dāng)點(diǎn)擊過的也可以 顯示別的顏色，瀏覽已經(jīng)點(diǎn)擊過了。a:visited color: #cccccc;如果同一個(gè)頁(yè)面 需要多個(gè) 的樣式 應(yīng)該如何 ？例如一個(gè)頁(yè)面這個(gè)地方 我需要?jiǎng)e的顏色，看我這樣定義多個(gè) a樣式。a.tt:hover color: #000000; font-weight: bold; 第二個(gè)樣式 一個(gè)頁(yè)面使用 多個(gè) 的樣式，2.導(dǎo)航還記得使用 css 定義的類吧 ， 呵呵。#width: 800px; height: 40px;定義導(dǎo)航菜單的寬度和高度。看不到 div 塊， 所以為 di

3、v 加上邊框border: 2px solid #eee;看到了吧， 一個(gè) div 塊出來了， 2px solid 就是 線條大小， #eee 就是線條顏色=好了 ， div 方面的暫停一下了， 現(xiàn)在看看 ul li 這個(gè)首頁(yè)財(cái)經(jīng)汽車體育出來的效果是 豎著寫的 菜單。不是把 ul li 放入 剛才的 div 里面。要的效果， 先別急，然后現(xiàn)在來 用 css 給 ul li 做個(gè)定義樣式#ul li list-style: none;list-style: none; 表示把 ul li 原來的樣式 去掉， 看到那些點(diǎn)去掉了吧，但是字體還是豎著寫。 再加入一個(gè)float: left;這下 橫著寫

4、了吧 ， 哈哈。每個(gè) li 加入寬度就可以了， width: 50px;50px, 還是不夠?qū)挘?80px 差不多了， px 就是像素的意思。由于是 導(dǎo)航菜單，把字體加粗，字體大小也控制一下，現(xiàn)在基本和效果圖 差不多了， 就是字體 太上了， 在邊框頂部，下面在 div 里加入一個(gè) padding-top: 5px; 就是讓字體距離邊框頂部的距離為5px;還是不夠下， 改為 10px 看看。差不多了， 導(dǎo)航高度有點(diǎn)高， 對(duì)比效果圖可以看到height: 40px; 改為 30px; 還是大了一點(diǎn) 改為 25px;好了 完美， 呵呵。下面就是 修改字體顏色了， 我一個(gè)軟件給大家點(diǎn)擊那個(gè)軟件的 4

5、個(gè)小格其中一個(gè) 按住鼠標(biāo)不要放， 然后 鼠標(biāo)移動(dòng)去要獲取顏色的地方看到了吧， 這樣 就得到了 獲取顏色的 數(shù)值了 在下面顯示 #087DC6然后 color: #087DC6;這樣就輕松得到了 字體顏色了。只是演示。下面繼續(xù) 屏幕獲取顏色， #ff7900還有 就是去掉下面的下橫線。這樣一個(gè) 導(dǎo)航菜單就出來了。現(xiàn)在在 ie 瀏覽器上正常顯示，看看用其他瀏覽器 看看 效果怎樣 Mozilla Firefox 3.5 上面測(cè)試一下 頁(yè)面效果在 ul 上加上#ul margop: 0px;=3.使用 div + css 來實(shí)現(xiàn)網(wǎng)頁(yè)布局效果其實(shí)總體可以 分成 3 個(gè)部分，沒錯(cuò)，就是 上中下 3 大塊上

6、面塊（top） 又分成 上下 2 個(gè)部分，中間塊 （content） 又分成左右 2 個(gè)部分。分別起了名字， 好了 現(xiàn)在規(guī)劃好了 就開始動(dòng)手寫 div 和 css 了。都是從 上到下 寫下去 呵呵。好定義好 top 這個(gè) div 了。#top width: 770px; height:120px;border: 2px solid #eee;可以網(wǎng)頁(yè)看到 這一大塊了。下面到 中間塊了 #content#content width: 770px; height: 500px;border: 2px solid #eee;#bottom最后 就是 最下面那一塊了#bottom width: 770px; height: 30px;border: 2px solid #eee;=很簡(jiǎn)單就布局出來了吧，如果你看不懂上面的 div 和 css 代碼現(xiàn)在看上去幾塊 太靠近了。加入 margop: 5px; 可以讓塊之間 有空隙。到現(xiàn)在為止已經(jīng) 總體布局 弄好了， =現(xiàn)在再 弄每一塊的布局例如 top 又分成 logo 和2 塊div id=如果發(fā)現(xiàn) 大小不合適，就要進(jìn)行調(diào)整。=在把中間塊 進(jìn)行劃分成 2 個(gè)部分，塊，然后再用 css 進(jìn)行控制。#left width: 300px; height: 500px;border: 2px solid #eee; float