好事成双的寓意

【精編Css教程】12-div+css網頁標準布局實例教程(二)

2019-08-16        117

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

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

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

< d iv id="header">

< d iv id="logo">此處顯示 id "logo" 的內容

< d iv id="search">此處顯示 id "search" 的內容

< /d iv>

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

< di v id="header">

< d iv id="logo">< / d iv>

< d iv id="search">

< fo rm id="form1" name="form1" method="post" action="" >

搜索產品

< in put type="text" name="textfield" id="textfield" / >

< in put 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本身就是無意思的東西,所以不做過多解釋,知道當需要垂直居中對齊時就采用這種寫法就行了,但是一定不要濫用,這個屬性也是有缺陷的,當有英文和中文同時出現時,英文會靠上顯示的。有關css hack更多的內容。

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

#header { height:71px;}

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

< d iv id="nav">

< d iv id="nav_l">< / div>

< di v id="nav_r">< / div>

< d iv class="nav_main">

< u l>

< l i>< a href="#">首頁< / a>< /l i>

< l i>< a href="#" id="nav_current">企業新聞

< l i>< a href="#">企業簡介

< l i>< a href="#">產品展廳

< l i>< a href="#">企業歷史

< l i>< a href="#">招商加盟

< l i>< a href="#">網上下單

< l i >< a href="#">聯系我們

< /u l>

< /d iv>

< d iv class="nav_son">

< u l>

< l i>< a href="#">企業動態

< l i>< a href="#">領導活動

< l i>< a href="#">產品資訊

< l i>< a href="#">通知公告

< / ul>

< /d iv>

< / div>

先設置nav的高度及背景圖片樣式。

#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}

完了之后該一級菜單和二級菜單的樣式了

.nav_main { height:36px; overflow:hidden;}

.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}

.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}

.nav_main ul li a span { display:block; padding-right:20px;}

.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}

.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}

.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}

.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}

.nav_son { height:30px;}

.nav_son ul li { float:left; margin-top:4px;}

.nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}

.nav_son ul li a:hover { background:url(../images/nav_bg.gif) 0 -198px no-repeat;}

這些樣式的作用就不多講了,以前的課程當中已詳細講解過了,只不過本例使用了雙導航菜單而已。現在在瀏覽器下預覽一下吧,看看效果怎么樣,是不是和效果圖差不多了,但還有最后一步就是兩端的圓角沒實現,實現圓角的方法也不復雜,只需再增加兩行代碼和兩個樣式即可。在nav下nav_main之前增加如下兩行代碼:

< d iv id="nav_l">< / div>

< di v id="nav_r">< / div>

然后用樣式表定義一個左側的圓角,一個右側的圓角。css樣式如下:

#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}

#nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;}

預覽一下吧,看看頭部和導航是不是和效果圖中的一樣呢

六、布局頁面——側邊欄

主體部分涉及side和main兩部分,的內容比較多,但都不難,本節教程沒有增加什么新的知識點,學起來并不吃力。主體部分先從側邊欄說起,講解如何切圖時已經說過,側邊欄可以共用一個樣式,下面就先做一個通用的,插入如下html代碼

< d iv class="side_box">

< h 2>產品導購< / h2>

< d iv class="side_con">此處顯示 class "side_con" 的內容< / d iv>

< / div>

這里的標題采用h2標簽,沒必要再用個div,還有“產品導購”中“產品”二字是紅色字體,這里用strong標簽,這樣可以省去很多沒必要的定義,所以在頁面布局當中一定要合理利用每一個標簽。講到這里,有必要說一下節教程中講的為什么不能叫div+css而應該叫xhtml+css了,因為div只是xhtml中的一個標簽,叫div+css會讓許多朋友誤認為遇到塊級元素就得用div,造成了div的濫用,而合理利用每個標簽,才是web標準設計的一個準則。回過頭來定義側邊欄的樣式如下:

#side { float:right; width:228px;}

.side_box { margin-bottom:8px;}

.side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}

.side_box h2 strong { color:#f30;}

.side_con { padding:10px; background:url(../images/side_bg.gif) 0 bottom no-repeat;}

預覽一下效果吧,是不是整體效果出來了,下邊就需要定義里邊各個部分了。

先看下產品導購部分,內容分為三部分,可以用ul、li列表的形式實現,前邊的圖標用背景圖片來實現,可以在li上設置背景圖片,但這樣麻煩一點,每個都需要設置,而且還得定位,有個更簡便的方法是定義ul的背景圖片,因為在切圖標時,每個圖標之間的間距是按照效果圖的間距來切的。

< d iv class="side_box">

< h 2>< str ong>產品< /stro ng>導購< /h 2>

< d iv class="side_con product">

< u l>

< l i>< str ong>語音業務:< /str ong>< a href="#">普通電話< /a> | < a href="#">語音數字中繼

< l i>< str ong>語音業務:< /st rong>< a href="#">普通電話< /a> | < a href="#">語音數字中繼< /a>

< l i class="product3">< str ong>語音業務:< /stro ng>< a href="#">普通電話 | < a href="#">語音數字中繼< / a>< / li>

< / ul>

< /d iv>

< / di v>

細心的用戶已發現,這里的class后跟了兩個樣式名稱,說明一個元素是可以定義多個樣式的,中間用空格分開。也可以把product樣式定義在ul上。

說到可以定義多個樣式,強調一點:許多新手朋友常常大量使用,如一個塊元素需要設置邊框,綠色文字和灰色背景所以就在css里定義:

.border { border:1px solid #f60;}

.color { color:#080;}

.bg { background:#ccc;}

然后在塊元素上增加:

< d iv class="border color bg">此處顯示新 Div 標簽的內容< / div>

其實這是一個非常不好的寫法,這樣表面看似達到了代碼重用性,但實際當中,當需要把其中一個元素的的邊框改為2px,怎么改?如果把.border的邊框改了,那么所有應用這一樣式的元素都改了。如果再在代碼中增加一個樣式,那么又得去改html代碼,和代碼和結構分離的理念相違背了。一個好的代碼布局,不管以后怎么改風格,只用改樣式表,而不用去改html代碼,這才真正做到兩者分離了。

扯遠了,不過這點很重要,新手很容易犯這個毛病。回到剛才的問題上,給第三個li定義了一個product3樣式,然后在樣式表中定義它的底部邊框為無,因為前邊定義li的底邊框為1px的虛線,而最后一個不需要,所以單獨定義個樣式把它取消掉,這里的product根據需要自己定義的名稱,一般用能表達這塊內容意思的簡潔英文來表示,或者用拼音。“產品導購”的樣式定義如下:

.product { padding:0px 10px;}

.product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}

.product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}

.product ul li strong { display:block; height:24px; color:#333;}

.product ul li a { color:#777;}

.product ul li a:hover { text-decoration:underline;}

.product ul li.product3 { border-bottom:none;}

“產品導購”完成后,下邊該“使用問答”了。“使用問答”部分都是一問一答的形式,問答各采用不同的圖標,而且問的文字加粗了。所以這部分采用dl、dt、dd的形式來完成。

< d iv class="side_con ask">

< d l>

< d t>< a href="#">最新出的這個產品如何使用?

< d d>該產品采用全新的技術,較上一產品有質的飛躍,功能上增強了許多,使用方法更加簡便...< /d d>

< /d l>

< d l>

< d t>< a href="#">最新出的這個產品如何使用?< /d t>

< d d>該產品采用全新的技術,較上一...< / dd>

< / dl>

< d l>

< d t>< a href="#">最新出的這個產品如何使用?< / a>< / dt>

< d d>該產品采用全新的技術,較上一產品有質的飛躍,功能上增強了...< / dd>

< / dl>

< d l>

< d t>< a href="#">最新出的這個產品如何使用?< / a>

< d d>該產品采用全新的技術,較上一產品有質的飛躍,功能上增強...< / d d>

< / dl>

< d l>

< d t>最新出的這個產品如何使用?< / a>

< d d >該產品采用全新的技術,較上一產品有質的飛躍,功能上增強了許多,使用方法更加簡便...< /d d>

< /d l>

< / div>

.ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}

.ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}

.ask dl dt a { color:#666;}

.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}

“使用問答”完成后,側邊欄就剩下“聯系我們”了,這個更簡單,直接插入圖片就行了,然后調整一下位置就可以了。

< d iv class="side_box">

< h 2 >聯系我們< /h 2>

< d iv class="side_con contact">< a href="#">< /di v>

< /di v>

.contact { padding:2px;}

七、布局頁面——主體部分

主體部分可以分三大部分,頂部是幻燈和熱點新聞,中間是圖片列表,下邊是左右兩塊,先來布局主體部分的頂部。頂部實際上還是個左右兩列布局,沒什么復雜之處,就不再貼代碼了,本節結尾會提供實例的源代碼。講解一點:熱點新聞列表中的日期,是用一個span標簽寫在了內容的前邊,然后把span向右浮動就實現了,“個人登錄”和“商戶登錄”的實現方法也是如此。

之前許多朋友問,像標準之路主頁的幻燈是怎么實現的?其實實很簡單,只要你動動手,就知道怎么做的了。但許多同學遇到個問題不去考慮靠自己能力能否解決,而是上來就問,這是一個很不好的學習態度?先找找辦法,如果實在解決不了,再來問也不遲。方法是查看標準之路主頁源代碼,找到幻燈部分,你會發現有如下一段js代碼,而且代碼中有幾個設置參數的地方,那么要想在自己網站實現這樣的功能,直接把這部分代碼插入到自己網站相應位置,修改參數中的大小為自己的大小、圖片地址為自己的圖片地址,還有就是下載swf文件,并改為相應正確的地址。如果你有html基礎的話,這些一點都不難,還是那句話,一定要多動手,多動腦。

把如上一段代碼拷貝到本例的幻燈圖片位置,下載實現幻燈的swf文件到本地images文件夾下,接下來修改/v3/images/indexpic.swf為images/indexpic.swf;修改swf_width和swf_height的值為269和210;files的值為圖片路徑,links為圖片的鏈接地址,texts為標題名稱,中間也是用|分隔,這樣就實現了幻燈圖片展示了。

幻燈實現后,接下來該中間部分圖片列表了,和第六天學習的橫向圖文列表是一樣的。區別就是多了一個標題。在index_top下插入如下代碼:

< di v id="index_pic">

< h 2>

< u l>

< a href="#">產品名稱< /a>< /li>

< a href="#">產品名稱< /a>< / li>

< a href="#">產品名稱< /a>< / li>

< a href="#">< img src="images/pic4.gif" width="107" height="87" />產品名稱< /a>< / li>

< a href="#">< img src="images/pic4.gif" width="107" height="87" />產品名稱< /a>< / li>

< a href="#">產品名稱< /a>< / li>

< a href="#">產品名稱< /a>< / li>

< a href="#">產品名稱< /a>< / li>

< / u l>

< / di v>

#index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}

#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;}

#index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}

#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}

#index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}

#index_pic ul li a { display:block;}

#index_pic ul li img { margin-bottom:3px;}

這次沒做鼠標劃過時邊框效果,相對之前的簡單一點,需要了解鼠標劃過改變邊框效果的請學習。本例中“熱門產品”的圖標采用了背景圖片,也可以采用一個圖片直接插入,但從用戶體驗的角度來講,這些圖片還是以背景圖片插入為好,因為背景圖片在整個頁面加載過程中后來加載的。

圖片列表完了之后,主體部分就剩下“企業歷史”和“招商加盟”兩塊了。這兩塊也是應用左右浮動的方式實現。這兩塊的代碼就不貼出來了,一會兒看實例。強調一點是這里的more:hover的寫法,因為more直接加在a上,所以鼠標進過的樣式就不用再寫a了,或者寫成a.more:hover。

八、底部和細節調整

底部比較簡單,灰色背景部分可以用h類標簽完成,也可以用dl、dt、dd來完成,再或者其它標簽也可以,其它的就不再贅述。

底部完成后,最后的步驟是要做一些細節調整,比如該對齊的地方是否對齊,圖片的alt屬性是否都加上了,在各種瀏覽器下是否顯示一樣等等。至此整個前臺頁面算制作完成了下面的任務就是該用程序來讀取數據庫里的內容了,來完成整個站點的制作。

瀏覽器兼容問題一直是讓新手朋友頭疼的地方,其實只要掌握幾個常用瀏覽器的特性后,不需要過多的css hack就可以解決問題的。本例中使用的css hack大致有:

zoom=1:用來解決自適應高度時IE6的兼容問題(這個屬性通不過w3c認證);

display:inline:解決IE6雙倍邊距bug問題;

*:在樣式名和屬性中間加*,這個常用在需要垂直居中時使用;

IE6 3像素bug:在布局時采用左右都浮動的辦法避免了這個問題;

另外還有一些做法也是為了解決兼容問題而寫的,比如固定高度,就是因為各瀏覽器之間解釋差異,為了使顯示效果盡可能一樣而采用的折中辦法。總之遵循一點,css hack能少用盡量少用,這樣便于以后維護。

完成這樣一個布局方法有多種,本例中所講解的方法,只是本人的觀點,不一定是更好的方法,希望大家通過本本例的學習能做到舉一反三,掌握更多的方法。

本側是左寬右窄型的布局,如果想把兩個調換個位置,太簡單不過了,只需把#main和#side的向左向右浮動調換一下就實現,這是表格布局所不及的。所以不管#main和#side在html代碼中是誰先誰后,而讓它們顯示在哪里完全是css來完成的。這里建議#main的代碼寫在#side前邊,因為這要在頁面加載的過程中會先加載main部分,用戶首先看到的是主要內容,搜索引擎收錄時也會先找到main部分的內容。

九、相對路徑和相對于根目錄路徑

上邊的例子學完后,你會發現在html中插入的圖片路徑是images/pic4.gif,而在css中插入的圖片路徑是這樣的../images/nav_bg.gif,后者比前者多出了../,這是什么意思呢?

這就是相對路徑和路徑,../表示返回上一級,因為css文件在css文件夾里,圖片在images文件夾下,那么layout.css就需要返回上一級找到images文件夾才能找到相應的圖片。直接文件夾名或是./開頭表示和當前平級,因為index.html和images文件夾平級。不管是帶../還是不帶,這種寫法都叫相對路徑;另一種叫相對于根目錄路徑,它的寫法必須以/開始,意思是從根目錄開始一級一級向下查找,不管在哪里,要使用pic4.gif這個圖片,路徑都必須是/images/pic4.gif;還有一種寫法叫路徑,是以http://加域名開始的,這個不多多說了。

使用相對路徑時,當根目錄放到一個二級目錄下時,文件仍然可以正常訪問,而使用相對于根目錄路徑時,其中一個頁面放到其它位置時,照樣能關聯么相關的圖片和其它文件,比如:本例如果用相對于根目錄路徑的話,把index.html放到一個文件夾下后,還是可以正常訪問的。總之兩種方法各有優劣,根據你的需要采用一種合適的方法。相對路徑和相對于根目錄路徑是可以相互更改的,在站點管理——編輯——設置的本地信息里有鏈接相對于,如下圖,默認為文檔(就是所說的相對路徑),也可以改為站點根目錄,相對路徑一般為直接目錄名,需要返回上級時用../,向上返回兩級時用../../;相對于根目錄路徑始終以/開頭,不管該文件現在在哪一級,它都是以根目錄開始向下找。


AM 09:00 ~ 12:00

PM 14:00 ~ 18:00

Tel 010-50933590

Hp 18910140161

設計優勢

獨立的設計團隊 帶給您全新的視覺體驗

功能開發

強大的技術實力,完成您想要的任何功能

售后服務

完善的售后服務,解決您在使用過程中遇到的問題

好事成双的寓意 253685597624910069499858519601910608145231189890559422512185824819492619391163649879560435859705196 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();