效果图

桌面端：

移动端

代码和包

html代码

<!DOCTYPE html>
<html lang="en">
<head><title>响应式绿色环保</title><!-- 自定义主题文件 --><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/response.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!-- header -->
<div class="header"><div class="container"><nav><input type="checkbox" id="togglebox" /><ul><li><a class="active" href="index.html">首页</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="data:images/menu.png"/></label></nav><div class="logo"><a href="index.html"><img src="data:images/logo.png"/></a></div><div class="clearfix"></div></div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner"><div class="container"><div class="banner-info"><h3>爱护需要行动</h3><p>爱护森林吧！行动起来吧！蛮砍乱伐森林是人类的愚蠢行为，再不要做这种危害子孙后代的事了。我们一定要保护好现有的森林资源！谨防森林火灾再次发生！</p><a href="#" class="button">了解更多</a></div></div>
</div>
<!-- //banner -->
<!-- mission -->
<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="data:images/mission_img.jpg" alt=""/></div><div class="mission_div mission-right"><div class="mis-one"><div class="mis-left"><img src="data:images/i1.gif" alt=""/></div><div class="mis-right"><h3>治理污染</h3><p>1.将环境保护纳入国民经济与社会发展计划和年度计划，在经济发展中防治环境污染和生态破坏。 </p></div><div class="clearfix"></div></div><div class="mis-one"><div class="mis-left"><img src="data:images/i2.gif" alt=""/></div><div class="mis-right"><h3>垃圾分类</h3><p>关心垃圾分类，特别是可回收垃圾，进行回收再生，减少对森林树木的采集砍伐</p></div><div class="clearfix"></div></div><div class="mis-one"><div class="mis-left"><img src="data:images/i3.gif" alt=""/></div><div class="mis-right"><h3>节能低碳</h3><p>开始低碳生活吧，节能减排，减少对资源的浪费，并还自己一片蓝天！</p></div><div class="clearfix"></div></div></div><div class="clearfix"></div></div></div>
</div>
<!-- //mission -->
<!-- footer -->
<div class="footer"><div class="container"><p> &copy; 2016 itcast. All Rights Reserved | Design by<a href="#"> 传智播客</a></p><div class="clearfix"></div></div>
</div>
</body>
</html>

CSS代码

/*第7单元 项目7-1 响应式绿色环保 CSS文件*/
html {font-family: sans-serif;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。*/box-sizing: border-box;
}
*, *:before, *:after {/*规定应从父元素继承 box-sizing 属性的值。*/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;/*过渡时长为0.5s*/
}
img {max-width:100%;/*图片的最大宽度为100%*/height: auto;width: auto;vertical-align: middle;/*把此元素放置在父元素的中部*/
}
.clearfix{clear: both;/*清除浮动*/
}
.container{margin: 0 auto;padding: 0 15px;width:100%;
}
/*--header、nav--*/
.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;/*20px÷16px=1.25*/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: 10px;display:none;/*隐藏不显示*/
}
.logo{position:absolute;/*绝对定位，设置宽高*/right: 10%;top: 0%;
}
/*--banner--*/
.banner{width:100%;background:url(../images/banner.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; /*24px÷16px=1.5*/color: #159400;
}
.banner-info p{font-size:0.875em; /*14px÷16px=0.875*/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:#ffffff;
}
a.button:hover,
a.button:focus,
a.button:active {background: #6cd79c;text-decoration: underline;
}
/*--mission--*/
.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: 30px;
}
.mis-left {width: 15%;float: left;
}
.mis-left img {width: 100%;
}
.mis-right {width: 82%;float: right;
}
.mis-right h3 {font-size: 1.25em; /*20px÷16px=1.25*/color: #7DDF6C;
}
.mis-right p {font-size: 0.875em;/*14px÷16px=0.875*/color: #000;line-height: 1.8em;margin: 12px 0 0 0;
}
/*--footer--*/
.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;
}
/*-- responsive media queries --*/
@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){/*当屏幕小于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){/*当屏幕小于768px时*/nav > ul li a {font-size: 1em;}.banner {min-height: 360px;/*限制banner的最小高度为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){/*当屏幕小于480px时*/.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;}.mis-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;}
}

图片包

链接：https://pan.baidu.com/s/1WVtZ0B3zp7MuhBHAfp_XDA
提取码：n0r5

第一个响应式网站之环保网站（源码+图片下载）相关推荐

Uigreat响应式1.5.1模板源码+WordPress下载站模板内核
正文: Uigreat响应式1.5.1模板源码+WordPress下载站模板内核,模板UI方面自无须多讲,作者还融进了一些自身喜爱的原素,比如:文艺范儿,简约,视觉效果等. 给个位站长可以用来做一个年 ...
期末学生HTML个人网页作业作品~蓝色的异清轩响应式个人博客模板源码~bootstrap响应式博客网站模板html...
HTML期末大作业~ 蓝色的异清轩响应式个人博客模板源码~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设 ...
期末学生HTML个人网页作业作品~蓝色的异清轩响应式个人博客模板源码~bootstrap响应式博客网站模板html
HTML期末大作业~ 蓝色的异清轩响应式个人博客模板源码~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还在为HTML网页设 ...
发卡源码php免签约,2021亲测响应式PHP个人自动发卡源码-AZ发卡网源码对接免签约易支付...
2021亲测响应式PHP个人自动发卡源码-AZ发卡网源码对接免签约易支付个人自动发开网源码在聚码屋以及分享过许多套,今天这套在诸多发卡系统中,个人感觉是不"如意"的,至少我不是 ...
php企业官网源码响应式,基于ThinkPHP5框架开发的响应式企业官网PHP源码_PC端+WAP手机端自适应+TP企业官网建站系统...
源码介绍基于ThinkPHP5框架开发的响应式企业官网PHP源码,是一款基于ThinkPHP5.0.10内核开发的企业建站管理系统,非常适合企业拿来二次开发自己的企业官网系统.前端界面采用流行的bo ...
html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
PHP响应式VIP电影影视系统源码带自动采集和会员管理系统
PHP响应式VIP电影影视系统源码带自动采集和会员管理系统,支持app打包,无加密无授权,目前最好的全自动采集VIP电影源码,包含三套模版后台自由选择+直播加入批量添加功能+后台管理电影+安全防御系 ...
利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
bootstrap自动生成html,利用Bootstrap快速搭建个人响应式主页（附演示+源码）-ATtuing...
1.前言我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...

第一个响应式网站之环保网站（源码+图片下载）

文章目录

效果图

桌面端：

移动端

代码和包

html代码

CSS代码

图片包

第一个响应式网站之环保网站（源码+图片下载）相关推荐

最新文章

热门文章