馬米思個人紀錄站

一個簡單，響應式，流動式導覽教學

簡單地說，是要先設計一個小屏幕的界面，然後才設計大屏幕的界面。

http://webdesign.tutsplus.com/zh-hant/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074?ec_unit=dropdown-language
p,
ul {
    margin: 0 0 1.5em;
}
/*表示標籤<p>與<ul>皆套用此規則*/       

 

 

/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
        header:before,
        header:after {
            content:"";
            display:table;
        }
         
        header:after {
            clear:both;
        }
         
        /* For IE 6/7 (trigger hasLayout) */
        header {
            zoom:1;
        }
/*表示標籤<header>上下包圍區塊套用此規則，只要設定這兩個屬性就可以讓高度自動撐開，也無須調整padding與margin，甚至是高度問題，after需設定clear:both*/ 

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements.

在這區塊，僅針對a去做text-decoration:none;的設定，便是為了將原本超連結時的底線去除。無須另外針對為連結狀態做屬性調整。

在這裡是針對右側menu的按鈕，並做圓角矩形的設定，記得嗎? 
在這一塊的HTML中，教學中並未另外使用DIV進行包覆標籤，
而是直接採用 <a class="to_nav" href="#primary_nav">Menu</a>的方式來表現。

 

另外針對hover與focus做美化的設定。

當屏幕的寬度只少有768px時，這個 media query 會執行所有在內的樣式設定。注意當中的only是關鍵字，它將確保Internet Explorer 8能正常執行樣式設定。Media queries介紹，請點選此連結，

首先，我們必須在 media query 或 css 的開端把它所屬的標籤（.wrapper）設為 position: relative。

只要菜單被設定為 position: absolute，我們需要刪除一些標籤的設定，把列表顯示為 display: inline 和刪除邊框和標籤的距離便可以。當然，不用修改之前定立的 hover 狀態。

有個"頂至"的鏈接 - 還需要嗎？

1 2	<li class="top"><a href="#home">Top</a></li>

這樣我們就不用 media query 也能把它刪除：

1 2 3 4

#primary_nav li.top {     display: none; }