响应式布局

来源：互联网发布：手机淘宝店铺模版编辑：程序博客网时间：2024/05/30 04:52
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><style type="text/css">article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     display: block;}*{padding:0;margin:0;transition:all 1s;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix{display:inline-block;}.clearfix{display:block;zoom:1;}img{border:0;max-width:100%;height:auto;width:auto\9;}#pagewrap{width:980px;margin:0 auto;}#header{height:160px;position:relative;}#site-logo{position:absolute;top:0;}#site-logo a{font:bold 30px/100% Arial,Helvetica,sans-serif;color:#fff;text-decoration:none;}#site-description{font:italic 100%/130% "Times New Roman",Times,serif;position:absolute;top:55px;color:#fff;}#searchform{position:absolute;right:10px;bottom:6px;z-index:100;width:160px;}#searchform #s{width:140px;float:right;background:#fff;border:none;padding:6px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);-webkit-transition:width 0.7s;-moz-transition:width 0.7s;transition:width 0.7s;}#main-nav{width:100%;background:#ccc;position:absolute;left:0;bottom:0;padding:0;margin:0;z-index:100;background:#6a6a6a url(images/nav-bar-bg.png) repeat-x;background:-webkit-gradient(linear,left top,left bottom,from(#b9b9b9),to(#6a6a6a));background:-moz-linear-gradient(top,#b9b9b9,#6a6a6a);background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);}#main-nav li{padding:0;margin:0;list-style:none;float:left;position:relative;}#main-nav li:first-child{margin-left:10px;}#main-nav a{display:block;line-height:100%;font-weight:bold;color:#fff;padding:14px 15px;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.5);}#main-nav a:hover{color:#fff;background:#474747;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));background: -moz-linear-gradient(top,  #282828,  #4f4f4f);background: linear-gradient(-90deg, #282828, #4f4f4f);}#content{width:600px;float:left;background:#fff;margin:30px 0 30px;padding:20px 35px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);box-shadow: 0 1px 3px rgba(0,0,0,.4);}.post{margin-bottom:40px;}.post-title{margin:0 0 5px;padding:0;font:bold 26px/120% Arial,Helvetica,sans-serif;}.post-title a{color:#000;}.post-meta{margin:0 0 10px;font-size:90%;}.post-image {margin: 0 0 15px;}#sidebar{width:280px;float:right;margin:30px 0 30px;}.widget{background:#fff;margin:0 0 30px;padding:10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);box-shadow: 0 1px 3px rgba(0,0,0,.4);}.widgettitle{margin:0 0 5px;padding:0;}.widget ul{padding:0;margin:0;}.widget ul li{margin:0;padding:6px 0;list-style:none;clear:both;border-top:solid 1px #eee;}.widget .flickr_badge_image{margin-top:10px;}.widget .flickr_badge_image img{width:48px;height:48px;margin-right:12px;margin-bottom:12px;float:left;}#footer{clear:both;color:#ccc;font-size:85%;}#footer a{color:#fff;}@media screen and (max-width:980px){#pagewrap{width:95%;}#content{width:60%;padding:3% 4%;}#sidebar{width:30%;}#sidebar .widget{padding:8% 7%;margin-bottom:10px;}.video embed,.video object,.video iframe {width: 100%;height: auto;min-height: 300px;}}@media screen and (max-width:650px){#header{height:auto;}#searchform{position:absolute;top:5px;right:0;z-index:100;height:40px;}#searchform #s{width:70px;}#searchform #s:focus{width:150px;}#main-nav{position:static;}#site-logo{margin:15px 100px 5px 0;position:static;}#site-description{margin:0 0 15px;position:static;}#content{width:auto;float:none;margin:20px 0;}#sidebar{width:100%;float:none;margin:0;}#sidebar{width:100%;margin:0;float:none;}#sidebar .widget{padding:3% 4%;margin:0 0 10px;}.video embed,.video object,.video iframe {min-height: 250px;}@media screen and (max-width:480px){html{-webkit-text-size-adjust:none;}#main-nav a{font-size:90%;padding:10px 8px;}}}body{background:url(body-bg.jpg);color:#666;font:0.81em/150%;}a{color:#026acb;text-decoration:none;outline:none;}a:hover{text-decoration:underline;}p{margin:0 0 1.2em;padding:0;}ul,ol{margin:1em 0 1.4em 24px;}li{margin:0 0 0.5em 0;padding:0;}h1,h2,h3,h4,h5,h6{line-height:1.4em;margin:20px 0 0.4em;color:#000;}h1 {font-size: 2em;}h2 {font-size: 1.6em;}h3 {font-size: 1.4em;}h4 {font-size: 1.2em;}h5 {font-size: 1.1em;}h6 {font-size: 1em;}input[type='search']{-webkit-appearance:none;outline:none;}input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {display: none;}</style><title>Responsive</title><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--></head><body><div id="pagewrap"><header id="header"><hgroup><h1 id="site-logo"><a href="#">Demo</a></h1><h2 id="site-description">Site Description</h2></hgroup><nav><ul id="main-nav" class="clearfix"><li><a href="http://webdesignerwall.com">Home</a></li><li><a href="http://themify.me">Themify</a></li><li><a href="http://icondock.com">IconDock</a> </li><li><a href="http://ndesign-studio.com">N.Design</a></li></ul></nav><form id="searchform"><input type="search" id="s" placeholder="Search"></form></header><div id="content"><article class="post clearfix"><header><h1 class="post-title"><a href="#">Just a Post Title</a></h1><p class="post-meta"><time class="post-date" datetime="2011-05-08" pubdate>May 8, 2011</time> <em>in</em> <a href="#">Category</a></p></header><figure class="post-image"> <img src="http://webdesignerwall.com/demo/adaptive-design/images/sample-image.jpg" /> </figure><p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit, aliquet quis tincidunt eget, dignissim non tortor.</p></article></div> <aside id="sidebar"><section class="widget"><h4 class="widgettitle">Sidebar</h4><ul><li><a href="#">WordPress</a> (3)</li><li><a href="#">Design</a> (23)</li><li><a href="#">Design </a>(18)</li></ul></section><section class="widget clearfix"><h4 class="widgettitle">Flickr</h4> //本来有图片的 九张小图</section></aside><footer id="footer"><p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a></p></footer></div></body></html>
无demo 完整代码在上面放在编辑器保持观看即可 (图片部分去掉了）
0 0