2天駕馭DIV+CSS （實戰篇）（轉）

時間  2019-11-10
標籤 2天 駕馭 div+css div css 實戰 欄目 HTML 简体版
原文   原文鏈接
 這是去年看到的一片文章，感受在個人學習中，有很多的影響。因而把它分享給想很快了解css的兄弟們。本文是實戰篇。

基礎篇
[知識一] 「DIV+CSS」 的叫法是不許確的
[知識二] 「DIV+CSS」 將你引入兩大誤區
[知識三] 什麼是W3C標準？
[基礎一] CSS如何控制頁面
[基礎二] CSS選擇器
[基礎三] CSS選擇器命名及經常使用命名
[基礎四] 盒子模型
[基礎五] 塊狀元素和內聯元素php

實戰篇
[第一課] 實戰小熱身
[第二課] 浮動
[第三課] 清除浮動
[第四課] 導航條(上) | 導航條(下)
[大練習] 前四節課大練習
[第五課] 浮動佈局之結構設計 | 浮動佈局之表現設計
[第六課] 定位
[第七課] 定位應用
[第八課] CSS Hackcss

技巧篇
[單張圖片按鈕實例] 
[首行文字兩文字縮進]html

 
 
【第一課】實戰小熱身




上課了~請同窗先把下面的例子根據要求作出來

    【例子】
        要求：
        1）寬度、高度均是200像素；
        2）顏色爲紅色#900；

        本身作作，看看能不能做出來？先不要看個人代碼，若是真的作不出來，就下載下來，跟着下面說的一步一步修改。
        下面是個人代碼：  【第一課】實戰小熱身.rar (1.24 KB, 下載次數: 4671) 

        IE6和FF顯示的實際效果

前端




        怎麼樣，比較容易吧~，可是大家有沒有發現，紅色區域離瀏覽器的頂部和左邊的邊距IE6和FF的不同，有沒有發現？這樣的話，咱們做出來的頁面瀏覽器就不兼容了，效果不同了？爲何會這樣？

        這是由於每一個瀏覽器都有一個內置的CSS文件，當你沒有對某個標籤的屬性設置的時候，瀏覽器就會應用內置的CSS文件，怎麼才能作到瀏覽器兼容？不着急，你只須要在CSS文件中，將咱們目前應用到得標籤body和div置零就OK了，代碼這麼寫：

程序員

        body,div{padding:0; margin:0;}

 


        若是您對上面CSS的樣式寫法不熟悉，就返回去看一下「【基礎二】CSS選擇器」，當把這句話加上以後，是否是兩款瀏覽器顯示效果同樣了~以下圖
<ignore_js_op>web




        好，咱們接着來，如今再加一個條件：
        3）讓紅色區域與瀏覽器的頂部和左邊距離爲20像素；


        怎麼樣，有沒有思路？沒有思路不要緊，繼續向下看：
        咱們，只須要設置紅色方塊的外邊距就能夠了，添加以下：
        CSS代碼：瀏覽器

  1. margin-top:20px;
margin-left:20px;

     

效果以下圖：
前端工程師




        這樣就使紅色區域定位於頁面座標(20,20)處了，與瀏覽器上邊距和左邊距都爲20像素。
        不過上面的這種寫法咱們能夠精簡爲app

        margin:20px 0 0 20px;

 



        其中的數值順序是：上右下左。
        而margin:20px 0;則和margin:20px 0 20px 0;是等價的喲~只不過是更加精簡而已，這樣寫CSS加載速度會更快。

        咱們接着將問題延伸，怎樣才能讓紅色區域水平定位於瀏覽器的正中間，不管瀏覽器窗口的大小，顯示器分辨率的大小。
也很簡單，剛剛加的兩句話"margin-top:20px;margin-left:20px;"修改成：

框架

        margin:0 auto;

 

        怎麼樣，有意思吧，紅色區域是否是位於瀏覽器的正中間了~

        好~！到這裏第一節課結束，是否是很簡單，或者太簡單了!!!若是感受不過癮那就趕忙學下一節！^_^

 

【第二課】浮動



頁面佈局有兩種方式
1）浮動Float 
2）定位Position

今天就經過一個小小的練習，經過引導的方式，讓你們理解Float的含義。

【例子】
要求：
1）兩個方塊，一個紅色#900，一個藍色#009；
2）紅色方塊寬度和高度均爲200像素，藍色方塊 寬度爲300像素，高度爲200像素；
3）紅色方塊和藍色方塊上外邊距(margin-top)和左外邊距(margin-left)均爲20像素；

頁面效果以下：



源代碼： 【第二課】浮動 實例.rar (1.29 KB, 下載次數: 2253) 


        你們應該注意到了，雖然紅色方塊的寬度並非100%，可是藍色並未和紅色處於同一行，這就是塊狀元素比較「霸道」的一點，（即便塊狀元素的寬度不是100%，它也不容許其餘元素和他同在一行）爲了消除這種「霸權」，讓紅色和藍色方塊都處在一行，如圖



        此時就須要拿出咱們的利器Float！只須要在紅色方塊的CSS裏面加上「float:left;」，這時候在IE6中能夠看到藍色方塊的確跑到紅色方塊的後面了，而且處於一行了，可是在FireFox中卻變成了以下效果：



        這時候就須要注意了，FF中若是前面的區域浮動了，後面的那個區域頗有可能就會和前面的區域發生重疊並錯位。

        怎麼才能解決這個問題，解決這個瀏覽器兼容的問題，很容易，只須要在藍色方塊的CSS代碼中也加入「float:left;」，問題就解決了，加上試試，看看在FF中藍色方塊是否是和紅色方塊處於一行了~

        到這裏，你們應該明白Float的做用了吧，就是爲了消除塊狀元素「霸權主義」的一把利器！在佈局頁面時有時候是須要消除塊狀元素霸權主義才能佈局好喲，好比KwooJan的博客中間內容部分，分爲左邊(LEFT)和右邊(RIGHT)，就是要用上面這個方法佈局的喲，以下圖




細心的同窗會注意到，在IE6中紅色方塊距離瀏覽器的左邊距並非CSS代碼中定義的20像素，而是40像素，以下圖：



其實這是IE6的一個BUG(IE6雙倍邊距BUG)，只要知足下面3個條件纔會出現這個BUG:

        1）要爲塊狀元素；
        2）要左側浮動；
        3）要有左外邊距(margin-left)；


解決這個BUG很容易，只須要在相應的塊狀元素的CSS屬性中加入「display:inline;」，代碼以下：

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

 

如今再看看，是否是IE6和FF顯示同樣了呢~

呵呵，這節課也比較容易吧，若是你們有不明白的能夠留言，我會作進一步解釋。
下節課，咱們講講「浮動清除(Clear)」問題！

最終代碼： 【第二課】浮動 實例 最終代碼.rar (1.31 KB, 下載次數: 2469) 

精簡後的CSS代碼加載更快，你們一看就明白了^_^

精簡後代碼： 【第二課】浮動 實例 最終代碼 精簡版.rar (1.45 KB, 下載次數: 3487) 

【第三課】清除浮動



        還記得第二課咱們作的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，咱們使用「float:left;」，打擊了塊狀元素的「霸道」，即塊狀元素不容許其餘元素和它處於同一行。咱們將紅色方塊的CSS代碼中加入了「float:left;」後，紅色方塊終於容許藍色方塊和它處於同一行。如圖：




        咱們換一種方法表達上面的意思，由於紅色方塊的「左側浮動」，才致使藍色方塊上移至紅色方塊的尾後；

        在上個例子中，爲了達到瀏覽器兼容性，咱們在紅色、藍色方塊CSS代碼中分別加了「float:left;」，這樣IE和FF中顯示效果同樣，若是此時咱們還想放一個寬度400像素，高度100像素的綠色方塊，並讓其處於第二行，但願效果以下圖：





但是這時候無論怎麼放，在IE中的效果始終是：





        致使綠色排到藍色的後面這種狀況就是由於藍色方塊CSS代碼中含有"float:left;"，可是爲了瀏覽器兼容性，又不能去掉(什麼？這句話看不明白，只能說明第二節課你沒有好好學，好好品味！)，怎麼辦？
好辦~！只要在CSS代碼中加入下面這段代碼：

        .clear{clear:both;}

並在HTML代碼中加入下面代碼：

        <div class="clear"></div>

上面這句話究竟加在哪一個位置呢，要加在藍色方塊和綠色方塊中間，而後看看效果是否是咱們想要的了~^_^

        <div id="redBlock">博客的左側</div>
        <div id="blueBlock">博客的右側</div>
        <div class="clear"></div>
        <div id="greenBlock">博客的版權信息</div>

 

目的就是爲了清除藍色方塊的浮動對下面綠色方塊的影響！是影響喲~是清除影響，而不是清除藍色方塊的浮動，或者說清除藍色方塊的浮動對下面區域塊產生的做用！（仔細品品我說的這句話！）

        若是仍是不明白，你就在紅色方塊和藍色方塊中間加上「<div class="clear"></div>」，看看效果變成什麼樣子，而後再品品我剛纔說的話！

        這節課就到這裏，下節課咱們作一個導航條，很實用的喲！必定要把前三節吃透，否則第四節會跟不上理解不透！

        第三課代碼：  第三課代碼.rar (1.46 KB, 下載次數: 2580) 

【第四課】導航條(上)



【注】本節全部的知識點均來自「知識一、二、3」，「基礎篇一、二、三、四、5」和「實戰篇的前三課」，思路是本節的、知識點是原來的，若是有看不懂的地方最好返回去再鞏固一下，也許看其中的某一節，你覺着簡單，你真的會嗎？真的能靈活運用嗎？若是前面的教程你採起了一目十行的方式瀏覽教程，而不是學習教程，這節內容搞很差就卡在哪一個前面講過的知識點上，因此建議你們學習的時候，認真的逐句的去理解教程中的每句話！  ---釐米IT學院  KwooJan

        好，開始上課！
      
        前三節課，咱們知道了什麼是「塊狀元素和內聯元素」，以及xHTML+CSS佈局的核心概念「盒子模型」，同時又學習了一下頁面佈局中兩種方法中的一種方法「浮動」，此次咱們就利用這三個概念，來製做一款經典的導航條，別看它其貌不揚，但是網上全部的導航條均可以在它的基礎上演變而來~，厲害吧~！其實理論都是同樣的，只要你能理解並學會這節課的內容，之後再困難的導航條你均可以輕鬆應對，好比下面的導航條：

      

OK！咱們要作的導航條的效果以下：鼠標移動上去背景變黑，而且字體顏色變成白色，


其實作這款導航條很容易的，我引導，你跟着作，這樣思路慢慢就造成了~


【第一步】

        咱們要先作一個容器（要求：ID爲「nav」，寬度爲960px，高度爲35px，位於頁面水平正中，與瀏覽器頂部的距離是30px；),這個容器就是放置咱們的導航的盒子~代碼以下：

HTML代碼：

  1. <div id="nav"></div>

     

CSS代碼：

  1. #nav{
width:960px;
height:35px;
background:#CCC;/*爲了便於查看區域範圍大小，故而加個背景色*/
margin:0 auto;/*水平居中*/
margin-top:30px;/*距離頂部30px*/
}

     

還有一點須要提醒的是，爲了頁面在瀏覽器中的兼容性，不要忘記在CSS文件頂部加入標籤重置代碼~

  1. body,div{padding:0; margin:0;}

     

怎麼樣，做出來了沒有，效果是否是一個灰色條（以下圖），位於頁面的正中間，而且全部瀏覽器效果同樣呢~



        若是沒有作出來只能說明你沒有認真看前面的教程~《2天駕馭DIV+CSS》教程自己就屬於經驗性和技巧性高度整合的集合體，採起一環套一環的逐步引導的方式來教你們，因此要求你們對每節課都要認真去讀，每句話都要認真品味，這樣作出來的頁面才能很好的兼容多種瀏覽器，而且代碼高度精簡，頁面加載速度也大大提高！

第一步的源代碼：  【第四課】導航條 - 經典導航1.rar (1.43 KB, 下載次數: 3972) 




【第二步】

        盒子作好了，咱們就要往裏面放導航條了，導航條的內容爲「W3Cfuns、釐米學院、培訓課程、我要充電、前端職業生涯、課程答疑」，若是咱們把這些內容(目前有6個)，當成酒杯的話，若是直接放到盒子裏面的話，確定會亂，而且還會東倒西歪，一點順序都沒有，可是咱們平時會用一個隔板將每一個酒杯隔開，這樣就使酒杯頗有序的放入盒子，而且牢穩並且防震，方便使用！如今咱們把這個隔板叫作「無序列表」，起個英文名字叫：ul,裏面的每一個單元格咱們也給起個英文名字叫「li」，你們想一想裏面的這個ul是否是和盒子裏面的空間同樣大，小了，酒杯放不進去，大了杯子就會不穩，因此咱們定義ul的時候大小必定要和外面的盒子同樣大，到這裏，應該有點思路了吧~

HTML代碼

  1. <div id="nav">
    <ul>
        <li>W3Cfuns</li>
        <li>釐米學院</li>
        <li>培訓課程</li>
        <li>我要充電</li>
        <li>前端職業生涯</li>
        <li>課程答疑</li>
    </ul>
</div>

     

CSS代碼：

  1. #nav ul{
        width:960px;
        height:35px;
}

     

效果做出來了沒有，下面是在IE6和FF中顯示效果(其餘瀏覽器效果你們本身測試，總結規律)：



        效果不同，爲何？在IE6中盒子被撐大，FF中卻沒有，可是咱們的「酒杯」卻出來了，還有咱們不但願咱們的酒杯縱向排列，而是橫向排列，怎麼辦呢？給你們一分鐘時間想~~~

        時間到！想不出來也不要緊，咱們一塊兒分析一下，首先ul是什麼標籤？
        是塊狀元素吧，ul裏面的li標籤也是塊狀元素，因此li也有塊狀元素的「霸道」，不容許其餘元素和本身處於同一行，總共六個<li>,因此他們六個就像臺階似的縱向排列起來了，若是想讓他們橫向排列，用浮動Float就能夠了，但是讓誰浮動呢，固然是<li>標籤嘍~代碼以下：

  1. #nav ul li{ float:left;}

     

效果是否是和下面的同樣呢





你們會發現雖然「酒杯」橫向排列了，但IE6和FF中的效果仍是不同的
        1）盒子(#nav)高度不同，
        2) 在FF中「酒杯」前面有個大黑圓點，而IE6中卻沒有！

解決上面這兩個問題，也很容易，以下：
        1）到目前這步，用到了兩個新的標籤ul和li，標籤ul和li有沒有進行重置？只要咱們在頁面中新寫一個標籤，就要進行重置，作法是，將ul、li標籤加入重置代碼中，「body,div,ul,li{padding:0; margin:0;}」
        2）「酒杯」前面的大黑圓點，是FF給li標籤訂義的默認樣式，咱們只須要將li的默認樣式去掉就是了，在ul標籤的CSS屬性中加入「list-style:none;」就OK了。

如今再瞅瞅，兩種瀏覽器的顯示效果是否是和下圖同樣了呢~



若是你作到這裏的效果和我說的不同，不要緊，我把第二步的源代碼發出來，對着上面說的再看看，就很容易學會了。

第二步的源代碼：  【第四課】導航條 - 經典導航2.rar (1.59 KB, 下載次數: 1358) 




【第三步】

        第二步的效果還不是咱們想要的，全部的「酒杯」都沒有保持「車距」，後面的文字所有貼着前面的文字。
好~！咱們如今就將他們分開！設置<li>標籤的寬度爲100像素：

CSS代碼：

  1. #nav ul li{
width:100px;
float:left;
}

     

爲了便於觀察咱們暫且將<li>標籤的背景設置成紅色(設置背景色，是頁面佈局中一個很重要的方法，便於查看塊狀元素區域範圍)

CSS代碼：

  1. #nav ul li{
width:100px;
float:left;
background:#f00;
}

     

效果以下：



        瞧瞧，發現問題了吧，咱們的<li>標籤的高度並無和咱們的盒子的高度同樣，這就是爲何在佈局頁面的時候，常常會設置一下背景色，就是這個道理，否則的話，你發現不了隱藏的問題，可是每每這些隱藏的問題就會致使頁面瀏覽器的兼容性大大下降!

        如今暫不把<li>標籤的背景色去掉，當咱們把它調成咱們須要的效果的時候再去掉！
繼續，咱們把li的高度設置成盒子的高度35像素，代碼本身寫，怎麼樣，高度同樣了吧，可是文字卻位於頂端，如何將它設置成居中呢，對嘍~設置行距（若是你不會，建議你看看這篇文章《兩種方法實現垂直居中》），在<li>的CSS代碼中再加入下面這句代碼：

  1. line-height:35px;

     


效果是否是和下圖同樣呢




好，文字的垂直居中解決了，輪到水平居中了，這個就容易了，直接在<li>的CSS代碼中再加入下面這句代碼：

  1. text-align:center;

     

怎麼樣，效果有點意思了吧~到這裏我再發一次代碼，以保證你們每步都能理解學會！
第三步源代碼：  【第四課】導航條 - 經典導航3.rar (1.62 KB, 下載次數: 922) 




【第四步】

        好~！作到這裏，有沒有發現一個問題，「前端職業生涯」與左右兩邊「我要充電」「課程答疑」的距離與「釐米學院」與左右兩邊「W3Cfuns」「課程培訓」的距離是不同的，以下圖：
<ignore_js_op>



        這樣的效果並非咱們想要的，導航條上的每個項之間的距離應該是相等的，這纔是咱們要的，爲了尋找緣由，咱們給li設置一個寬度爲1px的右外邊距：

      margin-right:1px;

這樣咱們就能夠看清楚每一個li的範圍，以下圖



        這時候應該發現問題的緣由了吧，由於咱們的<li>標籤是設置了寬度爲100像素，已經限定了它的寬度，若是文字多了它不會自動伸縮自適應的，那這時候咱們就須要去掉其寬度，這時候<li>的寬度就會縮小至文字的寬度，以下圖：



        若是咱們這時再添加一些文字(把咱們的酒杯換成一個大個的)，這個<li>也會跟着變大，你們去掉寬度後試試，是否是這個樣子，這樣咱們的導航條就比較靈活了，不會對「酒杯」的大小有所顧忌了！

雖然這個寬度自適應解決了，可是給文字的空間太少，視覺上感受不舒服，那麼咱們就幫它擴大一下空間，可是又要保證寬度自適應，解決方法很容易，加上左右內邊距就ok了，這裏設置邊距爲10px，在<li>標籤的CSS代碼內加上下面代碼，

       padding:0 10px;


效果是否是這樣



不管你的「杯子」是增大仍是縮小，<li>不但寬度會隨之增大縮小，可是杯子和杯子之間的距離永遠不變！怎麼樣有點意思吧~！

而後咱們再將li的背景色和右外邊距去掉，獲得的效果以下：




第四步的源代碼 :  【第四課】導航條 - 經典導航4.rar (1.62 KB, 下載次數: 1575) 

【第四課】導航條(下)



上節課咱們將導航條作成了下面的效果

由於導航條的每一項是須要點擊的，也就是說導航條的每一項都是連接，這個連接放到哪裏呢？固然是要放在盒子裏，哪一個盒子呢？答案是：標籤li這個盒子。


【第五步】
1）給導航的每一項加上連接；
2）連接文字大小修改成12px;
3）而且規定連接樣式，鼠標移上去和移出的效果；


製做方法：
1）導航加連接，爲了使導航更具備真實性，咱們這裏就用「釐米學院」的真實網址，你們本身練習的時候，連接地址就隨意了~
HTML代碼：

  1. <div id="nav">
    <ul>
        <li><a href="http://www.w3cfuns.com">W3Cfuns</a></li>
        <li><a href="http://www.w3cstudy.com">釐米學院</a></li>
        <li><a href="http://www.w3cstudy.com/course.aspx">培訓課程</a></li>
        <li><a href="http://www.w3cstudy.com/apply.aspx">我要充電</a></li>
        <li><a href="http://www.w3cstudy.com/career.aspx">前端職業生涯</a></li>
        <li><a href="http://www.w3cstudy.com/faq.aspx">課程答疑</a></li>
    </ul>
</div>

     

2) 文字大小12像素，這裏的文字指的是連接a，因此咱們對a進行樣式設置，

CSS代碼

  1. a{font-size:12px;}

     


3）鼠標移動上面和移出效果，文字默認狀態時黑色無下劃線的連接，鼠標移至上方，連接顏色變爲白色並帶有下劃線，鼠標移出後還原爲默認狀態。

CSS代碼

  1. #nav ul li a{color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}

     


注意：在這個例子中，咱們能夠將（2）和（3）合併

CSS代碼

  1. #nav ul li a{font-size:12px; color:#333; text-decoration:none;}
#nav ul li a:hover{color:#fff; text-decoration:underline;}

     


效果是否是和下面同樣，鼠標移上去變成白色的有下劃線的連接



第五步源代碼：  【第四課】導航條 - 經典導航5.rar (1.73 KB, 下載次數: 939) 

到這裏，基本上一個導航條就出來了~不過爲了能讓你們技能再提升一個層次，我引導你們繼續對導航條進行完善。




【第六步】
若是我但願鼠標移上去後，連接的背景變成黑色的，下面是個人步驟
首先把連接a加上一個背景，以方便看出來連接a的區域

  1. #nav ul li a{font-size:12px; color:#333; text-decoration:none; background:#0FF;}

     

怎麼樣，知道a的區域了吧



從上面能夠看出，鼠標移至連接上「箭頭」轉換爲「手」的有效區域就是亮藍色區域，若是將a的高度設定爲35px和盒子同樣高度，那麼這個有效區域的高度就會變爲35px，這樣用戶體驗比較好，如今網頁上的導航條基本上都是鼠標移至這個區域「箭頭」就會轉換爲「手」狀，因而我給a設置一個高度「height:35px;」，代碼以下：

  1. #nav ul li a{height:35px; font-size:12px;  color:#333; text-decoration:none; background:#0FF;}

     

但是無論我怎麼刷新瀏覽器，高度都沒有任何變化，不起做用，這是爲何呢？！

緣由就在於a屬於內聯元素，內聯元素是沒法設置寬度和高度的，width和height只是針對塊狀元素，說到這裏，解決辦法就出來了，只要咱們把內聯元素a轉化成塊狀元素就能夠了，咱們用「display:block;」將內聯元素轉化成塊狀元素。你們加上這段代碼，先不要刷新預覽頁面效果，閉上眼想一想界面會變成什麼樣子？

  1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF;}

     

在FireFox和IE6裏面顯示的實際效果倒是？！？！



        兩款瀏覽器顯示效果竟然截然不同，這是在頁面佈局中常常出現的狀況，實際效果與指望的效果不一樣，這就須要你們在平時多去總結。

        迴歸問題，IE6中爲何全部連接縱向排列了呢？其實這個也很簡單，IE認爲a既然轉化成塊狀元素，就擁有塊狀元素的特性---霸道，它是不容許其餘元素和它同一行，再加上也沒有對a的寬度進行設定，因此才致使IE6中這麼顯示，不過FF中爲何不這樣呢，和咱們想象的同樣，那是由於FireFox認爲a即便爲塊狀元素，也應該受到外面<li>元素的影響，因此如此顯示。

        究竟以誰爲標準？
        由於你們都認爲FF是標準瀏覽器，因此你們能夠以FF爲標準，不過我認爲，不用管誰標準不標準，那都是相對的，你們不要在這個問題上浪費精力，應該將精力用在思考如何提升頁面的瀏覽器兼容性，只要作出來的效果是咱們想要的就行！

        如何解決？
        其實解決的方法也很簡單，只須要在連接a的CSS代碼中加入「float:left;」

  1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left;}

     

問題迎刃而解，若是到這裏你仍舊不明白爲什麼如此解決，說明你沒有真正理解前面的課，特別是第二節的課，怎麼作？你應該知道....回去再品品去~

第六步源代碼：  【第四課】導航條 - 經典導航6.rar (1.75 KB, 下載次數: 654) 




【第七步】

可是這樣你不覺着，每一個連接的左邊和右邊是否是太擠了，緊貼着a區域的左側和右側，應該怎麼作？仍是很簡單，只須要再加上一句話「 padding:0 10px;」

  1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; background:#0FF; float:left; padding:0 10px;}

     

如今再瞅瞅，是否是下面的效果



這樣就不那麼擠了吧，看着舒服了吧，可是這離咱們想要的效果，只剩下最後一兩步了，由於如今看到的鏈接效果是，鼠標移上去和拿開背景都是藍色的，咱們如今只須要將a連接中的背景去掉，移到a:hover的CSS代碼中，而且顏色變成「#000」就ok了~

  1. #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; float:left; padding:0 10px;}
#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}

     

怎麼樣，和下面的效果同樣麼？



效果好多了吧，這下是咱們想要的效果了吧~

第七步源代碼：  【第四課】導航條 - 經典導航7.rar (1.75 KB, 下載次數: 740) 




【第八步】
如今導航條上的每一個連接之間不夠緊湊，以下圖


這個狀況造成的緣由在於給li設置了「padding:0 10px;」,解決方法就是將li的CSS樣式表裏的「padding:0 10px;」刪除就能夠了，這樣每一個連接就變得十分緊湊，效果以下圖：




另外，根據實際狀況，鼠標移動到連接上後，不須要下劃線，那就去掉a:hover裏面的「text-decoration:underline;」就能夠了。

OK！導航條搞定！最終效果是：



第八步源代碼：  【第四課】導航條 - 經典導航8.rar (1.75 KB, 下載次數: 1949) 




【進階思考】
        在本節的導航條實例中，一開始咱們就給導航條外面設置了一個div盒子，並設定id爲「nav」，你們能夠思考一下，若是不設置這個div盒子，而是將同爲塊狀元素的ul標籤做爲導航的盒子是否能夠呢？若是能夠的話，咱們的結構就少了一層，代碼就更精簡了，頁面加載速度也就會快些。




【結束語】
        你們還能夠把背景設置成其餘顏色，用圖片也能夠！下面的漂亮的導航條就是我們最經典的導航條演變而來，有興趣的能夠嘗試一下！


如今你們明白，爲何一開始我說這款導航條能夠演變出成千上萬的不一樣特點的導航條了吧~萬變不離其宗！

第四課的思路就是這樣的，若是吃透了這節課，那麼之後什麼樣子的導航都能很輕易做出來，若是你再和js很好的結合起來用~你就能夠很自信的向老闆提出加薪了！！！^_^

 

【大練習】前四節課大練習之簡單頁面佈局



      爲你們設計了一個大練習，用到的知識點，所有是前四節的內容，若是您可以徹底理解前四節內容，你能夠在一個小時內完成！

        圖片已經幫你們切割好了，直接下載就能夠，若是想本身切圖的話，用到的文字能夠去PSD源文件裏面複製，PSD源文件也已經發上來了，具體如何製做，怎麼製做標準，有哪些技巧，下節課我來引導着你們完成。



已切分的圖片下載：  第四課大練習已切分的圖片.rar (254.43 KB, 下載次數: 11212) 
PSD源文件下載：  第四課大練習PSD源文件.rar (2.93 MB, 下載次數: 15335) 

 

 

【第五課】浮動佈局之結構設計



《前四節大練習》作的怎麼樣？有沒有遇到困難？若是有，不要緊，這節教你們掌握「浮動佈局頁面技能」。

這節主要講講頁面的結構設計，結構設計的好壞直接影響到頁面的加載速度，以及搜索引擎的抓取，因此你們要認真對待。



【第一步】
首先咱們須要對頁面進行分析，由幾大塊組成，從效果圖上不難看出，由四大塊組成「頭部版塊、廣告版塊、內容版塊、頁底版塊」，分別給他們起個名字以下：
        頭部版塊：header
        廣告版塊：banner
        內容版塊：content
        頁底版塊：footer



這樣就能夠很輕鬆的將頁面第一層結構寫出來
HTML代碼：

  1. <div id="header"></div>
  2. <div id="banner"></div>
  3. <div id="content"></div>
  4. <div id="footer"></div>
複製代碼


第一步源代碼： 浮動佈局頁面1.rar (255.16 KB, 下載次數: 2345) 




【第二步】
頭部版塊有兩部分組成，左側的logo和右側的導航條
1）網站logo通常是張圖片，並且是能夠點擊的，點擊後回到首頁，因此logo部分的結構爲：

  1. <div id="logo">
    <a href="http://www.w3cstudy.com">
        <img src="images/logo.png" />
    </a>
</div>

     

2）導航nav咱們確定要用標籤ul和li，而li裏面內容又是連接，在加上真實的連接信息後，導航條部分的結構以下：

  1. <ul id="nav">
     <li><a href="http://www.w3cstudy.com">首 頁</a></li>
     <li><a href="http://www.w3cstudy.com/course.aspx">培訓課程</a></li>
     <li><a href="http://www.w3cstudy.com/students.aspx">優秀學員</a></li>
     <li><a href="http://www.w3cstudy.com/faq.aspx">課程疑問</a></li>
     <li><a href="http://www.w3cstudy.com/career.aspx">職業生涯</a></li>
     <li><a href="http://www.w3cfuns.com/">學員社區</a></li>
     <li><a href="http://blog.w3cstudy.com/">官方博客</a></li>
     <li><a href="http://www.w3cstudy.com/address.aspx">學院地址</a></li>
</ul>

     

到此，整個頭部的結構設計完成，完整的結構以下：

  1. <div id="header">
     <div id="logo">
          <a href="http://www.w3cstudy.com"><img src="images/logo.png" /></a>
     </div>
     <ul id="nav">
          <li><a href="http://www.w3cstudy.com">首 頁</a></li>
          <li><a href="http://www.w3cstudy.com/course.aspx">培訓課程</a></li>
          <li><a href="http://www.w3cstudy.com/students.aspx">優秀學員</a></li>
          <li><a href="http://www.w3cstudy.com/faq.aspx">課程疑問</a></li>
          <li><a href="http://www.w3cstudy.com/career.aspx">職業生涯</a></li>
          <li><a href="http://www.w3cfuns.com/">學員社區</a></li>
          <li><a href="http://blog.w3cstudy.com/">官方博客</a></li>
          <li><a href="http://www.w3cstudy.com/address.aspx">學院地址</a></li>
     </ul>
</div>

     

第二步源代碼：  浮動佈局頁面2.rar (255.36 KB, 下載次數: 1574) 




【第三步】
Banner部分在設計中是一款「拉洋片」效果，在佈局頁面的時候，咱們只須要將其中的一個圖片放在此處就能夠，由於廣告也是能夠點擊的，因此就須要在圖片外面加上連接，那麼結構代碼以下：

  1. <div id="banner">
    <a href="http://www.w3cstudy.com"><img src="images/banner.jpg" /></a>
</div>

     

第三步源代碼： <ignore_js_op> 浮動佈局頁面3.rar (255.37 KB, 下載次數: 871) 




【第四步】
內容content版塊呢，是有左右兩部分組成，左側咱們雖然能夠起名爲left，右側爲right，可是咱們不要這麼命名，左側部分仔細看看其實主要是文章，那麼咱們就能夠考慮給他起個id名爲「article」，右側爲資訊信息類的內容，因此id名爲「info」，這樣會更加語義化一些，更容易讓人清楚這個版塊的做用，及內容信息。

固然，咱們能夠將「left」和「article」組合，用駱駝命名法來命名左側的版塊id爲「leftArticle」，右側的id爲「rightInfo」，OK，第二層結構以下：

  1. <div id="content">
   <div id="leftArticle"></div>
   <div id="rightInfo"></div>
</div>

     

下面咱們開始分析內容content版塊的第三層，從左側的leftArticle開始
1）左側的文章版塊，分「文章圖片，文章標題和文章內容」三部分
文章圖片：從功能上來講文章頂部圖片應該是能夠點擊的，點擊後進入文章詳情，因此圖片外面仍是要被連接a包含的；

  1. <a href="http://blog.w3cstudy.com/?p=5"><img src="images/articleBanner.jpg" /></a>

     

文章標題：文章標題就是文章內容的總結，對搜索引擎來講文章標題的權重要比內容要高，怎麼才能讓搜索引擎知道這裏是標題呢，固然是用標題標籤h1~h6標籤了，這裏咱們選用h1，還有一點不要忘記標題也是能夠點擊的，因此也要用a進行包含，

  1. <h1><a href="http://blog.w3cstudy.com/?p=5">Web前端開發工程師好找工做嗎？</a></h1>

     

文章內容:既然是內容，確定就少不了段落標籤p了，有幾段文字就用幾個「<p></p>」,這樣文章部分的結構，就逐漸清晰明朗了，

 

<p>據09年全國Web前端開發行業調查統計顯示，09年大型企業對於Web前端開發人才需求緊缺。 Web前端開發目前是一種新興職業，專業的前端開發人員絕大部分存在於大型企業中，如騰訊、百度等，換種說法就是：選擇從事Web前端開發就等於你的一隻腳已經邁進了騰訊、百度等高薪企業。</p>
<p>... ...</p>
<p>... ...</p>
<p>... ...</p>

 


 

複製代碼

leftArticle版塊OK！：
到此步源代碼：  浮動佈局頁面4-1.rar (256.09 KB, 下載次數: 1315) 

左側佈局完成，那麼右側又如何佈局呢，聽我細細分解，首先右側分兩個版塊「職業生涯」和「好職推薦」，仔細看會發現他們有共同的結構，共同的樣式，只要將其中一個作出來，另一個結構和樣式直接複用就能夠了。

那就分析上面的「職業生涯」的結構，首先有個標題，其次下面是標題的一個列表，這樣很容易讓人想到用「ul+li」的組合，可是咱們這裏有一個更好方法，用「dl+dt+dd」組合，這種組合在這裏是一個很不錯的選擇，要比「ul+li」要好，不少同窗對「dl+dt+dd」組合不熟悉，這裏正好練一下，熟悉一下，通過上面的分析咱們就能夠得出「職業生涯」版塊的結構。

  1. <dl>
   <dt>職業生涯</dt>
   <dd><a href="http://blog.w3cstudy.com/?p=60">Web前端開發工程師須要掌握哪些核心技能？</a></dd>
   <dd><a href="http://blog.w3cstudy.com/?p=51">我是程序員，有必要進行web前端開發的學習嗎?</a></dd>
   <dd><a href="http://blog.w3cstudy.com/?p=32">我是網站美工，目前發展遇到瓶頸，該如何解決？</a></dd>
   <dd><a href="http://blog.w3cstudy.com/?p=22">我適合從事web前端開發行業嗎？</a></dd>
   <dd><a href="http://blog.w3cstudy.com/?p=15">Web前端工程師如何給本身定位？</a></dd>
    <dd><a href="http://blog.w3cstudy.com/?p=5">Web前端開發工程師好找工做嗎？</a></dd>
</dl>

     

「職業生涯」下面的「好職推薦」版塊就好佈局了，換換標題，換換內容就能夠了
rightInfo版塊OK！也就是說整個Content版塊結構設計完成！
到此步源代碼：  浮動佈局頁面4-2.rar (256.59 KB, 下載次數: 1600) 




【第五步】
關於頁底版塊的佈局，效果圖上是有兩行文字組成，第一行文字所有爲連接，

  1. <p>
<a href="#">關於W3CStudy</a> | <a href="#">廣告服務</a> | <a href="#">提交問題</a> | <a href="#">聯繫咱們</a> | <a href="#">版權聲明</a> | <a href="#">關於隱私</a> | <a href="#">合做夥伴</a>
</p>

     

第二行左邊的是備案號，右側是版權信息

  1. <p>
  <a href="#">京ICP備10055601號</a>  All rights(C)2008-2010 Reserved
<p>

     

到這裏頁底版塊結構也出來了

  1. <div id="footer">
<p>
<a href="#">關於W3CStudy</a> | <a 
href="#">廣告服務</a> | <a href="#">提交問題</a> | <a 
href="#">聯繫咱們</a> | <a href="#">版權聲明</a> | <a 
href="#">關於隱私</a> | <a href="#">合做夥伴</a>
</p>
<p>
  <a href="#">京ICP備10055601號</a>  All rights(C)2008-2010 Reserved
<p>
</div>

     

可是這麼作並非最好的，既然文字分兩行，那就在第一行的最後加上一個<br/>就能夠了，每一個標籤都有本身的用途，沒有必要每一行都用p標籤包含起來，這樣作咱們的結構是否是又少一層，代碼是否是更精簡了呢，因此結構就能夠精簡爲:

  1. <div id="footer">
<a href="#">關於W3CStudy</a> | <a href="#">廣告服務</a> | <a href="#">提交問題</a> | <a href="#">聯繫咱們</a> | <a href="#">版權聲明</a> | <a href="#">關於隱私</a> | <a href="#">合做夥伴</a>
<br/>
<a href="#">京ICP備10055601號</a> All rights(C)2008-2010 Reserved
</div>

     

OK 了~！
至此，咱們整個頁面結構設計完成！怎麼樣挺簡單吧，這節把頁面的骨架搭建完成，下節課咱們就講一下樣式設計，給頁面穿上衣服，成爲一個真正的頁面！

本節最終源代碼爲：  浮動佈局頁面5.rar (256.71 KB, 下載次數: 3512) 

 

【第五課】浮動佈局之表現設計



W3C標準建議你們結構和表現相分離，「結構」就是上節課咱們搭建的HTML頁面框架，「表現」則是這節課的內容，給頁面穿上衣服，也就是下面要學的「CSS樣式設計」，樣式設計的好壞也會直接影響頁面的加載速度以及改版的複雜度。咱們緊接着上節課

【第六步】
爲了頁面可以具備更好的兼容性，因此在設計表現的時候，首先要對標籤重置，不明白的能夠去看看[基礎二] CSS選擇器的通用選擇器部分，在上節設計的結構裏面，咱們用到哪些標籤就重置哪些標籤，上節課用到「body,div,p,ul,li,dl,dt,dd,h1,a」這麼幾個標籤，因此重置代碼爲：

  1. body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}

     

打開效果圖，咱們先看一下主背景，是一個從上至下由藍色漸變爲白色，且帶有云彩的背景，這個無規律的漸變背景咱們應該怎麼作？

針對背景的漸變咱們好處理，將漸變背景切割爲一個寬度爲10px的小圖，起名爲bg，而後水平方向平鋪（repeat-x）



而對於雲彩這種無規律的背景，直接切割出來做爲背景，起名爲clouds，以下圖：


這兩張背景圖，在每步最後提供的源代碼的images文件夾內能夠找到，名子分別爲bg.gif和clouds.gif。

        這麼處理的好處是爲了提高網頁的用戶體驗，若是咱們不作任何處理直接將頁面內的背景整個切割下來，當用戶打開頁面，會看到背景一片空白，而後瞬間顯示背景，給用戶的感受很突兀，而咱們的作法是，先加載前面那個10px寬度的小圖片，這樣背景加載速度快，用戶打開網頁的時候，先把這種背景圖加載上，不至於展示在瀏覽者前面的是一片空白，而後等雲彩背景下載完畢後，再加載在頁面內，用戶感受會很舒服，這就是爲何Web前端開發人員還要懂一些用戶體驗設計方面的知識。

        具體如何實現背景的顯示順序，方法有不少，針對本例，最適用的辦法就是設置爲不一樣的盒子的背景，bg.gif就當作html盒子的背景，而clouds.gif就當作body盒子的背景，由於網頁會先加載html盒子，而後再加載body盒子，那麼CSS代碼以下：

 

html{background:url(../images/bg.gif) repeat-x;}
body{background:url(../images/clouds.gif) repeat-x;}

效果是像下面這樣，背景加載上了

 



此時內容有點亂這是確定的，由於咱們尚未對他們定義樣式~

第六步源代碼：  浮動佈局頁面6.rar (256.84 KB, 下載次數: 1676) 



【第七步】
        頁面的寬度爲1000px，因此四大板塊header、banner、content、footer的寬度也爲1000px，且水平居中於瀏覽器，因此用CSS集體聲明的方法，對四大板塊的共一樣式進行定義：

 

#header,#banner,#content,#footer{width:1000px;  margin:0 auto;}

其中「margin:0 auto；」的做用就是將頁面元素水平居中，這個很重要，佈局頁面常常用到須要記住！

 

如今再看一下效果，四大板塊是否是所有水平居中於瀏覽器了~

        另外效果圖中的頭部是與上邊沿有45px的距離，爲實現這個效果，咱們採用設置body上內邊距的辦法,將padding-top加到body的樣式內：

CSS代碼

 

body{background:url(../images/clouds.gif) repeat-x; padding-top:45px;}

離咱們的最後完成頁面製做又前進一步~

 


第七步源代碼：  浮動佈局頁面7.rar (256.9 KB, 下載次數: 891) 



【第八步】
注意：第八步細節上的內容多些，有一點作的不到位，就會致使頁面兼容性問題，因此你們耐下心來，仔細品味每一句話。

        你們有沒有發現一個問題，網頁裏全部可以點擊的連接圖片，所有都有一個寬度爲2px的紫色邊框，不美觀而且還會致使後面作出的頁面出現兼容性的問題，這個不是咱們想要的，因此咱們要將這個邊框去掉！CSS代碼以下所寫：

 

img{border:none;}

上面這段代碼是對img標籤邊框的重置，因此咱們要把它和以前標籤內外邊距重置的代碼放一塊，以下：

 

 

body,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;}
img{border:none;}

這樣頁面上的圖片清爽多了，後面咱們還有對其餘標籤的重置，用到的時候，咱們再添加到第二條的後面。

 



上節咱們分析過了，頭部header包含兩部分，左側的logo和右側的導航nav。

先說說左側logo部分，回憶一下上節課logo部分的結構：
HTML代碼：

 

<div id="logo">
  <a href="http://www.w3cstudy.com"><img src="images/logo.png" /></a>
</div>

分析一下上面的結構，首先最外層由一個塊狀元素div構成的盒子，第二層由內聯元素a構成，第三層由內聯元素img構成，若是對這些經常使用標籤分不清哪些是塊狀元素哪些是內聯元素，就去看看xHTML標籤頁面。

 


        接着上面，img標籤是一個很特別的標籤，由於它自己是內聯元素，但卻體現出塊狀元素寬高起做用的特性，這是很矛盾的地方，這就爲頁面佈局埋下隱患，要麼爲內聯元素，要麼爲塊狀元素，在這裏咱們更須要它的塊狀元素的屬性，因此咱們將身爲內聯元素的img標籤轉化爲塊狀元素，用「display:block; 」。

        既然第三層的img轉化爲塊狀元素，根據W3C規範，內聯元素是不能包含塊狀元素的，因此咱們還必須把第二層的連接a，也要轉化爲塊狀元素，仍是用「display:block; 」。

        咱們但願點擊logo圖片的任何一個地方均可以回到首頁，也就是說第二層a的有效點擊區域大小就爲圖片的大小，而外面的盒子的大小也等於圖片的大小。

那麼相應的樣式代碼以下：
CSS代碼：

 

#logo{width:220px; height:54px; float:left; background:#991616;}
#logo a{display:block; width:220px; height:54px;}
#logo a img{display:block;}

針對代碼中的「#logo a img{}」的寫法不清楚的，就去看看[基礎二] CSS選擇器的選擇器的嵌套

 


代碼中的「float:left；」的做用這裏再也不說了，不明白的同窗去看一下[第二課] 浮動

代碼中的「background:#991616;」是一個從logo圖片上取下來的紅色，目的和前面的設置頁面背景同樣，爲了保證在網速比較慢的狀況下，logo圖片還未加載完成之時，先顯示紅色背景，加強用戶體驗！

此步源代碼：  浮動佈局頁面8-1.rar (256.98 KB, 下載次數: 729) 


        咱們就能夠進一步思考，既然a已經設置了寬度和高度，外面的那個id爲logo的div，其實就沒有存在的必要了，倒不如直接去掉外層的div，並將a的id設置爲logo，這樣咱們的結構就少一層，代碼就少一些，這正是咱們指望的，因此logo部分的HTML結構就能夠變爲：

 

<a id="logo" href="http://www.w3cstudy.com"><img src="images/logo.png" /></a>

CSS代碼就能夠變爲：

 

 

#logo{display:block; width:220px; height:54px; float:left; background:#991616;}

而「#logo a img{display:block;}」就要轉化爲

 

 

#logo img{display:block;}

由於如今的#logo已經爲a的id了，再也不是原來最外層的div的id。

 


此步源代碼：  浮動佈局頁面8-2.rar (256.97 KB, 下載次數: 814) 


        導航nav這塊的CSS代碼就不說了，若是CSS代碼寫不出來，就去回顧一下[第四課] 導航條(上) | 導航條(下)
這裏直接將CSS代碼列出來

 

#nav{width:780px; height:54px; float:left; background:#393838; list-style:none;}
#nav li{float:left;}
#nav li a{display:block; width:86px; height:54px;  line-height:54px; text-align:center; font-size:12px; color:#ccc; text-decoration:none; float:left;}
#nav li a:hover{color:#fff;}

有一點須要補充，如今咱們實現的效果是鼠標移至導航條欄目的上面，文字由灰色變爲白色，鼠標移出，文字又轉爲灰色，而處於激活狀態的欄目的背景是一個灰色且兩邊帶有光影的圖片，以下圖：

 


激活狀態的欄目是不受鼠標的移入和移出影響的，這個應該怎麼作呢？咱們須要定義一個類選擇器，專門加在處於激活狀態的欄目上：
CSS代碼

 

#nav li .navActive{ background:url(../images/navHoverBg.png) no-repeat; color:#fff;}

若是激活狀態的欄目是「首頁」，結構代碼就這麼寫

 

HTML代碼

 

<li><a href="http://www.w3cstudy.com" class="navActive">首 頁</a></li>

到這裏header的樣式定義基本完成

 


此步源代碼：  浮動佈局頁面8-3.rar (257.12 KB, 下載次數: 1442) 

注意：通常狀況下，不少人會認爲header部分的樣式定義就完成了，其實沒有注意到這裏面隱藏着一個潛在危險，就是<div id="header">高度自適應的問題，儘管裏面的logo和導航條都設置了高度，可是header的高度在IE七、IE八、IE九、FF內，高度是不能自動適應裏面元素的高度，爲了更清楚的說明問題，你們能夠將HTML結構代碼中的導航條部分刪除，而後再給header設置一個背景色爲黑色#000，看看header的高度是否可以自適應logo的高度。

刪除導航條代碼後的header結構
HTML代碼

  1. <div id="header">
        <a  id="logo" href="http://www.w3cstudy.com"><img src="images/logo.png" /></a>
</div>

     

CSS代碼

  1. #header{background:#000;}

     

在IE6和FF內的顯示效果以下：


        發現問題了沒有，在FireFox內，看不到背景爲黑色的header，由於他不可以自適應內部元素的高度，因此它的高度變爲零，而在ie6裏面卻能夠正常顯示，這是一個很嚴重的問題，若是高度不能自適應的話，那內部子元素logo和nav的浮動產生的影響就會「外泄」，對header外面的版塊產生影響，從而產生版塊錯位！

        解決這個問題其實很簡單，不是高度不能自適應嘛，那就給他設置一個高度，高度值爲子級元素的高度，那這樣header這個盒子就能夠恰好裝下內部的子logo和nav，而不至於浮動的影響「外泄」，可是這種辦法，不夠靈活，若是有一天header內部多了一些元素，那就須要再次計算一會兒級元素的高度，比較麻煩，下面介紹第二種方法，在不設置header的高度狀況下，不管內部元素再多，header的高度也會自動適應，直接在header的樣式裏寫入「overflow:hidden;」就能夠了

  1. #header{overflow:hidden;}

     

如今再去看看FF下的頁面，是否是黑色的header顯示出來了，既然高度自適應了，黑色的背景也就沒用了，去掉它，而後再在HTML結構代碼內恢復導航代碼，這樣作纔是真正的完成了頁面header部分的樣式定義~

一個Web前端開發人員是否專業，就體如今這些小細節上！

第八步源代碼：  浮動佈局頁面8-4.rar (257.13 KB, 下載次數: 956) 




【第九步】
        針對banner版塊的樣式定義，相對第八步就簡單多了，結構和logo版塊同樣，對結構進行優化，將最外層的div去掉，而後將裏面的a定義爲banner，因此banner版塊的結構以下：

  1. <a id="banner" href="http://www.w3cstudy.com">
              <img src="images/banner.jpg" />
</a>

     

CSS代碼：

  1. #banner{display:block; width:1000px; height:292px; margin:10px auto;}
#banner img{display:block;}

     

其中「margin:10px auto;」等價於「margin:10px auto 10px auto;」,四個數值的順序是「上右下左」，根據第七步咱們知道若是設置左右爲auto，那麼版塊就會居中，可是在這裏咱們還想讓banner距離上面的header和下面的content的距離爲10px，那就設置上下爲10px就能夠了，因而得出了「margin:10px auto;」

        到這裏，效果和設計上的是同樣的，可是做爲Web前端開發人員，必定要思考全面，若是圖片的大小不是1000px*292px怎麼辦？圖片大了，就會溢出，圖片小了不美觀，因此咱們這裏還要加一句，不管圖片的大小如何，只要在頁面上顯示，寬高永遠是1000px*292px

  1. #banner img{display:block; width:1000px; height:292px;}

     

這句話的意思就是#banner裏面的圖片大小爲1000px*292px，不管圖片本來大小，只要在#banner內，就是這個寬高。
若是第九步裏面有看不明白的，說明第八步沒有仔細看，返回去再去學習一下。

第九步源代碼：  浮動佈局頁面9.rar (257.17 KB, 下載次數: 1130) 

第九步完成後的效果






【第十步】
        下面將針對content版塊進行樣式設計，從效果圖上咱們能夠看出，content版塊分爲兩塊，左側的文章（leftArticle）和右側的資訊（rightInfo）。

        首先分析下思路，content內部的leftArticle和rightInfo兩個都要左側浮動，內部元素浮動就會致使外面的content的高度不可以自適應內部元素的高度，因此咱們首先要在content的CSS代碼中加入「overflow:hidden;」,順便將背景色、文字大小和文字行距也給定義了，以下：

  1. #content{overflow:hidden; background:#eaeaea; font-size:12px; line-height:24px;}

     

而後咱們再針對leftArticle和rightInfo單獨定義樣式，仔細觀察效果圖可以很清楚的發現，leftArticle和rightInfo上下左右都有10像素的外邊距，若是咱們用左側浮動來實現2欄效果，在存在外邊距的狀況下就會出現IE6的雙倍邊距Bug（在[第二課] 浮動講過），爲了不出現bug，咱們就利用「display:inline;」,因此他們兩個的CSS就這麼定義

  1. #leftArticle,#rightInfo{margin:10px; float:left; display:inline;}

     

OK,他們兩個的公共樣式定義完了，下面就開始對他們單個定義，在這以前，你須要意識到，本來leftArticle和rightInfo的寬度分別爲680px和320px，當存在10px的外邊距後，若是再給他們用CSS定義寬度的話，那麼寬度的數值就變爲660px和300px，都要減去20像素（爲何是20px，由於存在10px左外邊距和10px右外邊距）

  1. #leftArticle{width:660px;}
#rightInfo{width:300px;}

     

如今再看看效果，頁面雛形是否是已經出來了~，開心吧~



此步源代碼：  浮動佈局頁面10-1.rar (257.23 KB, 下載次數: 896) 

        咱們繼續觀察左側的leftArticle，是否是有個圖片，圖片是否是能夠點擊的，之後遇到圖片連接這種狀況，第一反應就是先將這兩塊給設置成塊狀元素，咱們在這裏用駱駝命名法，給圖片外面的連接起個id叫articlePicA，意思是文章圖片外部的連接

  1. <a id="articlePicA" href="http://blog.w3cstudy.com/?p=5"><img src="images/articleBanner.jpg" /></a>

     

相應的CSS以下

  1. #articlePicA,#articlePicA img{display:block;}

     

圖片連接搞定！下面輪到文章的標題，在HTML結構中用的是<h1>標籤，如今咱們要按照效果圖上的設計，標題距離上面的圖片和下方的文字的距離爲20px，文字的大小爲24px，首選字體爲「微軟雅黑」，其次爲「黑體」

  1. #leftArticle h1{margin:20px 0; font-size:24px; font-family:"微軟雅黑", "黑體";}

     

對於標題與上下的距離這裏用的是外邊距margin來實現，固然也能夠用padding，若是這樣就會把盒子給撐大，就須要對文字再次定義，讓其垂直居中，反而麻煩了，方法不止一種，做爲Web前端開發工程師，必定要用最簡單的代碼實現效果，這也是體現是否專業的一方面。

        預覽頁面後，發現字體變了，可是大小卻沒有變化，緣由是因爲瀏覽器存在默認樣式表產生的，因此咱們就須要對h1進行重置，以下：

  1. h1{font-size:100%;}

     

加上這句話是否是咱們前面設置的h1標籤的文字大小就變爲24px了

        既然是重置代碼，咱們就須要將它和其餘的重置代碼放一塊，好，如今咱們的重置代碼有三行了，分別是針對標籤的內外邊距的重置，圖片邊框的重置，以及h1文字大小的重置。

  1. body,div,p,ul,li,dl,dt,dd,h1,a{margin:0; padding:0;}
img{border:none;}
h1{font-size:100%;}

     

將製做出來的標題和效果圖中的標題對比，發現效果圖內的連接是紅色的，鼠標移上去會出現下劃線，爲實現這個效果就須要對標題<h1>內的連接<a>的樣式進行定義

  1. #leftArticle h1 a{color:#900; text-decoration:none;}
#leftArticle h1 a:hover{text-decoration:underline;}

     

標題定義完了，下面說說內容，仍是要和效果圖進行對比，對比的結果是效果圖上的文字顏色並非純黑，而是數值爲「#333」的黑色，而且每段文字都會縮進兩個文字，每段文字距離下段文字之間的距離是30px，文字大小爲14px，CSS以下定義：

  1. #leftArticle p{color:#333; text-indent:2em; margin-bottom:30px; font-size:14px;}

     

怎麼樣到這裏左側leftArticle的效果是否是和效果圖裏的同樣了呢

此步源代碼：  浮動佈局頁面10-2.rar (257.37 KB, 下載次數: 918) 


        下面輪到定義rightInfo版塊的樣式了，從效果圖裏不難看出，「職業生涯」和「好職推薦」之間有10px的距離，實現這個效果咱們就採起設置dl的下外邊距的方法

  1. #rightInfo dl{margin-bottom:10px;}

     

針對每一個版塊的標題dt的定義，以下：

  1. #rightInfo dl dt{
  background:url(../images/title.jpg) no-repeat;
  height:32px;
  line-height:32px; 
  color:#FFF; 
  font-size:14px; 
  font-weight:bold; 
  text-indent:20px;
}

     

背景咱們就直接採用已經切好的title.jpg且不平鋪，dt高度就是title.jpg的高度32px，爲了使文字垂直居中，採起設置行高的方法，不會此方法的去看文章《兩種方法實現CSS垂直居中》，而後設置文字大小爲14px、粗細爲加粗、以及文字縮進20px。

下面是針對dd的定義

  1. #rightInfo dl dd{
  height:24px; 
  line-height:24px;
  background:url(../images/dot.gif) no-repeat 7px 10px; 
  text-indent:16px;
}

     

重點解釋一下第三句，第三句的目的是將作好的小紅點圖片dot.gif設置爲dd的背景且不平鋪，距離dd左側的距離爲7px，上面的距離爲10px；

dd裏面的連接顏色還不是咱們效果圖上的效果，定義以下：

  1. #rightInfo dl dd a{color:#333; text-decoration:none;}
#rightInfo dl dd a:hover{color:#900; text-decoration:underline;}

     

OK！右側版塊樣式定義完成！頁面效果以下：




第十步源代碼：  浮動佈局頁面10-3.rar (257.47 KB, 下載次數: 822) 




【第十一步】
        若是前面幾步掌握的不錯，那麼這一步就是最簡單的一步，學起來會輕鬆不少，仍是要看效果圖，footer是一個顏色爲#393838灰色塊，與上部的content距離是10px，自身高度是70px，文字顏色爲灰白色(#ccc)且水平居中,文字與footer頂部的距離爲18px，行距也是18px，樣式定義以下：

  1. #footer{
  background:#393838; 
  height:52px;
  line-height:18px; 
  margin-top:10px; 
  padding-top:18px;
  text-align:center;
  color:#ccc;
  font-size:12px; 
}

     

由於設置了padding-top:18px,這個上內邊距，因此定義footer的高度就要由原來的高度，減去內邊距，即70px-18px=52px，這樣footer在視覺上的高度纔是70px。

這時的效果與效果圖上的很接近了，惟獨就是連接的顏色和樣式，加上下面的代碼瞅瞅

  1. #footer a{color:#ccc; text-decoration:none;}
#footer a:hover{text-decoration:underline;}

     

怎麼樣頁面和效果圖同樣了吧~！

        細心的同窗也許會發現，頁面內的英文的字體所有是「宋體」，不是十分的美觀，不如英文經常使用的字體verdana，那咱們就給整個頁面內的文字字體設置首選字體爲「verdana」，只須要在body的樣式裏，加入「font-family」就能夠了

 

body{background:url(../images/clouds.gif) repeat-x; padding-top:45px; font-family:Verdana, Geneva, sans-serif;}

第十一步源代碼：  浮動佈局頁面11.rar (257.51 KB, 下載次數: 3356) 

 




【結束】
此時此刻，咱們將一個成品的網頁設計成功的製做成網頁！恭喜你們！

若是您學習的目的僅僅是將頁面佈局出來，那麼你畢業了，若是你是Web前端開發工程師或者打算從事Web前端開發，那就不能將本身侷限於「能把頁面製做出來就行」，網頁不僅是給人看的，作出來擺在那裏就行，咱們要實現網頁的價值！

實現網頁價值，就必須先學會，如何提高頁面對搜索引擎的親和度，如何將代碼高度壓縮，如何提高頁面加載速度，如何爲企業節省互聯網成本，如何提高網頁的總體價值，將頁面優化至極致！這些內容將在中高級課程中告訴你們。

好！下課！

 

 

【第六課】定位



        不少學習佈局的同窗，都卡在定位這塊，難就難在相對定位與絕對定位的配合上，不知道他們兩個之間具體有什麼區別。

        這節課雖然文字性的內容比較多，可是基本上每一句話都很重要，若是想學好，那就耐下心來仔細看，對教程中的每一個假設都要本身驗證，本身總結規律，若是本身懶的證實，那就記住本節最後的話就好了。

好，上課！

提問：若是頁面內某個元素沒有設定position屬性，那麼他是否具備position屬性？
回答：具備position屬性，而且屬性值是static。緣由在於網頁裏任一元素的默認position屬性值均是static（靜態）。

上面這個問題主要是給你們補充一個知識點，不少Web前端開發工程師都不知道這點，因此在這節開頭給你們補補課。

這節課主要講講absolute（絕對定位）和 relative（相對定位）。



【position:absolute】
意思是：絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位。
爲了讓你們更容易理解這句話，咱們舉個例子

例子
製做一寬度爲200px，高度爲200px，背景色爲紅色(#900)的方塊，距離瀏覽器左側220px，距離瀏覽器頂部爲100px，效果：


分析：若是想實現這個效果，咱們用外邊距也是能夠實現的，可是咱們這節學的是定位，那麼咱們就要用定位的知識來實現。

要知道，當一個元素具備了定位屬性（特指絕對定位和相對定位）後，想把它精肯定位於某一個位置，只須要設置TRBL中的任意相鄰的兩個就能夠，針對上面的例子咱們用left和top

HTML代碼：

 

<div>定位</div>

CSS代碼：

 

  1. body,div{margin:0; padding:0;}
div{width:200px; height:200px; background:#900; position:absolute; left:220px; top:100px;}

     

源代碼：  定位1.rar (1.16 KB, 下載次數: 601) 


絕對定位具備如下屬性：（下面的這些屬性你們本身證實，對於下面說的「父級」，就是在原有的盒子外面，在套一層寬度和高度大於原有盒子尺寸的盒子）


  • 若是沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,若是在沒有父級元素的狀況下，存在文本，則以它前面的最後一個文字的右上角爲原點進行定位可是不斷開文字，覆蓋於上方。
  • 若是設定TRBL，而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。
  • 若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決定。即便父級有Padding屬性，對其也不起做用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根本沒有影響。


以上三點能夠總結出，若想把一個定位屬性爲absolute的元素定位於其父級元素內，必須知足兩個條件：


  • 設定TRBL
  • 父級設定Position屬性


上面的這個總結很是重要，能夠保證各位在用absolute佈局頁面的時候，不會錯位，而且隨着瀏覽器的大小或者顯示器分辨率的大小，而不發生改變。

只要有一點不知足，元素就會以瀏覽器左上角爲原點，這就是初學者容易犯錯的一點，已經定位好的版塊，當瀏覽器的大小改變，父級元素會隨之改變，可是設定Position屬性爲absolute的板塊和父級元素的位置發生改變，錯位了，這就是由於此時元素以瀏覽器的右上角爲原點的緣由。




【position:relative】
意思是：相對定位，他是默認參照父級的原始點爲原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

爲了幫助你們理解上面的那句話，仍是拿個例子來講明
例子：
製做一寬度爲400px，高度爲300px，背景色爲灰色(#ccc)的方塊，水平居中於瀏覽器，id爲div1，在div1內，製做一寬度爲100px，高度爲100px，背景色爲綠色(#090)的方塊。效果：



HTML代碼

  1. <div id="div1">
    <div id="div2"></div>
</div>

     

CSS代碼

  1. body,div{margin:0; padding:0;}
#div1{width:400px; height:300px; background:#ccc;margin:0 auto;}
#div2{width:100px; height:100px; background:#090; position:relative; }

     

從上面代碼是否是能夠看出，相對定位的元素div2是以父級div1的左上角爲原始點的，若是須要將div2定位於div1的某處的話，確定須要TRBL中的任意相鄰兩個，如今將div2定位於div1內（80px,60px）處，也就是div2距離div1的左邊爲80px，頂部爲60px，效果以下：



爲了達到這個效果，只須要給div2一個left和top的值就能夠了

  1. #div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

     

此步源代碼：  定位2.rar (1.19 KB, 下載次數: 419) 

若是如今咱們再給div1一個內邊距padding:50px，那麼div2以哪裏爲原點呢？
html代碼沒變和上面同樣，下面只列出CSS代碼

  1. body,div{margin:0; padding:0;}
#div1{width:300px; height:200px; background:#ccc; margin:0 auto; padding:50px;}
#div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

     

效果以下：（斜線部分爲內邊距區域，在實際效果中是不沒有的）


如今知道div2以哪裏爲原點了吧~



相對定位有如下屬性：（一樣你們在下面本身證實）


  • 若是沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這裏和absolute第一條同樣)，若是在沒有父級元素的狀況下，存在文本，則以文本的底部爲原始點進行定位並將文字斷開(和absolute不一樣)。
  • 若是設定TRBL，而且父級沒有設定position屬性，仍舊以父級的左上角爲原點進行定位(和absolute不一樣)
  • 若是設定TRBL，而且父級設定position屬性(不管是absolute仍是relative)，則以父級的左上角爲原點進行定位，位置由TRBL決定(前半段和absolute同樣)。若是父級有Padding屬性，那麼就之內容區域的左上角爲原點，進行定位(後半段和absolute不一樣)。


以上三點能夠總結出，不管父級存在不存在，不管有沒有TRBL，均是以父級的左上角進行定位，可是父級的Padding屬性會對其影響。

綜合上面對relative的敘述，咱們就能夠將position屬性爲relative的div視成能夠用TRBL進行定位的普通div，或者說只要將咱們平時佈局頁面的div的CSS屬性中加上position:relative後，就不僅是用float佈局頁面了，還能夠用TRBL進行佈局頁面了，再或者說加上position:relative的div也能夠像普通的div進行佈局頁面了，只不過還能夠用TRBL進行佈局頁面。

可是，position屬性爲absolute不能夠用來佈局頁面，由於若是用來佈局的話，全部的DIV都相對於瀏覽器的左上角定位了，因此只能用於將某個元素定位於屬性爲absolute的元素的內部某個位置，這樣咱們就能夠總結比較重要的結論

屬性爲relative的元素能夠用來佈局頁面，屬性爲absolute的元素用來定位某元素在父級中的位置，既然屬性爲absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據一開始講的absolute的第三條，若是父級元素沒有position屬性那麼absolute元素就會脫離父級元素，可是若是是佈局頁面，父級元素position的屬性又不能爲absolute，否則就會以瀏覽器左上角爲原點了，因此父級元素的position屬性只能爲relative！
=============================================
總結：若是用定位來佈局頁面，父級元素的position屬性必須爲relative，而定位於父級內部某個位置的元素，最好用absolute，由於它不受父級元素的padding的屬性影響，固然你也能夠用relative，計算的時候不要忘記計算padding的值。
=============================================

下節課《定位應用》幫助你們更好的理解「定位」，這節課就到這裏，下課！

 

 

【第七課】定位應用



上一節主要講了下定位，今天講一下定位如何應用，咱們分別拿兩個例子來重點講解一下絕對定位(absolute)和相對定位(relative)。

【絕對定位實例】
打開釐米IT學院的首頁，右上角有一個「我要充電」


鼠標移動上去會從橙色變爲紅色，不管瀏覽器的放大縮小，位置永遠處於頁面的右上角，你們能夠打開頁面看一下實際效果，地址是www.w3cstudy.com

如今咱們就來作一下這個效果
分析：右上角的「我要充電」是不會跟隨瀏覽器大小的改變，而去改變它在瀏覽器右上角的位置，因此這個絕不猶豫的用「絕對定位」，另外它是能夠點擊的，因此結構中就是連接。

思路：把身爲內聯元素的連接a，先轉化爲塊狀元素，設置寬高，而後將圖片設置爲a的背景，當鼠標移動上去的時候換背景就能夠了。

這裏用到這兩張圖片，圖片大小爲107像素X107像素。

  

HTML代碼：

  1. <a href="http://www.w3cstudy.com/apply.aspx"></a>

     

CSS代碼：

  1. a{
  display:block;
  width:107px;
  height:107px;
  background:url(images/applyNormal.png) no-repeat;
  position:absolute;
  top:0;
  right:0;
}
a:hover{
  background:url(images/applyHover.png) no-repeat;
}

     

就這麼簡單！放大縮小瀏覽器後看看，是否是永遠處於右上角~這就是絕對定位。

源代碼：  定位應用1.rar (68.11 KB, 下載次數: 1100) 




【相對定位實例】
若是想把「我要充電」放到banner的右上角怎麼辦？



根據上節課說的，只須要讓外面的盒子的定位屬性爲相對定位relative就能夠了，也就是說讓banner這個盒子的position的值爲relative就能夠

HTML代碼

  1. <div id="banner">
  <a href="http://www.w3cstudy.com/apply.aspx"></a>
</div>

     

CSS代碼

  1. body,div{margin:0; padding:0;}
#banner{width:1000px; height:292px; background:url(../images/banner.jpg) no-repeat; position:relative; margin:0 auto;}
a{display:block; width:107px; height:107px; background:url(../images/applyNormal.png) no-repeat; position:absolute; top:0; right:0;}
a:hover{background:url(../images/applyHover.png) no-repeat;}

     

這個例子很好的體現了相對定位（relative）和絕對定位（absolute）如何一塊使用。

源代碼：  定位應用2.rar (68.18 KB, 下載次數: 996) 

【總結】
通過這兩個練習，你們對定位應該掌握的差很少了，那就再仔細品味一下上節課總結的話
=============================================
若是用定位來佈局頁面，父級元素的position屬性必須爲relative，而定位於父級內部某個位置的元素，最好用absolute，由於它不受父級元素的padding的屬性影響，固然你也能夠用 relative，計算的時候不要忘記計算padding的值。
=============================================

 

【第八課】CSS Hack



        說到瀏覽器兼容性問題，就必須說CSS Hack！

        提到Hack你們確定會想到電腦黑客(hacker)，和病毒程序聯繫到一塊，不過在CSS中，Hack是指一種兼容CSS在不一樣瀏覽器中正確顯示的技巧方法。說的更直白一些就是，你平時作個頁面，佈局正確，CSS正確，可就是在不一樣的瀏覽器中顯示的效果不同，要麼錯位，要麼多幾個像素，怎麼都找不到緣由，這時候咱們就會用一些技巧方法來讓不一樣的瀏覽器顯示同樣的效果，這種方法咱們就稱之爲CSS Hack，記住! CSS Hack是解決頁面不能很好兼容多種瀏覽器的技巧方法，是一種方法，不要理解誤差。

        你們必須知道一點，CSS Hack都屬於我的對CSS代碼的非官方修改，因此編寫的CSS代碼不會經過官方W3C的認證！之後常常會遇到這種狀況，CSS寫的正確，經過W3C驗證，可是不一樣瀏覽器顯示效果不同，用了CSS Hack，顯示的效果同樣了，卻又通不過W3C驗證了，非常鬱悶，不要爲了標準而標準，W3C驗證只是幫你檢查一下CSS
語法，經過驗證只不過是說明你到目前寫的CSS代碼沒有語法錯誤而已，不要計較是否經過驗證，只要作出來的頁面代碼量少，利於搜索引擎搜索，加載速度快，能爲企業節省成本就能夠！



好，咱們開講！
這節課我主要講兩個最經常使用的CSS Hack，若是這兩個能明白，再學其餘的Hack就容易了


!important

做用：用來解決一些在IE6上顯示的效果與IE7/IE8/IE9/FireFox上的效果不同的狀況。好比有下面的一段代碼：

#content{
      height:960px !important;
      height:900px;
}

 

        IE7/IE8/IE9/FireFox能夠識別上面附加「!important」的語句，看到附加「!important」的語句後，就不會再去執行第二句，儘管他們也「認識」第二句，可是附加「!important」的語句擁有絕對優先級，只要有它存在，第二句就不容許執行。附加「!important」語句IE6也能夠識別（wnpers同窗在29樓給你們舉了例子），雖然能夠識別可是會無視!important，就比如對面過來了一個朋友，你認識，他從你身邊走過，你卻沒有理會對方，這就是認識可是無視了對方，IE6對!important的態度就是這樣，因此IE6會執行「!important」的語句後，再去執行第二句「height:900px」,用後面的樣式覆蓋了前面的樣式，因此在IE6下，最終的height值是900px。

        利用瀏覽器對加了「!important」語句的識別能力（儘管!important被IE6~IE9，FF，Chrome所識別），來解決一些在IE6上顯示的效果與IE7/IE8/IE9/FireFox上的效果不同的狀況。




*(星號)

做用：用來解決一些在IE6/IE7上顯示的效果與IE8/IE9/FireFox上的效果不同的狀況。好比有下面的一段代碼：

#content{
      height:960px;
     *height:900px;
}

 

        IE8/IE9/FireFox不能識別附加有*的CSS屬性語句，因此IE8/IE9/FireFox只能讀第一句「height:960px;」而忽略第二句，IE6/IE7能夠識別附加有*的CSS屬性語句，也就是說第一句和第二句都認識，因此它們先讀第一句，將高度定爲960px，然後又讀第二句「*height:900px;」，將高度從960px修改成900px，因此咱們在IE中看到的最終效果就是高度爲900px;

        利用瀏覽器對加了「*」語句的識別能力，來解決一些在IE6/IE7上顯示的效果與IE8/IE9/FireFox上的效果不同的狀況。

 

 

 

原文地址：http://www.w3cfuns.com/portal.php?mod=topic&topicid=13

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程