效果图:
素材图片:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .navlist { position: absolute; top: 10px; } a { text-decoration: none; color: White; } .navlist a { margin-left: 60px; color: #666; } .expand { height: 0px; background-color: #333d4d; overflow: hidden; position: relative; top: 30px; width: 100%; } .expdiv { height: 130px; width: 500%; } .expdiv-list { width: 20%; text-align: center; float: left; line-height: 110px; color: White; } .expand .close-btn { width: 120px; height: 20px; background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px; position: absolute; left: 50%; bottom: -2px; margin-left: -60px; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#menuList").on("click", "a", function() { // 判断当前单击的对象是否被激活，则关闭展区 if ($(this).hasClass("btn-active")) { $("#expandZone #closeBtn").click(); return false; } // 获取当前单击的索引，并获取相应的位置 var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%"; if ($("#expandZone").hasClass("active")) { // 给expdiv类元素赋予动画切换的效果 $("#expandZone .expdiv").animate({ marginLeft: mlValue }); } else { $("#expandZone .expdiv").css({ marginLeft: mlValue }); $("#expandZone").animate({ height: "130px" }).addClass("active"); } // 为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式 $(this).addClass("btn-active").siblings().removeClass("btn-active"); return false; }); // 模拟点击closeBtn按钮 $("#expandZone #closeBtn").on("click", function() { $("#expandZone").animate({ height: "0px" }, function() { $(this).removeClass("active"); $("#menuList .btn-active").removeClass("btn-active"); }); return false; }); }); </script> </head> <body> <div id="menuList" class="navlist"> <a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a> <a href="#">关于我们</a> </div> <div id="expandZone" class="expand"> <div class="expdiv"> <div class="expdiv-list"> <a href="#">慕课网主页</a> </div> <div class="expdiv-list"> <a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a> </div> <div class="expdiv-list"> <a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a> </div> <div class="expdiv-list"> 个人信息： </div> <div class="expdiv-list"> 公司地址：北京市西城区德外大街10号 </div> </div> <div id="closeBtn" class="close-btn"> </div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>css3-media-queries-demo</title> <style> body /*div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th,td */ { padding: 0; margin: 0; } .content { zoom: 1;/*设置或检索对象的缩放比例。*/ } .content:after { content: "你是谁";/*在content后面插入文字*/ display: block; height: 0; clear: both; /*visibility: hidden;/*隐藏*/ } .leftBox, .rightBox { float: left; width: 20%; height: 500px; margin: 5px; background: #ffccf7; display: inline; /*inline 默认。 此元素会被显示为内联元素，元素前后没有换行符。*/ /*css3的效果 兼容*/ /* * －o－：以Presto为渲染引擎的浏览Opera的私有属性、 * －moz－：以Gecko为渲染引擎的浏览器Mozilla Firefox的私有属性 * －webkit－：以Webkit为渲染引擎的浏览器Safari、Google Chrome的私有属性 * －ms－：IE8的私有属性的transition：CSS3的过度效果 * / -webkit-transition: width 1s ease; /* Safari and Chrome */ -moz-transition: width 1s ease;/* Firefox 4 */ -o-transition: width 1s ease; /* Opera */ -ms-transition: width 2s ease;/*Google Chrome,IE8*/ transition: width 1s ease; /**/ } .middleBox { float: left; width: 50%; height: 800px; margin: 5px; background: #b1fffc; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease; } .rightBox { background: #fffab1; } @media only screen and (min- 1024px) { .content { width: 1000px; margin: auto } } @media only screen and (min- 400px) and (max- 1024px) { .rightBox { width: 0; } .leftBox { width: 30% } .middleBox { width: 65% } } @media only screen and (max- 400px) { .leftBox, .rightBox, .middleBox { width: 98%; height: 200px; } } </style> <body> <div class="content"> <div class="leftBox">1</div> <div class="middleBox">2</div> <div class="rightBox">3</div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>响应式</title> <style type="text/css"> body { margin: 0 auto; } ul { padding: 0; margin: 0; } a { text-decoration: none; color: white; font-size: 14pt; padding: 0px 3px; display: block; } .menu { background: red; } .menu li { display: block; float: left; margin: 3px; background: grey; width: 140px; text-align: center; color: white; font-size: 9pt; } #logo { background: white; width: 230px; } #logo a { color: Gray; font-size: 35pt; background: white; } #toplogo { display: none; margin: 0 auto; text-align: center; } #toplogo a { color: Black; font-size: 35pt; } @media only screen and (min- 585px) and (max- 823px) { #logo { display: none; } #toplogo { display: block; width: 100%; } .menu { width: 585px; background: red; } } @media only screen and (max- 585px) { #logo { display: none; } #toplogo { display: block; width: 100%; } .menu { width: 100%; } .menu li { width: 100%; float: left; } } </style> </head> <body> <ul class="menu"> <div id="toplogo"> <a href="#">慕课网</a></div> <li><a href="#">课程大厅</a> <br /> IT课程都在这里啦 </li> <li><a href="#">学习中心</a> <br /> 好好学习，天天向上 </li> <li id="logo"><a href="#">慕课网</a> </li> <li><a href="#">个人中心</a> <br /> 个人信息 修改密码 </li> <li><a href="#">关于我们</a> <br /> 单位地址 应聘信息 </li> </ul> </body> </html>