Web Standards Solutions 網頁設計標準規格


為BODY指定樣式


兩欄或三欄的佈局
文章頁
  <div id="header">
   header
  </div>
  <dive id="content">
   content
  </div>
  <dive id="right">
   right
  </div>
  <dive id="footer">
   footer
  </div>
  #content, #footer{
   margin: 10px 190px 10px 10px;
  }

索引頁
  <body class="index">
  <div id="header">
   header
  </div>
  <dive id="content">
   content
  </div>
  <dive id="left">
   left
  </div>
  <dive id="right">
   right
  </div>
  <dive id="footer">
   footer
  </div>
  </body>
  #content, #footer{
   margin: 10px 190px 10px 10px;
  }
  body.index #content, body.index #footer{
   margin-left: 190px;
  }

不只處理分欄
  h1{
   font-family: Arial, Verdana, sans-serif;
   font-size: 140%;
   color: purple;
  }
  body.index h1{
   color: orange;
  }

導覽清單(用class)
  <ul id="minitabs">
    <li><a href="/apples/" class="active">Apples</a></li>
    <li><a href="/spaghetti/" class="active">Spaghetti</a></li>
    <li><a href="/greenbeans/" class="active">Green Beans</a></li>
    <li><a href="/milk/" class="active">Milk</a></li>
  </ul>

判別組件(用id)
  <ul id="minitabs">
    <li id="apples_tab"><a href="/apples/">Apples</a></li>
    <li id="spag_tab"><a href="/spaghetti/">Spaghetti</a></li>
    <li id="beans_tab"><a href="/greenbeans/">Green Beans</a></li>
    <li id="milk_tab"><a href="/milk/">Milk</a></li>
  </ul>

<body id="apples">
<body id="beans">

body#apples #apples_tab a,
body#apples #spag_tab a,
body#apples #beans_tab a,
body#apples #milk_tab a{
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
arrow
arrow
    全站熱搜

    jck11 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄