說明案例筆記divcss

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

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

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

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

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

6、面塊（top） 又分成 上下 2 個部分，中間塊 （content） 又分成左右 2 個部分。分別起了名字， 好了 現(xiàn)在規(guī)劃好了 就開始動手寫 div 和 css 了。都是從 上到下 寫下去 呵呵。好定義好 top 這個 div 了。#top width: 770px; height:120px;border: 2px solid #eee;可以網(wǎng)頁看到 這一大塊了。下面到 中間塊了 #content#content width: 770px; height: 500px;border: 2px solid #eee;#bottom最后 就是 最下面那一塊了#bottom width: 770px; height: 30px;border: 2px solid #eee;=很簡單就布局出來了吧，如果你看不懂上面的 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 個部分，塊，然后再用 css 進(jìn)行控制。#left width: 300px; height: 500px;border: 2px solid #eee; float