第一个响应式网站之环保网站（源码+图片下载）
生活随笔
收集整理的這篇文章主要介紹了
第一个响应式网站之环保网站（源码+图片下载）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 效果圖
- 桌面端：
- 移動端
- 代碼和包
- html代碼
- CSS代碼
- 圖片包
效果圖
桌面端：
移動端
代碼和包
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="images/menu.png"/></label></nav><div class="logo"><a href="index.html"><img src="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="images/mission_img.jpg" alt=""/></div><div class="mission_div mission-right"><div class="mis-one"><div class="mis-left"><img src="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="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="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> © 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
總結
以上是生活随笔為你收集整理的第一个响应式网站之环保网站（源码+图片下载）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 保姆级解读！CSS属性transform
- 下一篇： 用HTML和CSS实现一个漂亮的个人博客