使用**查詢，在寬屏下，使用類pure-u-md-1-3，使得導航水平放置，隱藏切換按鈕；在窄屏下，使用類pure-u-1，使得導航垂直放置，顯示切換按鈕，其中切換按鈕使用了絕對定位。
**詳情
rel="stylesheet"
href="">
.open
.custom-menu-3
.custom-toggle
.custom-toggle
.bar
.custom-toggle
.bar
:first-child
.custom-toggle
.x.bar
.custom-toggle
.x.bar
:first-child
@media (max-width: 47.999em)
.custom-toggle
}style>
id="menu">
class="pure-u-1 pure-u-md-1-3">
class="pure-menu">
href="#"
class="pure-menu-heading custom-brand">branda>
href="#"
class="custom-toggle"
id="toggle">
class="bar">
s>
class="bar">
s>
a>
div>
div>
class="pure-u-1 pure-u-md-1-3">
class="pure-menu pure-menu-horizontal custom-can-transform">
class="pure-menu-list">
class="pure-menu-item">
href="#"
class="pure-menu-link">homea>
li>
class="pure-menu-item">
href="#"
class="pure-menu-link">abouta>
li>
class="pure-menu-item">
href="#"
class="pure-menu-link">contacta>
li>
ul>
div>
div>
class="pure-u-1 pure-u-md-1-3">
class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
class="pure-menu-list">
class="pure-menu-item">
href="#"
class="pure-menu-link">yahooa>
li>
class="pure-menu-item">
href="#"
class="pure-menu-link">w3ca>
li>
ul>
div>
div>
div>
(function
(window, document)
);};function
togglemenu
() else
menu.classlist.toggle('open');
document.getelementbyid('toggle').classlist.toggle('x');
};function
closemenu
() }
document.getelementbyid('toggle').addeventlistener('click', function
(e) );
window.addeventlistener(window_change_event, closemenu);
})(this, this.document);
script>
垂直 水平導航選單的製作
1.先製作乙個垂直的選單 設定一下css樣式，包括 去掉列表前面的小圓點 list style a標籤的下劃線 text decoration li的高度寬度背景顏色 還有文字的縮排 text indent，不改變整個li的寬度 但是，為了加互動效果，比如hover,應該將這些樣式設定在最內層的標籤...
從1920 1080到移動端的響應式自適應結合
1.先談一下響應式和自適應的區別 響應式 它是將已有的開發技巧 彈性網格布局 彈性 和 查詢 整合起來，針對任意裝置對網頁內容進行 完美 布局的一種顯示機制。簡言之，是乙個 能夠相容多個終端 手機 pad 電腦 的布局方法，而不需要為每個終端書寫一套特定版本的 自適應 移動端的發展帶來了自適應布局。...
從分布式分析引擎到分布式儲存
事因偶然，開始了apache storm原始碼的閱讀歷程，即而了解到apache spark一時風頭無兩，又一頭墜入到無比陌生的scala世界，開始了艱澀的spark原始碼閱讀之路。閱讀不是目的，用這些工具來解決實際中的問題才是根本，恰好由於通訊公司利潤下降，行業景氣度不如之前，人心思變，於是在沒做...