首先先設定桌面板的logo和選單並排排版，之後在再新增響應式網頁斷點，讓使用者可在其他裝置觀看。

另外要注意網頁head裡面的mata一定要有Viewport這樣網頁才能變成響應式。

    <!-- Viewport 用在響應式網頁設計 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

1. 桌面網頁logo和選單並排排版程式碼：

HTML:
設定Header內含logo和menu的ul li項目，裡面皆包含a連結。

<div class="Header">
   <div class="Logo">
     <a href="#">公司Logo</a>
   </div>

   <ul class="Menu">
      <li><a href="#">首頁</a></li>
      <li><a href="#">產品介紹</a></li>
      <li><a href="#">聯絡我們</a></li>
   </ul>
</div>

CSS：

• Header高度可自由設定，在此為51px

• Logo為向左浮動float: left; 然後利用margin去調整位置

• Logo a連結則是設定讓背景圖片取代文字text-indent: -999999px，其中的-999999px可以是任何極大的正負數字，文字在螢幕上看不見但其實存在，最常用在logo和選單連結上面，至於為何不直接在html刪掉公司名稱文字只放logo圖，是因為讀取網頁時如果有公司文字名稱會讓seo更優化。

• Menu li 像右浮動，這樣與Logo一左一右成並排樣式，至於display: block;可讓Logo和Menu成區塊元素，詳細可看CSS display 屬性。

• Logo 和Menu li 都放float屬性，裡面的a連結都放文字樣式，是因為外面調位置，裡面調整屬性。

  .Header {
  height: 51px;//高度與行高一樣，則可讓文字垂直置中
  }
  .Logo {
  float: left;
  margin: 10px 0 0 10px; //上、右邊、下、左邊
  }

  .Logo a {
  display: block;
  background: url(../images/logo.png);
  text-indent: -999999px;
  width: 240px;
  height: 88px;
  text-decoration: none; //超連結不要出現底線
  }
  .Menu {
  float: right;
  line-height: 51px;//高度與行高一樣，則可讓文字垂直置中
  }
  .Menu li {
  float: left;
  width: 94px;
  text-align: center;
  list-style: none;//li不要出現符號樣式
  }

  .Menu li a {
  text-decoration: none;
  color: #00a67d;
  display: block;
  margin: 0 1px;
  }

結果如圖片

2. 響應式網頁logo和選單排版程式碼：

因為手機螢幕畫面小，所以都縮成單欄，只要把float都調整成none，再把寬度設定為%，Header的固定高度取消。
@media為手機和平板的斷點，也就是設定響應式的重要關鍵，把上面所提到的float、寬度、高度等程式放在裡面做修正，就可以讓網頁變成響應式網頁了!!

CSS：
為以後整理方便和閱讀性，在上面css下方直接新增斷點，在此設平板電腦斷點最大寬度為768px(max-width: 768px )
如下：

.Header {
    height: 51px;
}
@media (max-width: 768px) {
    .Header {
      max-width: 100%; 
      height: auto;} //最大寬度為100%,取消高度改自動
      }

.Logo {
  float: left;
  margin: 10px 0 0 10px;
  }
  
@media (max-width: 768px) {
    .Logo {
            float: none;//取消浮動
            margin: 0;
    }
}

.Logo a {
    display: block;
    background: url(logo.png);
    text-indent: -999999px;
    width: 240px;
    height: 88px;
    text-decoration: none; 
    }
@media (max-width: 768px) {
    .Logo a{
        margin: 0 auto;//logo置中
    }
}

.Menu {
    float: right;
    line-height: 51px;
}
@media (max-width: 768px) {
    .Menu {
            float: none;
    }
}

.Menu li {
    float: left;
    width: 94px;
    text-align: center;
        list-style: none;
    }

@media (max-width: 768px) {
    .Menu li {
        float: none;
        border-bottom: 1px dashed #66FFDC;//新增底線
        width: 100%;
    }
}

.Menu li a {
      text-decoration: none;
      color: #00a67d;
      display: block;
      margin: 0 1px; 
      }
@media (max-width: 768px) {
    .Menu li a:hover{
        color: black;//滑過文字變黑色
    }
}

結果如圖片

結果會發現li會向右偏，這是網頁沒有使用reset.css，因為各大瀏覽器都有內建設定，造成排版的時候，就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法，所以才有reset.css統一格式化。
在此先不加上reset.css，只讓li不會向右偏，代碼如下：

body,ul,li{
        margin: 0;
        padding: 0;
}

下圖網頁就不會偏向右邊了!!