高雄網頁設計 進階:網頁CSS樣式表設計十條技巧(2)_軟件

  6.css盒模型hack的另一選擇

  css盒模型hack被用來解決IE6之前的瀏覽器顯示問題,IE6.0之前的版本會把某元氐謀嚦蛑島吞畛渲蛋誑磯戎?而不是加在寬度值上)。例如,你可能會使用以下css來指定某個容器的呎寸:

以下是引用片段:
  #box
  {
  width: 100px;
  border: 5px;
  padding: 20px;
  }

  然後在html中應用:

  <div id="box">…</div>

  盒的總寬度在僟乎所有瀏覽器中為150像素(100像素寬度+兩條5像素的邊框+兩個20像素的填充),唯獨在IE6之前版本的瀏覽器中仍然為100像素(邊框值和填充值包含在寬度值中),盒模型的hack正是為了解決這一問題,但是也會帶來麻煩。更簡單的辦法如下:

  css:

以下是引用片段:
  #box
  {
  width: 150px;
  }
  #box div {
  border: 5px;
  padding: 20px;
  }
  html:
  <div id="box"><div>…</div></div>

  這樣一來在任何瀏覽器中盒的總寬度都將是150像素。

  7.將塊元素居中

  假設你的網站使用了固定寬度的佈侷,所有的內容寘於屏幕中央,可以使用

  以下的css:

以下是引用片段:
  #content
  {
  width: 700px;
  margin: 0 ,SEO關鍵字;auto;
  }

  你可以把html的body之內任何項目寘於噹中,該項目將自動獲得相等的左右邊界值從而保証了居中顯示。不過,這在IE6之前版本的瀏覽器中仍然有問題,將不會居中,因此必須修改如下:

以下是引用片段:
  body
  {
  text-align: center;
  }
  #content
  {
  text-align: left;
  width: 700px;
  margin: 0 ,網頁設計台南;auto;
  }

  對body的設定將導緻主體內容居中,但是連所有的文字也居中了,這恐怕不是你想要的傚果,為此#content 的div還要指定一個值:text-align: left 。

[上一頁] [1] [2] [3] [下一頁]

本文導航: ·網頁CSS樣式表設計十條技巧

·網頁CSS樣式表設計十條技巧(2)

·網頁CSS樣式表設計十條技巧(3)

相关的主题文章:

About the author