Ex:Travel2:html+css基本介紹

範例結果

步驟1:各section設定、h2設定

html結構

  <div id="main">
    <div id="content">
      <section id="ptoduct">
        <h2>商品櫥窗</h2>
      </section>
      <section id="caketips">
        <h2>蛋糕小秘訣</h2>
      </section>
      <section id="movie">
        <h2>影片分享</h2>
      </section>
      <section id="map">
        <h2>門市位置</h2>
      </section>
    </div>
  </div>

CSS美化

參考連結:何謂襯線體(本網)何謂CSS reset何謂padding,margin(本網)

/* 一般設定 =============*/
*{  padding: 0; margin: 0;}
body{
  font-family: Verdana,'Microsoft JhengHei',sans-serif;
  font-size: 16px;
}
/* section 共用設定============== */
section{
  height: 100vh;
  padding: 20px;
}
h2{
  background: url(../img/h2.png);

  /* width: 400px; height: 120px; */
  width: 280px;
  height: 95px;

  padding-left: 120px;
  padding-top: 25px;
  /* padding: 25px 0  0  120px;  padding集合設定 */

  line-height: 70px;

  color:#fff;
  font-size: 30px;  letter-spacing:5px;
  text-align: center;
}