响应式布局代码,Css代码库,德仔网

代码语言
代码分类
【Css】响应式布局
作者:灏明 / 发布于2014/12/10/ 514

	/*******************************************************************************************************************
	* Author: Tomas Lach (www.tomaslach.cz)
	* Date: 25.08.2012
	*******************************************************************************************************************/
	
	/*******************************************************************************************************************
	* IMPORT OTHER STYLES
	*******************************************************************************************************************/
	@import url(reset.css);
	
	/*******************************************************************************************************************
	* BASE
	*******************************************************************************************************************/
	html {background: #f2f2f2}
	body {color: #727272;font: normal 13px "Helvetice Neue", Arial, Tahoma, Verdana;}
	p {line-height: 1.5em;margin-bottom: 15px}
	p strong {color: #424242;}
	address {font-style: normal;padding-bottom: 15px;}
	
	/*******************************************************************************************************************
	* LINKS
	*******************************************************************************************************************/
	a, a:link, a:focus {color: #560e8d;outline: 0;}
	a:hover {color: #000;text-decoration: underline}
	
	/*******************************************************************************************************************
	* H1 - H4
	*******************************************************************************************************************/
	h1, h2, h3, h4 {line-height: 1.2em;margin-bottom: 15px;font-weight: bold}
	h1 {font-size: 3.0em;color: #fff;font-weight: normal;}
	h1 strong {font-weight: bold;}
	h2 {font-size: 1.1em;color: #737373;margin-bottom: 30px;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;}
	h3 {font-size: 1.4em;color: #424242;text-shadow: 1px 1px 1px #fff;margin-bottom: 10px;}
	h4 {font-size: 1.6em;color: #424242;text-shadow: 1px 1px 1px #fff;margin-bottom: 10px;}
	
	/*******************************************************************************************************************
	* HEADER
	*******************************************************************************************************************/
	header {height: 84px;line-height: 84px;background: #1a1a1a;position: relative;z-index: 100;}
	header a#logo {font-size: 1.2em;font-weight: bold;display: block;position: absolute;top: 0;left: 20px;color: #fff;text-transform: uppercase;text-decoration: none;}
	header a#logo:hover {text-decoration: none;color: #f7f7f7}
	header #nav {position: absolute;top: 0;right: 0}
	header #nav > strong {display: none;}
	header #nav > ul > li {float: left;background: url('../img/nav-sep.png') no-repeat 0 50%;position: relative;}
	header #nav > ul > li.parent > a {background: url('../img/nav-more.png') no-repeat 20px 50%;padding-left: 40px;}
	header #nav > ul > li > ul {display: none;min-width: 100%;position: absolute;top: 62px;left: 20px;line-height: normal;white-space: nowrap;}
	header #nav > ul > li > ul > li {margin-bottom: 1px;}
	header #nav > ul > li > ul > li > a {color: #c3c3c3;text-decoration: none;padding: 10px 20px;display: block;background: url('../img/subnav-bg.png');}
	header #nav > ul > li > ul > li > a:hover {background: #000;color: #fff;text-decoration: none;}
	header #nav > ul > li:first-child {background: none;}
	header #nav > ul > li > a {float: left;color: #a2a2a2;display: block;height: 84px;text-transform: uppercase;text-decoration: none;font-weight: bold;padding: 0 20px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
	header #nav > ul > li.active > a {cursor: pointer;text-decoration: none;}
	header #nav > ul > li > a:hover {color: #fff;text-decoration: none;}
	
	#intro {background: #450b77 url('../img/intro-repeat.png') repeat-x;border-top: 1px solid #8616bf;border-bottom: 1px solid #fff;position: relative;z-index: 90;}
	#intro .inner {padding: 55px 0;background: url('../img/intro-middle.png') no-repeat 50% 0;}
	#intro p {color: #ffffff;margin-bottom: 20px;padding-right: 20%;}
	#intro .button {
	 text-shadow: -1px -1px 0 #ff6d00;text-transform: none;border: 0;font-size: 13px;background-color: #ff9a01;border-radius: 5px;color: #fff;display: inline-block;padding: 15px 40px;text-decoration: none;
	 box-shadow: 0px 2px 2px #3a0762;
	 border-top: 1px solid #ffe702;
	 background: -moz-linear-gradient(
	 top,
	 #ffc101 0%,
	 #ff9a01);
	 background: -webkit-gradient(
	 linear, left top, left bottom,
	 from(#ffc101),
	 to(#ff9a01));
	}
	#intro .button:hover {
	 background: -moz-linear-gradient(
	 top,
	 #ff9a01 0%,
	 #ffc101);
	 background: -webkit-gradient(
	 linear, left top, left bottom,
	 from(#ff9a01),
	 to(#ffc101));
	}
	#intro .button i {margin-right: 10px;display: inline-block;width: 16px;height: 16px;float: left;}
	#intro .button i.download {background: url('../img/icon-download.png') no-repeat 50% 50%;}
	#intro .button span {color: #b1b1b1;font-weight: 100;}
	
	
	/*******************************************************************************************************************
	* CONTENT
	*******************************************************************************************************************/
	#content {padding: 40px 0 50px;text-shadow: 1px 1px 1px #fff;}
	.cols {margin-bottom: 30px;}
	.cols li {max-width: 32%;float: left;background: url('../img/cite.png') no-repeat;}
	.cols li p {padding-left: 45px;}
	.cols li.middle {margin: 0 2%;}
	form {margin: 45px 0 0;background: #eeeeee;border: 1px solid #e5e5e5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
	form fieldset {padding: 10px 40px 20px;color: #737373;}
	form .text {border: 1px solid #d6d6d6;background: #fff;width: 350px;padding: 8px;font-size: 12px;margin: 0 10px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
	form .text:hover {border-color: #aeaeae;}
	
	/*******************************************************************************************************************
	* TWITTER
	*******************************************************************************************************************/
	#twitter {background: #fff;border-top: 1px solid #e5e5e5;}
	#twitter .wrap {padding-top: 20px;padding-bottom: 5px;position: relative;}
	#twitter p {padding-left: 80px;}
	#twitter .icon {display: block;position: absolute;top: -20px;left: 20px;width: 56px;height: 61px;background: url('../img/twitter.png') no-repeat;}
	
	/*******************************************************************************************************************
	* FOOTER
	*******************************************************************************************************************/
	footer {padding: 30px 0;background: #1a1a1a;font-size: 0.85em;color: #777777;}
	footer p {line-height: 1.9em;}
	footer a, footer a:link, footer a:focus {color: #999999;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
	footer a:hover {color: #fff;}
	footer .socialIcons {padding-top: 7px;}
	footer .socialIcons a {display: inline-block;width: 29px;height: 29px;text-indent: -9999px;}
	footer .socialIcons a.rss {background: url('../img/small-rss.png') no-repeat;}
	footer .socialIcons a.facebook {background: url('../img/small-facebook.png') no-repeat;}
	footer .socialIcons a.twitter {background: url('../img/small-twitter.png') no-repeat;}
	
	
	/*******************************************************************************************************************
	* OTHER STYLES
	*******************************************************************************************************************/
	.wrap {margin: 0 auto;position: relative;max-width: 940px;padding: 0 20px;}
	.col {width: 48%;position: relative;margin-bottom: 20px;}
	.col h3, .col p {padding-left: 60px;}
	.col .icon {position: absolute;top: 0;left: 0;padding: 0;}
	.buttonCentered {text-align: center;margin-bottom: 30px;}
	
	
	.button, .button:link, .button:focus {
	 cursor: pointer;
	 position: relative;
	 margin-top: 10px;
	 display: inline-block;
	 text-decoration: none;
	 font-size: 12px;
	 font-weight: bold;
	 text-transform: uppercase;
	 color: #787b7c;
	 padding: 8px 20px;
	 background: -moz-linear-gradient(
	 top,
	 #ffffff 0%,
	 #f1f1f1);
	 background: -webkit-gradient(
	 linear, left top, left bottom,
	 from(#ffffff),
	 to(#f1f1f1));
	 -moz-border-radius: 3px;
	 -webkit-border-radius: 3px;
	 border-radius: 3px;
	 border: 1px solid #cacaca;
	 text-shadow: 0 0 0;
	}
	.button:hover {
	 text-decoration: none;
	 background: -moz-linear-gradient(
	 top,
	 #424242 0%,
	 #000);
	 background: -webkit-gradient(
	 linear, left top, left bottom,
	 from(#424242),
	 to(#000));
	 color: #fff;
	 border-color: #000;
	}
	.button.iconLeft {padding-left: 45px;}
	.button.iconRight {padding-right: 45px;}
	.button i {display: inline-block;position: absolute;top: 50%;margin-top: -9px;width: 16px;height: 16px;background-repeat: no-repeat;background-position: 50% 50%;}
	.button.iconLeft i {left: 20px;}
	.button.iconRight i {right: 20px;}
	.button i.more {background-image: url('../img/more.png');}
	.button i.email {background-image: url('../img/mail.png');margin-top: -8px;}
	
	/*******************************************************************************************************************
	* Responsive design
	*******************************************************************************************************************/
	@media (max-width: 975px) {
	 .wrap {max-width: auto;margin: 0}
	 .cols li {max-width: 30%;}
	 .cols li.middle {margin: 0 5%;}
	 form fieldset {padding: 15px;}
	 form label {display: block;margin-bottom: 10px;}
	 form .text {margin: 0;width: 100%;padding-left: 0;padding-right: 0;text-indent: 8px;margin-bottom: 0px;}
	 form .button {float: right;}
	
	}
	
	@media (max-width: 750px) {
	 header nav li a {font-size: 11px;padding: 0 10px}
	 .col, .cols li {width: 100%;max-width: 100%;float: none;margin: 0 0 30px !important;}
	 .cols li {max-width: 100%;}
	 .cols li.middle {margin: 0 0;}
	
	}
	
	@media (max-width: 580px) {
	 header {height: 50px;line-height: 50px;}
	 #intro .inner {padding: 30px 0;}
	 #intro p {padding-right: 0 !important;}
	 h1 {font-size: 2.6em;}
	 header a#logo {left: 20px;}
	 header #nav {right: 20px;}
	 header #nav > strong {display: block;float: right;cursor: pointer;}
	 header #nav > strong:hover {color: #fff;}
	 header #nav > ul {display: none;position: absolute;left: auto;right: 0;top: 80%;line-height: normal;white-space: nowrap;}
	 header #nav > ul > li, header #nav > ul > li > ul > li {float: none;margin-bottom: 1px;position: relative;background: none !important;}
	 header #nav > ul > li > ul {margin-top: 1px;position: relative !important;display: block !important;top: 0 !important;width: 100% !important;}
	 header #nav > ul > li > a, header #nav > ul > li.parent > a {color: #c3c3c3;text-decoration: none;padding: 10px 20px !important;height: auto;float: none !important;width: 100%;display: block;background: url('../img/subnav-bg.png');-webkit-transition:all 0s ease-in-out;-moz-transition:all 0s ease-in-out;-o-transition:all 0s ease-in-out;-ms-transition:all 0s ease-in-out;transition:all 0s ease-in-out;}
	 header #nav > ul > li > a:hover {background: #000;color: #fff;text-decoration: none;}
	 header #nav > ul > li > ul > li > a {background: url('../img/subnav-bg.png');}
	 footer p.floatLeft, footer p.floatRight {float: none !important;}
	 footer p.socialIcons {text-align: center;}
	 footer p.socialIcons a {margin: 0 5px;}
	 .buttonCentered {position: relative;top: -15px;}
	
	}
	
	
	
	
	
	
	
	/* iPhone4 */
	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	 html {width: 100%}
	}
	2. [文件] index.html ~ 9KB 下载(1)
	?
	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13
	14
	15
	16
	17
	18
	19
	20
	21
	22
	23
	24
	25
	26
	27
	28
	29
	30
	31
	32
	33
	34
	35
	36
	37
	38
	39
	40
	41
	42
	43
	44
	45
	46
	47
	48
	49
	50
	51
	52
	53
	54
	55
	56
	57
	58
	59
	60
	61
	62
	63
	64
	65
	66
	67
	68
	69
	70
	71
	72
	73
	74
	75
	76
	77
	78
	79
	80
	81
	82
	83
	84
	85
	86
	87
	88
	89
	90
	91
	92
	93
	94
	95
	96
	97
	98
	99
	100
	101
	102
	103
	104
	105
	106
	107
	108
	109
	110
	111
	112
	113
	114
	115
	116
	117
	118
	119
	120
	121
	122
	123
	124
	125
	126
	127
	128
	129
	130
	131
	132
	133
	134
	135
	136
	137
	138
	139
	140
	141
	142
	143
	144
	145
	146
	147
	148
	149
	150
	151
	152
	153
	154
	155
	156
	157
	158
	159
	160
	161
	162
	163
	164
	165
	166
	167
	168
	169
	170
	171
	172
	173
	174
	175
	176
	177
	178
	179
	180
	181
	182
	183
	184
	185
	186
	187
	188
	189
	190
	191
	192
	193
	194
	195
	196
	197
	198
	199
	200
	201
	202
	203
	204
	205
	206
	207
	208
	209
	210
	211
	212
	213
	214
	215
	216
	217
	218
	219
	<!doctype html>
	<html lang="cs">
	 <head>
	 <meta charset="utf-8">
	 <title>Continents</title>
	 <meta name="description" content="">
	 <meta name="keywords" content="">
	 <meta name="author" content="David Kohout & Tom&aacute;&scaron; Lach - www.tomaslach.cz">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <link rel="shortcut icon" href="/favicon.ico">
	 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
	 <link rel="stylesheet" href="css/main.css" media="screen,projection">
	 <link rel="stylesheet" href="css/print.css" media="print">
	 <script src="js/jquery.min.js"></script>
	 <script src="js/custom.js"></script>
	 <!--[if lt IE 9]>
	 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	 <![endif]-->
	 </head>
	 <body>
	
	 <header>
	 <div class="wrap">
	
	 <a id="logo" href="./" title="Continents">Continents</a>
	
	 <hr>
	
	 <nav>
	 <div id="nav">
	 <strong>Navigation</strong>
	 <ul>
	 <li class="active">
	 <a href="./" title="Home">Home</a>
	 </li>
	 <li>
	 <a href="./" title="Work">Work</a>
	 </li>
	 <li class="parent">
	 <a href="./" title="About us">About us</a>
	 <ul>
	 <li>
	 <a href="./">Lorem ipsum</a>
	 </li>
	 <li>
	 <a href="./">Lorem ipsum</a>
	 </li>
	 <li>
	 <a href="./">Lorem ipsum</a>
	 </li>
	 </ul>
	 </li>
	 <li>
	 <a href="./" title="Blog">Blog</a>
	 </li>
	 <li>
	 <a href="./" title="Contact">Contacts</a>
	 </li>
	 </ul>
	 </div>
	 </nav>
	
	 </div>
	 </header>
	
	 <hr>
	
	 <div id="intro">
	 <div class="inner">
	 <div class="wrap clearFix">
	
	 <h1>Share something. <strong>Worldwide.</strong></h1>
	
	 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
	
	 <a href="./" class="button" title="SIGN UP">SIGN UP</a>
	
	 </div>
	 </div>
	 </div> <!-- / #intro -->
	
	 <hr>
	
	 <div id="content">
	 <div class="wrap clearFix">
	
	 <h2>SOME OF THE COOL FEATURES</h2>
	
	 <div class="clearFix">
	 <div class="col floatLeft">
	
	 <img src="img/icon-location.png" alt="" class="icon">
	
	 <h3>Location Services</h3>
	
	 Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, austo odio, dapibus ac facilisis in.
	
	 </div>
	
	 <div class="col floatRight">
	
	 <img src="img/icon-backup.png" alt="" class="icon">
	
	 <h3>24/7 Back Up</h3>
	
	 Maecenas faucibus mollis interdum. Donec ullamcorpe it libero, a pharetra r nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in.
	
	 </div>
	 </div>
	
	 <div class="clearFix">
	 <div class="col floatLeft">
	
	 <img src="img/icon-twitter.png" alt="" class="icon">
	
	 <h3>Twitter Integration</h3>
	
	 Maecenas faucibus mollis interdum. Donec <a href="./">ullamcorper nulla</a> non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in.
	
	 </div>
	
	 <div class="col floatRight">
	
	 <img src="img/icon-stats.png" alt="" class="icon">
	
	 <h3>Full Realtime Statistics</h3>
	
	 Maecenas faucibus mollis interdum. Donec ullamcorper nuletus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in.
	
	 </div>
	 </div>
	
	 <div class="clearFix">
	 <div class="col floatLeft">
	
	 <img src="img/icon-tools.png" alt="" class="icon">
	
	 <h3>Highly Customisable</h3>
	
	 Maecenas faucibus mollis interdum. Donec ullamcorper nulla non auctor fringilla. Nulla viit libero, a pharetra tae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in.
	
	 </div>
	
	 <div class="col floatRight">
	
	 <img src="img/icon-awards.png" alt="" class="icon">
	
	 <h3>Award Winner Service</h3>
	
	 Maecenas follis interdum. Metus auctor it libero, a pharetra fringilla. Nulla vitae elit libero, a pharetra augue. Cras justo odio, dapibus ac facilisis in.
	
	 </div>
	 </div>
	
	 <div class="buttonCentered">
	 <a href="./" class="button iconRight">TAKE A FEATURE TOUR <i class="more"></i></a>
	 </div>
	
	 <h2>WHAT OUR CUSTOMERS ARE SAYING</h2>
	
	 <ul class="cols clearFix">
	 <li>
	 Nullam id dolor id nibh ultricies vehicula id elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Vivamus sagittis.
	 <strong>John Doe</strong>, Apple
	 </li>
	 <li class="middle">
	 Nullam id dolor id nibh ultricies vehicula id elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Vivamus sagittis.
	 <strong>John Doe</strong>, Apple
	 </li>
	 <li>
	 Nullam id dolor id nibh ultricies vehicula id elit. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Vivamus sagittis.
	 <strong>John Doe</strong>, Apple
	 </li>
	 </ul>
	
	 <form action="./" method="post">
	 <fieldset>
	
	 <label for="email">To stay in touch, simply subscribe to our newsletter.</label>
	 <input type="text" class="text" id="email">
	 <button type="submit" class="button iconLeft"><i class="email"></i> SUBSCRIBE</button>
	
	 </fieldset>
	 </form>
	
	 </div>
	 </div> <!-- / #content -->
	
	 <hr class="noPrint">
	
	 <div id="twitter">
	 <div class="wrap clearFix">
	 <span class="icon"></span>
	 Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis <a href="./">bit.ly/Pih1OA</a> <small>2 days ago</small>
	 </div>
	 </div>
	
	 <hr>
	
	 <footer>
	 <div class="wrap clearFix">
	
	 <p class="floatLeft">
	 Copyright &copy; 2012 <a href="./">Your Name</a> &ndash; Lorem ipsum dolor sit amet consectetur adipisicing elit sed
	 Free website template by <a href="http://www.templatestar.net">Templatestar.net</a>
	 thanks to <a href="http://www.grilykrby.cz/">Gril Weber</a>
	 
	
	 <p class="socialIcons floatRight">
	 <a href="./" class="rss">RSS</a>
	 <a href="./" class="facebook">Facebook</a>
	 <a href="./" class="twitter">Twitter</a>
	 
	
	 </div>
	 </footer>
	
	 </body>
	</html>

	

	

	

	

	

	

	/*******************************************************************************************************************
	* Author: Tomas Lach (www.tomaslach.cz) *
	* Date: 26.08.2012 *
	*******************************************************************************************************************/
	* {background: none !important}
	body {color: #000;font: normal 12px Arial,sans-serif;padding-top: 0}
	p {font-size: 1.0em;line-height: 1.8em;margin-bottom: 15px}
	address {font-style: normal;padding-bottom: 15px}
	
	/*******************************************************************************************************************
	* LINKS *
	*******************************************************************************************************************/
	a, a:link, a:focus {color: #000;outline: 0}
	a:visited {color: #000}
	a:hover {color: #000;text-decoration: none}
	a.more {display: none}
	
	/*******************************************************************************************************************
	* TITLES *
	*******************************************************************************************************************/
	h1, h2, h3, h4, h5 {margin: 0 0 10px 0}
	h1 {font-size: 3.0em;color: #000;margin-bottom: 5px;font-weight: normal;}
	h2 {font-size: 1.6em;color: #000;padding-top: 40px;margin-bottom: 20px;font-weight: normal;}
	h3 {font-size: 1.2em;color: #000;margin-bottom: 20px;text-transform: uppercase}
	h4 {font-size: 1.2em;color: #000;}
	h5 {font-size: 1.1em}
	
	
	/*******************************************************************************************************************
	* HEADER *
	*******************************************************************************************************************/
	header {display: none}
	
	/*******************************************************************************************************************
	* INTRO *
	*******************************************************************************************************************/
	#intro {margin-bottom: 0}
	
	/*******************************************************************************************************************
	* CONTENT *
	*******************************************************************************************************************/
	.cols {}
	
	
	/*******************************************************************************************************************
	* FOOTER *
	*******************************************************************************************************************/
	.socialIcons {display: none;}
	
	/*******************************************************************************************************************
	* OTHER STYLES *
	*******************************************************************************************************************/
	#twitter, form, .button {display: none;}
	hr {margin: 30px 0;}
	.wrap {width: 100%;padding: 0;}
	img {display: none;}
	.high {font-weight: bold;color: #2d7bac}
	.noPrint {display: none}

	

	/*******************************************************************************************************************
	* Author: Tomas Lach (www.tomaslach.cz) *
	* Date: 27.02.2011 *
	*******************************************************************************************************************/
	* {margin: 0;padding: 0}
	body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {border: 0}
	ul, ol {list-style-type:none}
	
	hr {display: none}
	small {font-size: 0.9em}
	.clear {clear: both;display: block;height: 0;line-height: 0;font-size: 0;width: 100%}
	.noScreen {display: none !important}
	.hidden {display: none}
	.floatLeft {float: left !important}
	.floatRight {float: right !important}
	.bold {font-weight: bold !important}
	.small {font-size: 0.9em !important}
	.large {font-size: 1.1em !important}
	.italic {font-style: italic !important}
	.block {display: block !important}
	.inlineBlock {display: inline-block !important}
	.inline {display: inline !important}
	.alignRight {text-align: right !important}
	.alignCenter {text-align: center !important}
	.alignJustify {text-align: justify !important}
	.verticalTop {vertical-align: top !important}
	.verticalBtm {vertical-align: bottom !important}
	.relative {position: relative !important}
	.absolute {position: absolute !important}
	.left {left: 0 !important}
	.bottom {bottom: 0 !important}
	.noBorder {border: 0 !important}
	img.floatLeft {margin-right: 15px !important;margin-bottom: 10px}
	img.floatRight {margin-left: 15px !important;margin-bottom: 10px}
	/* clearfix */
	.clearFix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
	.clearFix {display: inline-block}
	/* hidden for ie mac \*/
	* html .clearFix {height: 1%}
	.clearFix {display: block}

	

	$(document).ready(function() {
	
	 $('li.parent').hover(function() {
	 if($(this).find('> ul').css('display') == "none"){
	 $(this).find('> ul').slideDown(200);
	 slide = true;
	 }
	 }, function() {
	 if(slide == true){
	 $(this).find('> ul').slideUp();
	 slide = false;
	 }
	 });
	
	 $('nav strong').click(function() {
	 $('nav ul').toggle();
	 });
	
	});
试试其它关键字
　响应式布局　　响应式　
同语言下
可能有用的
灏明贡献的其它代码(23)