Ex:Bakery2: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{
  height: 100vh;
}

h2{
  background: url(../img/h2.png);
    /*
    width: 420px;
    height:120px;
  */
  width: 300px;
  height:95px;
  font-size: 30px;
  line-height: 70px;
  padding-left: 120px;
  padding-top: 25px;
  text-align: center;
  letter-spacing: 10px;
}