DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 網頁設計Div+CSS布局入門三
網頁設計Div+CSS布局入門三
編輯:WEB前端代碼     

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

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

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

切好片後,我們還需要對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中以列表的形式來顯示一些信息。



  • 網頁設計Div+CSS布局入門一
  • 網頁設計Div+CSS布局入門二
  • 網頁設計Div+CSS布局入門三
  • 網頁設計Div+CSS布局入門四
  • 網頁設計Div+CSS布局入門五
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved