三、頁面頂部製作
當我們寫好了頁面大致的div結構後,我們就可以開始細緻地對每乙個部分進行製作了。
在上一章中我們寫入了一些樣式,那些樣式是為了預覽結構而寫入的,我們把css.css中的樣式全部清除掉,重新寫入以下樣式**:
example source code
[www.52css.com]
/*基本資訊*/
body
a:link,a:visited
a:hover{}
/*頁面層容器*/
#container
樣式說明:
a:link,a:visited
a:hover {}
這兩項分別是控制頁面中超連結的樣式,具體我就不說明了,請大家參閱手冊。
#container
指定整個頁面的顯示區域。
width:800px指定寬度為800畫素,這裡根據實際所需設定。
margin:10px auto,則是頁面上、下邊距為10個畫素,並且居中顯示。
上一章中我們講過,對層的margin屬性的左右邊距設定為auto可以讓層居中顯示。
example source code
[www.52css.com]
為什麼要這麼寫呢,因為對選單使用列表形式,可以在以後方便對選單定製樣式。
而為什麼要新增以下**呢?
example source code
[www.52css.com]
樣式說明:
#header
給頁面頭部分加入乙個背景logo,並且不作填充。
這裡,我們沒有指定header層的高度,為什麼不指定呢?
因為header層中還有選單和banner項,所以層的高度暫時是未知的,而層的屬性又可以讓層根據內容自動設定調整,因此我們並不需要指定高度。
DIV CSS布局入門示例(三)頁面頂部製作
我們寫好了頁面大致的div結構後,我們就可以開始細緻地對每乙個部分進行製作了。基本資訊 body a link,a visited a hover 頁面層容器 container 樣式說明 a link,a visited a hover container 指定整個頁面的顯示區域。width 80...
DIV CSS布局入門示例(一)頁面布局與規劃
在網頁製作中,有許多的術語,例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構思,構思好了,一...
ExtJS實踐 之三 頁面布局應用
extjs提供了很多容器,最常用的是panel,其他的還有tabpanel viewport window等,開發應用程式時,最好是在最外層例項化乙個viewport,然後將其他元件放置到其中。原因是viewport會自動充滿整個頁面,同時會根據瀏覽器視窗尺寸的調整而自動調整。需要注意的是,乙個頁面...