前几天做了一个响应式布局的案例，这里和大家分享一下，主要是总结一些经验。
1.html代码
<body> <!-- 头部 --> <header id="header"> <div class="logo"> <img src="images/largelogo.jpg" alt="logo" class="large"> <img src="images/middlelogo.jpg" alt="logo" class="middle"> <img src="images/smalllogo.jpg" alt="logo" class="small"> </div> <div class="search"> <input type="search" name="kw" placeholder="请输入搜索内容"> <button>搜索</button> </div> <div class="nav"> <button id="btn"> <span></span> <span></span> <span></span> </button> <ul> <li><a href="javascript:">首页</a></li> <li><a href="javascript:">课程</a></li> <li><a href="javascript:">公告</a></li> <li><a href="javascript:">登录</a></li> </ul> </div> </header> <!--横幅 --> <div id="banner"> <img src="images/banner.jpeg" alt="banner"> </div> <!-- 主体内容 --> <div id="main"> <div class="row"> <div class="col"> <a href="javascript:"> <img src="images/main1.jpeg"> </a> <p>HTML5</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main2.jpg"> </a> <p>CSS3</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main3.jpeg"> </a> <p>LESS</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main4.jpg"> </a> <p>BootStrap</p> </div> </div> <div class="row"> <div class="col"> <a href="javascript:"> <img src="images/main1.jpeg"> </a> <p>HTML5</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main2.jpg"> </a> <p>CSS3</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main3.jpeg"> </a> <p>LESS</p> </div> <div class="col"> <a href="javascript:"> <img src="images/main4.jpg"> </a> <p>BootStrap</p> </div> </div> </div> <!-- 页尾 --> <footer id="footer"> </footer></body>
2.css代码
<style> /* 初始化 */ body { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: 0; } ul{ list-style: none; } a{ text-decoration: none; } .clearfix:after{ content: ''; display: block; clear: both; } body { background: #efefef; } /* 头部 */ #header{ height: 40px; padding: 8px 0 15px 0; background: #88c5e1; border-bottom:5px solid #54abd4; position: relative; } /* 头部logo */ #header .logo { width: 25%; text-align: center; font-size: 0; float: left; } #header .logo img{ height: 40px; display: none; } #header .logo img.large{ display: inline-block; } @media (max-width: 1024px){ #header .logo img.large{ display: none; } #header .logo img.middle{ display: inline-block; } #header .logo img.small{ display: none; } } @media (max-width: 640px){ #header .logo img.large{ display: none; } #header .logo img.middle{ display: none; } #header .logo img.small{ display: inline-block; } } /* 头部搜索框 */ #header .search { width: 50%; float: left; } @media (max-width: 640px){ #header .search{ width: 60%; } } #header .search input{ width: 80%; height: 40px; box-sizing: border-box; padding: 0 10px; float: left; border: 1px solid #ccc; border-radius: 10px 0 0 10px; } #header .search button{ width: 20%; height: 40px; box-sizing: border-box; float:right; border: 1px solid #ccc; border-radius: 0 10px 10px 0; } /* 头部导航 */ #header .nav { width: 25%; float: left; } #header .nav button{ display: none; } #header .nav button span{ display: none; } #header .nav li{ width: 25%; float: left; height: 40px; text-align: center; font-size: 12px; } #header .nav li a{ display: block; height: 40px; color:#fff; } #header .nav li a:hover{ color:#888; } @media (max-width: 640px) { #header .nav{ width: 15%; } #header .nav ul{ position: absolute; top: 54px; left: 0; width: 100%; background: #88c5e1; height: 0; overflow: hidden; transition: .5s; } #header .nav ul.open{ height: 160px; } #header .nav li{ float: none; text-align: center; line-height: 40px; width: 79%; margin-top: 2px; } #header .nav button{ display: block; padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px; margin: 2px auto; background: transparent; } #header .nav button span{ display: block; width: 22px; height: 2px; background: #888; margin-bottom: 5px; } #header .nav button span:last-child{ margin-bottom: 0; } } /* banner */ #banner img{ width: 100%; height: 400px; } /* 主体内容 */ #main{ width: 1000px; margin: 10px auto; } #main .col{ float: left; width: 25%; box-sizing: border-box; padding: 10px; } #main .col a{ display: block; } #main .col p{ padding:10px 0; text-align: center; font-size: 16px; font-weight: 700; background: #fff; margin-top: 0; box-sizing: border-box; } #main .col img{ display: block; width: 100%; height: 300px; } @media (max-width: 1024px){ #main .col{ width: 50%; } #main{ width: 100%; } } @media (max-width: 640px){ #main .col{ width: 100%; } } /* 页尾 */ #footer{ clear: both; height: 400px; } </style>
js代码
<script> (function(){ var btn = document.querySelector("#btn"); var navlist = document.querySelector(".nav ul") btn.onclick=function(){ navlist.classList.toggle("open"); } })();</script>
3.效果图
- 屏幕大于1024px
- 屏幕大于640px,小于1024px logo变了，主体内容变为两列
- 屏幕小于640px logo变了，出现导航按钮，点击出现下拉列表，主体内容变为一列
4.总结
-
那个导航按钮我为图方便，我用的是span，其实可以用字体图标（css精灵图），用的所有插图都是网上随便找的，尺寸不是很合适，特别是banner那张图，已经变形啦，但无伤大雅，主要是拿来练手，大家想好看，可以先在ps上处理下。
-
头部和主体内容都是用浮动做的，其实可以用flex布局，主要是考虑到float的兼容性更好，在加上我们用的是pc优先，本来就是考虑其兼容性比移动优先要好，所以干脆让其好上加好。
-
那个下拉菜单是用定位做的，注意transition属性不能与display一起使用，我们想隐藏某个div，也可以将其高度设为0，相当于display:none;但此时应该会使文本内容溢出，所以还要设置overflow：hidden;想要显示时不能直接height：auto；要写死一个固定高度，这样才能实现一个过渡的动画效果。按钮可以看到是透明的，主要用来一个background:transparent;其实不设置背景的时候默认就是这个。
-
中间用了一点js，主要是控制导航按钮，单击按钮会出现下拉列表。巧妙地在ul后面加上了一个open类，所以我们只要控制有无open类，就可以控制其显示或隐藏，所以绑定按钮。js用的自调用函数，也可以Windows.onload(太老啦)。toggle方法正好满足我们的需求。
-
主体内容我没有用margin来调每列盒子之间的距离，而是用的padding，图片外的盒子设置一个padding，不加边框，不加背景，在设置一个box-sizing:border-box;效果其实和用margin一样，主要是这样避免了最后还要将最后一个margin给去掉。
-
这只是一个很简单的响应式布局的案例，初学者可以拿来练练手，会对响应式布局有更深的理解。
