效果图
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>index</link rel="stylesheet" href="css/reset.css"="css/style.css"> bodydiv class="screen"nav ="nav"> ul> li><a href="#">搜 索a></>主 页>HTML5学习>CSS3学习>联系我们nav="nav-toggle"="icon"div<!-- 背景内容区 --> ="lower-screen"="card"script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'script='js/script.js'html>
reset.css
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display:block } audio,canvas,video {inline-block } audio:not([controls]) {none; height:0 } [hidden] {none } html { font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% } body { margin: a:focus { outline:thin dotted } a:active,a:hover { h1 { font-size:2em;.67em 0 } abbr[title] { border-bottom:1px dotted } b,strong { font-weight:700 } dfn { font-style:italic } hr { -moz-box-sizing:content-box; box-sizing: mark { background:#ff0; color:#000 } code,kbd,pre,samp {monospace,serif;1em } pre { white-space:pre-wrap } q { quotes:"\201C" "\201D" "\2018" "\2019" } small {80% } sub,sup {75%; line-height:0; position:relative; vertical-align:baseline } sup { top:-.5em } sub { bottom:-.25em } img { border: svg:not(:root) { overflow:hidden } figure { fieldset {1px solid silver;0 2px; padding:.35em .625em .75em } legend { button,input,select,textarea {inherit;normal } text-transform: -webkit-appearance:button; cursor:pointer } button[disabled],html input[disabled] {default } input[type=checkbox],input[type=radio] {border-box; input[type=search] {textfield; -webkit-box-sizing:content-box } input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { button::-moz-focus-inner,input::-moz-focus-inner { textarea {auto;top } table { border-collapse:collapse; border-spacing:0 }
style.css
* { box-sizing: padding: margin: font-weight:300 } html{ font-size:37.5px; } body,html { height:100%; } background-color:#4a75e6; font-family:microsoft yahei,sans-serif } *,*:after,*:before { -webkit-box-sizing: -moz-box-sizing:border-box } .clearfix:before,.clearfix:after { content:" "; display:table } .clearfix:after { clear:both } background:#f9f7f6; color:#404d5b;500;1.05em;segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,1)"> a {#2fa0ec; text-decoration: outline: a:hover,a:focus {#74777b } .jq22-container {0 auto; text-align:center; overflow: .jq22-content {150%;1em 0 } .jq22-content h2 {0 0 2em; opacity:.1 } .jq22-content p {1em 0;5em 0 0;.65em } .bgcolor-1 {#f0efee } .bgcolor-2 {#f9f9f9 } .bgcolor-3 {#e8e8e8 } .bgcolor-4 {#2f3238;#fff } .bgcolor-5 {#df6659;#521e18 } .bgcolor-6 {#2fa8ec } .bgcolor-7 {#d0d6d6 } .bgcolor-8 {#3d4444; .bgcolor-9 {#ef3f52; .bgcolor-10 {#64448f; .bgcolor-11 {#3755ad; .bgcolor-12 {#3498db; .jq22-header {1em 5.066667rem; letter-spacing:-0.026667rem;center } .jq22-header h1 {#fff;600; line-height:1; margin-bottom: .jq22-header h1 span {block;60%;400;.8em 0 .5em;#c3c8cd } .jq22-demo a {#1d7db1; .jq22-demo { width: padding-bottom:1.2em }inline-block;.5em;.6em 1em; border:0.08rem solid #1d7db1; .jq22-demo a:hover {.6 } .jq22-demo a.current { .jq22-links { position: white-space:nowrap;1.5em; .jq22-links::after {absolute; top: left:50%; margin-left:0.053333rem;#dbdbdb;''; -webkit-transform:rotate3d(0,1,22.5deg); transform: .jq22-icon {0 0; .jq22-icon span { .jq22-icon:before {0 0.133333rem; text-transform: font-style:normal; font-variant:icomoon; speak: -webkit-font-smoothing:antialiased } .jq22-footer { padding-top:0.266667rem } .jq22-small {.8em } .center { .related {1.25em;.5em 0; .related>a { vertical-align:top;calc(100% - 0.533333rem); max-width:9.066667rem;0.533333rem 0.266667rem;0.666667rem; .related a {left;0.533333rem auto;0.266667rem 0.533333rem;.8; -webkit-transition:opacity .3s; transition: -webkit-backface-visibility: .related a:hover,.related a:active {1 } .related a img { border-radius:0.106667rem } .related a:hover img,.related a:active img { .related h3 { .related a h3 {300; margin-top:.15em; .icon-jq22-home-outline:before {"\e5000" } .icon-jq22-arrow-forward-outline:before {"\e5001" } @media screen and (max-width:50em) { .jq22-header { padding:3em 10% 4em }2em } }@media screen and (max-width:40em) { .jq22-header h1 { font-size:1.5em } }@media screen and (max-width:30em) { } body.nav-open .lower-screen {scale(.8,.8); -ms-transform: body.nav-open .nav {translateY(0);translateY(0) } body.nav-open .nav-toggle { box-shadow: body.nav-open .nav-toggle:before {93.333333rem;rgba(74,117,230,.95) } body.nav-open .nav-toggle .icon { body.nav-open .nav-toggle .icon:before {translateY(0.746667rem) rotate(45deg);translateY(0.746667rem) rotate(45deg) } body.nav-open .nav-toggle .icon:after {translateY(-0.24rem) rotate(-45deg);translateY(-0.24rem) rotate(-45deg) } .screen { 100%; #ecebe9; block; hidden; relative; } .nav-toggle { 6.666667rem; z-index: 2; 50%; 1.6rem; absolute; cursor: pointer; -1 0.106667rem 0 rgba(0,.2); -webkit-transition-duration: .66s; transition-duration: -webkit-transition-timing-function: swing; transition-timing-function: swing; } .nav-toggle:before { #4a75e6; ""; translateX(-50%) translateY(-50%); .nav-toggle .icon { 2.666667rem; 0.266667rem; #fff; 0.053333rem; 3.306667rem; 1.866667rem; .5s; transiting-timing-function: .nav-toggle .icon:before,.nav-toggle .icon:after { 0; .nav-toggle .icon:before { -0.533333rem; } .nav-toggle .icon:after {0.533333rem; } .lower-screen { overflow-y: scroll; translate3d(0,0); .lower-screen::-webkit-scrollbar { .card { 0.133333rem; center; border-bottom: 0.08rem solid rgba(0,.12); 0.533333rem; min-height: 53.333333rem; 0.266667rem; } .card h2 {0.133333rem } .card p {0.373333rem;#666;0.533333rem } .card p a {#4a75e6 } .nav {8.0rem;9;0 0.533333rem;.66s;swing;translateY(100%);translateY(100%) } .nav ul li { list-style: .nav ul li a { 1.066667rem 0; none; 1.333333rem; .25s; .25s; } .nav ul:hover li a {.5 } .nav ul:hover li:hover a {1 }
script.js
$(function(){ $('.nav-toggle').click( () { $('body').toggleClass('nav-open'); }); })