新建html文档。

书写hmtl代码。

书写css代码。* { -moz-box-sizing: border-box; -web kit-box-sizing: border-box; box-sizing: border-box; }html, body { width: 100%; height: 100%; margin: 0; padding: 0; }body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000; line-height: 1.3; -webkit-font-smoothing: antialiased; padding-top: 50px; }a { color: #ff494b; text-decoration: none; }a:hover { color: #1a4d7b; }a:visited { color: #ff494b; }section { width: 100%; height: 100%; padding-top: 15px; padding-left: 30px; }nav { width: 100%; height: 54px; position: fixed; top: 0; left: 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); padding-left: 20px; background-color: white; }nav ul { padding: 0; margin: 0; list-style-type: none; }nav li { display: inline-block; text-align: left; font-weight: bold; height: 54px; line-height: 50px; }nav li a { display: block; padding: 0 40px; }.nav li a.active { background-color: #ff494b; color: #FFF; border-top: 4px solid #ed781e; background: #FFF; color: #ed781e !important; }.nav-mobile { display: none; font-weight: bold; width: 100%; }#section1 { background-color: #D1D1D1; }#section2 { background-color: #DFDFDF; }#section3 { background-color: #C7C7C7; }.click-me { width: 150px; height: 30px; background: #435AB8; color: white; text-align: center; line-height: 30px; }.click-me a { display: block; color: white; } @media (max-width: 768px) {nav ul { display: none; background-color: white; margin-left: -30px; }nav li { width: 100%; }nav li a { padding: 0 30px; }.nav-mobile { display: inline-block; height: 50px; line-height: 50px; }} @media (min-width: 769px) {nav ul { display: block !important; }}

书写并添加js代码。   

代码整体结构。

查看效果。