簡潔 DIV+CSS佈局入門之三 ( DIV+CSS常用 常用CSS DIV+CSS實例 簡單DIV+CSS DIV+CSS佈局分析 DIV+CSS流程)

                                            簡潔 DIV+CSS佈局入門之三


                                                                                作者:佚名    文章來源:藍色理想

簡潔 DIV+CSS佈局入門之三 ( DIV+CSS常用  常用CSS   DIV+CSS實例  簡單DIV+CSS  DIV+CSS佈局分析  DIV+CSS流程)

 

 

到這裏,有的朋友就說了,* 爲什麼要使用GIF格式?使用JPEG不是更好嗎?
因爲GIF格式的圖片文件更小,這樣能使頁面載入的速度更快,當然使用此格式之前必須確定圖片並沒有使用太多的顏色,當我們使用了GIF格式時,從肉眼上並不能看出圖片有什麼太大的變化,因此這是可行的。

* 接下來的Banner部分還能使用GIF格式嗎?
答案是不能,因爲Banner部分是一個細緻的圖片,如果使用GIF格式顏色會有太大的損失,所以必須使用JPEG格式,將文件導出爲banner.jpg。

切好片後,我們還需要對TOP部分進行分析並將DIV結構寫入Header中代碼如下:

  <div id="menu">
   <ul>
    <li><a href="#">首頁</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">博客</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">設計</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">相冊</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">論壇</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">關於</a></li>
   </ul>
  </div>
  <div id="banner">
  </div>

爲什麼要這麼寫呢,因爲對菜單使用列表<li>形式,可以在以後方便對菜單定製樣式。

而爲什麼要添加以下代碼呢?
<li class="menuDiv"></li>
插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式,例如預覽圖中的豎線分隔。

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

/*頁面頭部*/
#header {background:url(logo.gif) no-repeat}

樣式說明:
#header {background:url(logo.gif) no-repeat}
給頁面頭部分加入一個背景圖片LOGO,並且不作填充。

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

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

使用列表<li>製作菜單

開始此節的學習前,請確認你已經參照之前的幾節內容寫入了DIV、CSS到index.htm和css.css文件中。

這一節我將告訴大家如何用列表<li>來製作菜單。

  <div id="menu">
    <ul>
      <li><a href="#">首頁</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">博客</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">設計</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">相冊</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">論壇</a></li>
   <li class="menuDiv"></li>
   <li><a href="#">關於</a></li>
    </ul>
  </div>

以上是這部分的結構,有關於<ul></ul>、<li></li>這兩個HTML元素大家自己去參考相關的內容吧,它們最主要的作用就是在HTML中以列表的形式來顯示一些信息。

還有一點需要大家一定要分清楚的,當在HTML中定義爲id="divID"時,在CSS對應的設置語法則是#divID{} ,如果在HTML中定義爲class="divID"時,則在CSS中對應的設置語法是.divID。

如果id="divID"這個層中包括了一個<img></img>,則這個img在CSS中對應的設置語法應該是#divID img {},同樣,如果是包含在class="divID"這個層中時,則設置語法應該是.divID img {},這一點希望大家要分清楚了。

另外,HTML中的一切元素都是可以定義的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中設置它們,則直接寫入元素的名稱加上一對大括號{}就可以了。所有的CSS代碼都應該寫在大括號{}中。

按照上面的介紹,我們先在css.css中寫入以下代碼:

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

解釋一下:

#menu ul {list-style:none;margin:0px;}
list-style:none,這一句是取消列表前點,因爲我們不需要這些點。
margin:0px,這一句是刪除UL的縮進,這樣做可以使所有的列表內容都不縮進。

#menu ul li {float:left;}
這裏的 float:left 的左右是讓內容都在同一行顯示,因此使用了浮動屬性(float)。

到這一步,建議大家先保存預覽一下效果,我們再添加下面的內容,效果如下:

這時,列表內容是排列在一行,我們在#menu ul li {}再加入代碼margin:0 10px

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

margin:0 10px的作用就是讓列表內容之間產生一個20像素的距離(左:10px,右:10px),預覽的效果如下:

現在,雛形已經出來了,我們再來固定菜單的位置,把代碼改成如下:

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0來固定菜單位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜單位於頁面右側*/
#menu ul li {float:left;margin:0 10px}

這時,位置已經確定了,可是構思圖中,菜單選項之間還有一條豎線,怎麼辦呢?
別忘了,我們早就已經留好了一個空的<li class="menuDiv"></li>,要想加入豎線就使用它了。
按照上面說的方法,我們再添加以下代碼:

.menuDiv {width:1px;height:28px;background:#999}

保存預覽一下,豎線是否已經出來了?關於這段代碼就不多講了,應該是很容易理解的。

不過,菜單選項的文字卻在頂部,我們再修改成以下代碼:

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

關於display:block;line-height:28px大家可以去參閱一下手冊,我就不多講了。

效果基本上已經實現了,剩下的就是修改菜單的超鏈接樣式,在css.css中添加以下代碼:

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

這個也不多說了,沒什麼好說的了,最後的效果如下:

這一節到這裏就完畢了,順便把素材提供給大家:
構思圖:點擊下載
HTML和CSS源文件:點擊下載

這一節裏面,主要就是想告訴大家如何使用好borderclear這兩個屬性。

首先,如果你曾用過table製作網頁,你就應該知道,如果要在表格中繪製一條虛線該如何做,那需要製作一個很小的圖片來填充,其實我們還有更簡單的辦法,只要在<td></td>中加入這麼一段就可以了,你可以試試:
<div style="border-bottom:1px dashed #ccc"></div>

大家可以再次參考手冊,然後你就能明白dashed、solid、dotted...等的作用,利用它們你可以製作出許多效果來,實線、虛線、雙線、陰影線等等。

<div id="banner"></div>

以上代碼便可以實現設計草圖中的banner,在css.css中加入以下樣式:

#banner {
 background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
 width:730px; /*設定層的寬度*/
 margin:auto; /*層居中*/
 height:240px; /*設定高度*/
 border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/
 clear:both /*清除浮動*/
}

通過border很容易就繪製出一條實線了,並且減少了圖片下載所佔用的網絡資源,使得頁面載入速度變得更快。

另一個要說明的就是clear:both,表示清除左、右所有的浮動,在接下來的佈局中我們還會用這個屬性:clear:left/right。在這裏添加clear:both是由於之前的ul、li元素設置了浮動,如果不清除則會影響banner層位置的設定。

<div id="pagebody"><!--頁面主體-->
 <div id="sidebar"><!--側邊欄-->
 </div>
 <div id="mainbody"><!--主體內容-->
 </div>
</div>

 

未完待續......

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章