简介：使用响应式web设计一个绿色环保栏
知识储备：
1.视口属性的配置：
在`<head>`中的`<meta>`标签中配置视口属性
the
content="user-scalable=no" 用于设置用户是否可以缩放（默认为yes）;
width=device-width 设置视窗视口的宽度，这里表示与可见视口宽度（设备大小）相同；
initial-scale 用于设置初始缩放比例，取值为0~10.0;
maximum-scale/minimum-scale 用于设置最大/小缩放比例，取值为0~10.0；
设置height属性设置视窗视口的高度。<hr>
2.百分比布局：固定布局（以像素为单位）可以换算为百分比宽度，来实现百分比布局。
换算公式：目标元素宽度/父盒子宽度=百分数宽度<hr>
3.媒体查询
CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。
媒体查询由媒体类型和条件表达式组成。
@media screen and (max-width: 960px) {
/*样式设置*/
}
详情请见：媒体查询的使用规范
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>响应式01</title>
<link href="project01.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div class="header">
<div class="container">
<nav>
<input type="checkbox" id="togglebox"/>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">全球问题</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系方式</a></li>
</ul>
<!-- 汉堡菜单按钮-->
<label class="menu" for="togglebox">
<img src="image/menu.png"/>
</label>
</nav>
<div class="logo">
<a href="#"><img src="image/logo.png" alt=""></a>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- banner-->
<div class="banner">
<!-- <img src="image/bg.jpg" alt="">-->
<div class="container">
<div class="banner-info">
<h3>爱护需要行动</h3>
<p>
爱护森林吧！行动起来吧！滥砍乱伐森林是人类的<br>
愚蠢行为，再不要做这种危害子孙后代的事了。我<br>
们一定要保护好现有的森林资源！谨防森林火灾再<br>次发生！
</p>
<a href="#" class="button">了解更多</a>
</div>
</div>
</div>
<div class="mission">
<div class="container">
<div class="mission-header">
<h3>我们的使命</h3>
</div>
<div class="mission-container">
<div class="mission_div mission-left">
<img src="image/mission.jpg" alt=""/>
</div>
<div class="mission_div mission-right">
<div class="mis-one">
<div class="mis-left">
<img src="image/polution.jpg" alt=""/>
</div>
<div class="mis-right">
<h3>治理污染</h3>
<p>1.将环境保护纳入国民经济与社会发展计划和年度<br>
计划，在经济发展中防治环境污染和生态破坏。</p>
</div>
<div class="clearfix"></div>
</div>
<div class="mis-one">
<div class="mis-left">
<img src="image/trash.jpg" alt=""/>
</div>
<div class="mis-right">
<h3>垃圾分类</h3>
<p>关心垃圾分类，特别是可回收垃圾，进行回收再<br>
生，减少对森林树木的采集砍伐。</p>
</div>
<div class="clearfix"></div>
</div>
<div class="mis-one">
<div class="mis-left">
<img src="image/save.png" alt=""/>
</div>
<div class="mis-right">
<h3>节能低碳</h3>
<p>开始低碳生活吧，节能减排，减少对资源的浪费，<br>
并还自己一片蓝天！</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<p >©2016 itcast. All Rights Reserved | Design by
<a href="#">传智播客</a>
</p>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
css样式
html{
font-family: sans-serif;
box-sizing: border-box;
}
*,*:before,*:after{
box-sizing:inherit;
}
body,p,ul,li,dl,dt,dd,h1,h2,h3,h4,img{
margin: 0;
padding: 0;
border: 0;
}
ul,li{
list-style-type: none;
}
body{
width: 100%;
background: #fff;
font-family: 'Roboto Slab',Serif;
}
body a{
text-decoration: none;
transition: 0.5s all;
}
img{
max-width: 100%;
height:auto;
width: auto;
vertical-align: middle;
}
.clearfix{
clear: both;
}
.container{
margin: 0 auto;
padding: 0 15px;
width:100%;
}
.header{
width:100%;
background: #7ddf6c;
padding: 33px 0;
position: relative;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
margin: 0 35px;
display: inline-block;
}
nav ul li a{
font-family: 'Droid Serif',Serif;
color:#fff;
font-size: 1.25em;
font-weight: 500;
}
nav ul li a:hover,nav ul li a.active{
color: #000;
}
nav input[type="checkbox"],
.menu{
position: absolute;
left: 2%;
top:1px;
display: none;
}
.menu img{
width:50px;
height: 50px;
border-radius: 50%;
}
.logo{
position: absolute;
right: 10%;
top:0%;
}
.banner{
width:100%;
background: url("image/bg.jpg") no-repeat 0px 0px;
background-size: cover;
min-height: 680px;
overflow: hidden;
}
.banner-info{
width: 30%;
background: rgba(255,255,255,0.65);
padding: 30px 30px;
float: right;
margin-top: 320px;
}
.banner-info h3{
font-family: 'Droid Serif',Serif;
font-size: 1.5em;
color: #159400;
}
.banner-info p{
font-size: 0.875em;
line-height: 1.8em;
color: #000;
margin: 9px 0 15px;
}
.banner-info a{
display: inline-block;
padding: 7px 15px;
background: #159400;
font-size: 1em;
color: #fff;
}
a.button:hover,a.button:focus,a.button:active{
background: #6cd79c;
text-decoration: underline;
}
.mission{
background: #fffdd2;
padding: 80px 0;
}
.mission-header h3{
font-family: 'Droid Serif',Serif;
font-size:2em;
color: #159400;
text-align: center;
}
.mission-container{
margin-top: 35px;
}
.mission_div{
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding: 0 15px;
}
.mission-left img{
width: 100%;
}
.mis-one{
margin-bottom: 50px;
}
.mis-left{
width:15%;
float:left;
}
.mis-left img{
border-radius: 50%;
width:100%;
}
.mis-right{
width: 82%;
float: right;
}
.mis-right h3{
font-size: 1.25em;
color: #7ddf6c;
}
.mis-right p{
font-size: 0.875em;
color: #000;
line-height: 1.8em;
margin:12px 0 0 0;
}
.footer{
padding: 18px 0;
background: #7ddf6c;
}
.footer p{
margin: 9px 0 0 0;
font-size: 0.875em;
color: #fff;
text-align: center;
}
.footer p a{
color:#fff;
}
.footer p a:hover,.footer p a.active{
color:#000;
}
@media (max-width:1440px) {
.banner-info{
width: 34%;
padding: 22px;
margin-top: 280px;
}
}
@media (max-width: 1280px) {
.banner-info{
width:36%;
padding: 22px;
margin-top: 200px;
}
}
@media (max-width: 1200px) {
.header{
padding: 24px 0;
}
.logo{
right:6%;
width:13%;
}
nav>ul li{
margin: 0 17px;
}
.logo img{
width: 100%;
}
.banner{
min-height: 456px;
}
.mission{
padding: 70px 0;
}
.mis-right p{
margin: 6px 0 0 0;
}
.mis-one{
margin-bottom: 26px;
}
}
@media (max-width: 1024px) {
.banner-info{
padding: 22px 22px;
margin-top: 145px;
width: 43%;
}
.banner-info h3{
font-size: 1.4em;
}
.banner-info a{
font-size: 0.875em;
}
}
@media (max-width: 768px) {
nav>ul li a{
font-size: 1em;
}
.banner{
min-height: 360px;
}
.banner-info{
width: 55%;
padding: 13px;
margin-top: 88px;
}
.banner-info h3{
font-size: 1.25em;
}
.banner-info p{
font-size: 0.75em;
}
.banner-info a{
font-size: 0.875em;
}
.mission{
padding: 55px 0;
}
.mission-left,.mission-right{
float: left;
width: 50%;
}
.mission-right{
padding-left: 0;
}
.mis-right{
width: 80%;
float: right;
}
.mis-left{
width:16%;
}
.mis-one{
margin-bottom: 20px;
}
}
@media (max-width: 640px) {
.header{
padding: 25px 0;
}
.menu{
display: block;
cursor: pointer;
}
.menu img{
width: 100%;
}
nav>ul{
display: none;
}
nav input[type="checkbox"]:checked ~ ul{
display: block;
}
nav ul li{
width: 100%;
display: inline-block;
text-align: center;
margin: 0;
padding: 0;
}
nav ul li a{
display: block;
margin:10px 0;
}
.logo{
width: 17%;
right:4%;
}
.banner{
min-height: 300px;
}
.banner-info h3{
font-size: 1em;
}
.mission{
padding: 45px 0;
}
.mission-header h3{
font-size: 1.25em;
}
.mission-right h3{
font-size: 1em;
}
.mission-left,.mission-right{
padding: 0;
float: left;
width: 100%;
}
.mission-right{
margin: 30px 0 0 0;
}
.mis-left{
width:13%;
margin-top: 3px;
}
.mis-right{
width: 82%;
}
.mis-right p{
margin:10px 0 0 0;
}
.mis-one{
margin-bottom:24px;
}
.mis-one:nth-child(3){
margin: 0;
}
.footer p{
margin: 0px 0 20px 0;
}
}
最终效果如下：
改变视口大小后:出现汉堡菜单
扫一扫
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
