BLOGGER  CSS 樣式16 CSS 區塊網頁居中版面設計 - layout

CSS 物件定位網頁置中版面設計

網頁版面的文章介紹位置居中,讓版面左右 A1, A2 留出一些邊界看起來比較舒適。
瀏覽按鈕區 Navigation 在左側浮動位置的向上偏移 B 重疊顯示。

版面 Content 裡面的元素,<h1> title<strong> 的數字樣式及 <div> Box 的位置居中(重點描述)。

title3


Box

HTML

<div class="content">
  <h1>title<strong>3</strong></h1>
  <br />
  <div class="box-c">Box</div>
</div>

CSS

#content h1
{
  font-size: 20px; color: #4d5363;
  margin: 10px 0px 0px 0px; padding: 3px 10px;
  background-color: #e4e5e7;
}
#content h1 strong
{
  font-size: 12px; color: #fff;
  background-color: #4d5363;
  margin: -10px 0px 0px 0px; /* 負數則垂直位置 -10px 往上移動 */
  padding: 4px 10px;
  float: right; /* 元素設為在右側浮動 */
  border-radius: 5px;
}
div.box-c
{
  font-size: 24px; text-align: center;
  color: #4aa83b;
  background-color: #cacbd0;
  line-height: 60px; /* 垂直置中值與 height 相同 */
  width: 90px;height: 60px;
  margin:0 auto; /* 元素水平置中 */
}

網頁版面主要區塊

網頁版面主要區塊分為五個、Top、Header、Navigation、Content 及下方 Footer
其中 Navigation 瀏覽按鈕區塊、Content 文章介紹區塊包裝在 wrapper 區塊之內讓位置居中於瀏覽器的視窗中,並且 Content 區塊的 CSS 設置 overflow: hidden 元素超出矩形格時或說重疊顯示的方法可參考 overflow當內容超出元素的矩框時要如何展現有顯示結果的比較。
網頁下方 Footer 配合頁面的高度設置、可以不拘內容的高度而位置於視窗下方。

HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<title>網頁版面設計</title>
</head>
<body>
<div class="topNav">
  Top 
</div>
<div class="header">
  Header 
</div>
<div class="wrapper">
  <div class="leftNav">
    Navigation 
  </div>
  <div class="content">
    
    <h1>title<strong>3</strong></h1>
    <br />
    <div class="box-c">Box</div>
  </div>
</div>
<div class="footer">
  Footer 
</div>
</body>
</html>

CSS

html{height:100%;}
* html body{height:100%;} /* 頁面的高度設置 */
body
{
  margin:0;
  padding:0;
  min-height:100%; /* 瀏覽器的視窗大小改變時顯示處理 */
  position:relative; /* 相對的位置 */
}
.topNav
{
  background-color:#4d5363;
}
.header
{
  background-color:#a6a9b1;
  height:100px; /* 高度的設置 */
}
/* --Wrapper-- */
.wrapper
{
  margin:0 5%; /* 左右邊距離 5% 版面置中 */
}
.content
{
  overflow: hidden; /* 元素超出矩形格時或說重疊 */
}
.leftNav
{
  width:200px; max-width:36%; /* 瀏覽按鈕區域的寬度 */
  margin:20px 20px 0px 10px;
  float:left; /* 元素設為在左側浮動 */
}
/* --Footer-- */
.footer
{
  clear:both;
  width:100%;
  position:absolute;
  bottom:0; /* 設置位置於下方 */
  height:80px;
  background-color:#4d5363;
}

版面範例

以上概略的網頁版面以盡量簡化細節來描述結構 Html 範例請由此 查看網頁版面範例

Leave Response    

請先登入






TM+ © 2002-2014 hANjAN STUDIO and author.
Script Execution time: 0.27 seconds.