DIV CSS布局入門示例(三)頁面頂部製作

2021-06-20 21:47:24 字數 1245 閱讀 5098

我們寫好了頁面大致的div結構後,我們就可以開始細緻地對每乙個部分進行製作了。

/*基本資訊*/

body

a:link,a:visited

a:hover{}

/*頁面層容器*/

#container

樣式說明:

a:link,a:visited

a:hover {}

#container

指定整個頁面的顯示區域。

width:800px指定寬度為800畫素,這裡根據實際所需設定。

margin:10px auto,則是頁面上、下邊距為10個畫素,並且居中顯示。

上一章中我們講過,

對層的margin屬性的左右邊距設定為auto可以讓層居中顯示。

我將top部分切片為兩部分,第一部分包括了logo和一條橫線。由於logo並沒有太多的顏色,這裡我於是將這一部分儲存為gif格式,調色盤選擇為精確,選擇alpha透明度,色版為白色(此處顏色應與背景色相同),匯出為logo.gif,影象寬度為800px。

到這裡,有的朋友就說了,* 為什麼要使用gif格式?使用jpeg不是更好嗎?

因為gif格式的檔案更小,這樣能使頁面載入的速度更快,當然使用此格式之前必須確定並沒有使用太多的顏色,當我們使用了gif格式時,從肉眼上並不能看出有什麼太大的變化,因此這是可行的。

* 接下來的banner部分還能使用gif格式嗎?

答案是不能,因為banner部分是乙個細緻的,如果使用gif格式顏色會有太大的損失,所以必須使用jpeg格式,將檔案匯出為banner.jpg。

* 合理的切片是非常之重要的,因為切片的方法正確與否決定了css書寫的簡易程度以及頁面載入速度。

切好片後,我們還需要對top部分進行分析並將div結構寫入header中**如下:

為什麼要這麼寫呢,因為對選單使用列表形式,可以在以後方便對選單定製樣式。

而為什麼要新增以下**呢?

插入這一段**是可以方便地對選單選項之間插入一些分隔樣式,例如預覽圖中的豎線分隔。

然後我們在css.css中再寫入以下樣式:

/*頁面頭部*/

#header

樣式說明:

#header

給頁面頭部分加入乙個背景logo,並且不作填充。

這裡,我們沒有指定header層的高度,為什麼不指定呢?

因為header層中還有選單和banner項,所以層的高度暫時是未知的,而層的屬性又可以讓層根據內容自動設定調整,因此我們並不需要指定高度。

DIV CSS布局入門示例(三)頁面頂部製作

三 頁面頂部製作 當我們寫好了頁面大致的div結構後,我們就可以開始細緻地對每乙個部分進行製作了。在上一章中我們寫入了一些樣式,那些樣式是為了預覽結構而寫入的,我們把css.css中的樣式全部清除掉,重新寫入以下樣式 example source code www.52css.com 基本資訊 bo...

DIV CSS布局入門示例(一)頁面布局與規劃

在網頁製作中,有許多的術語,例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就是構思,構思好了,一...

ExtJS實踐 之三 頁面布局應用

extjs提供了很多容器,最常用的是panel,其他的還有tabpanel viewport window等,開發應用程式時,最好是在最外層例項化乙個viewport,然後將其他元件放置到其中。原因是viewport會自動充滿整個頁面,同時會根據瀏覽器視窗尺寸的調整而自動調整。需要注意的是,乙個頁面...