<nav id="b4a3u"><p id="b4a3u"></p></nav>

<menuitem id="b4a3u"><button id="b4a3u"></button></menuitem>

<meter id="b4a3u"><u id="b4a3u"></u></meter>
<thead id="b4a3u"><dl id="b4a3u"></dl></thead>
            想自學教程的朋友,就來教程巴巴。
            教程巴巴
            當前位置: 主頁 > 圖文 > 網頁制作教程 >

            十天學會DIV+CSS第十天 div+css網頁標準布局實例教程(二)

            發布時間:2011-04-07 16:18 點擊:
            分享到:
            【評論本教程】 【挑錯本教程】
            ------分隔線----------------------------

            (接上一篇,本節教程文字較多,比較枯燥,如果前邊知識學習牢固,可以直接下載源代碼查看,哪個地方不明白,再回過頭來看哪一部分)

            五、布局頁面——頭部和導航 

            有了上邊的基礎,下面的任務就是要利用html和css制作完成一個完整的網頁了。先從頭部開始,第三小節時我們已經把整體框架給搭建好了,就像蓋房子一樣,整體結構已經出來了,下面就需要填磚分割空間了。先分析下頭部:分為兩部分,一個是logo靠左側顯示,一個是搜索靠右側顯示,那么布局時插入兩個div,一個向左浮動,一個向右浮動的方式來完成。另外還有很多種實現方法,比如logo用h1標簽,搜索用span,或者把logo做為背景圖片也是可以的,不管采用哪種方法,要根據頁面的需求選用一種最合理的方法。如果要在logo加上鏈接的話,那么就不能用背景圖片的方法了。

            <div id="header">
            <div id="logo">此處顯示 id "logo" 的內容</div>
            <div id="search">此處顯示 id "search" 的內容</div>
            </div>

            先在header里插入以上兩塊元素。然后分別插入相應的內容,在logo里插入我們事先切割好的logo圖片,在search里插入一個表單,一個文本框和一個按鈕,插入后如下:

            <div id="header">
            <div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>
            <div id="search">
            <form id="form1" name="form1" method="post" action="">
            搜索產品
            <input type="text" name="textfield" id="textfield" />
            <input type="submit" name="button" id="button" value="查詢" />
            </form>
            </div>
            </div>

            接下來定義css吧,在ps里測量,頭部的高度是71px,logo距頂部18px,搜索產品距頂部30px,下面在css里把這些參數都給定義上,看顯示的效果和效果圖中的效果是不是一樣呢?

            #logo { float:left; margin-top:18px;}
            #search { float:right; margin-top:30px;}

            這兩項的位置已經差不多了。預覽你會發現,搜索框和按鈕跟效果圖中的不一樣,這是因為我們還沒對它設置樣式,接下來把文本框增加一個class為inp_srh樣式,按鈕增加btn_srh的樣式,然后定義這兩個樣式的屬性。

            #search { float:right; height:24px; margin-top:30px; color:#444;}
            .inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
            .btn_srh { width:58px; height:23px; background:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}
            #search * { vertical-align:middle;}

            我們給search增加了高度和文字顏色,這點不用多解釋,但高度為什么是24px,是為了照顧 IE6,大家去掉測試下就知道了;

            inp_srh的寬度和高度并不是實際效果圖中的寬高,是因為默認情況下文本框帶有內邊距造成的。另外就是padding的值也會算到總寬度上的;

            btn_srh就是應用背景圖像來實現的,說明一點這里的border的值為none指的是無邊框,cursor定義鼠標樣式為手形,之前許多朋友用hand,但這個通不過w3c認證。text-indent:-999em這個屬性許多朋友可能不理解是干什么用的了,它的作用相當于word中的首行縮進,這里設置成-999,意思是向左側縮進-999em,這樣是不是就看不到文字啦,所以它的作用是將按鈕上的文字隱藏,當然也可以在html代碼中插入空格代替文字,但這樣做有點不太好,在不支持css的設備上查看時,用戶不知道這個按鈕是干什么的了。所以建議采用這種形式;

            有必要解釋下最后一行,它的特殊之處在樣式名和大括號之間加了一個*號,這里兼容所用的,屬于css hack部分內容,是定義這些元素都垂直居中對齊。css hack本身就是無意思的東西,所以不做過多解釋,知道當需要垂直居中對齊時就采用這種寫法就行了,但是一定不要濫用,這個屬性也是有缺陷的,當有英文和中文同時出現時,英文會靠上顯示的。

            這些設置完后,把最初搭建框架時設置的header的背景色和底部外邊距給去掉吧。

            #header { height:71px;}

            至此,頭部的樣式就完成了,下邊該制作導航了。分析一下,導航分為一級導航和二級導航,所以我需要在nav下再插入nav_main和nav_son兩個塊元素。

            <div id="nav">
            <div id="nav_l"></div>
            <div id="nav_r"></div>
            <div class="nav_main">
            <ul>
            <li><a href="#"><span>首頁</span></a></li>
            <li><a href="#" id="nav_current"><span>企業新聞</span></a></li>
            <li><a href="#"><span>企業簡介</span></a></li>
            <li><a href="#"><span>產品展廳</span></a></li>
            <li><a href="#"><span>企業歷史</span></a></li>

            黄色高清