响应式布局案例实战
前几天做了一个响应式布局的案例,这里和大家分享一下,主要是总结一些经验。
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
![ab3c305ad1441bb6cd09811ceb7a50a7.png](https://i-blog.csdnimg.cn/blog_migrate/670ee7a88a22c5cc52a2cf05e0265121.jpeg)
- 屏幕大于640px,小于1024px logo变了,主体内容变为两列
![38b3e3a32777e4c1f749861b569c30a4.png](https://i-blog.csdnimg.cn/blog_migrate/5309db4b1eb64bcaeeeb9232274e3289.jpeg)
- 屏幕小于640px logo变了,出现导航按钮,点击出现下拉列表,主体内容变为一列
![4abf0db21df37551176ab47a395b37e9.png](https://i-blog.csdnimg.cn/blog_migrate/e405a5ceaa0f3d3cc6efb3d9657e168a.jpeg)
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给去掉。
- 这只是一个很简单的响应式布局的案例,初学者可以拿来练练手,会对响应式布局有更深的理解。