响应式之绿色环保

最新推荐文章于 2024-09-20 11:33:58 发布

Volcano_WQL

最新推荐文章于 2024-09-20 11:33:58 发布

阅读量3.5k

点赞数 13

文章标签： html css3

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/105708659

版权

简介：使用响应式web设计一个绿色环保栏

知识储备：

	1.视口属性的配置：
				在`<head>`中的`<meta>`标签中配置视口属性
				the![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423152217729.png)
				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 >&copy;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;
    }
}

最终效果如下：
全屏效果
在这里插入图片描述
改变视口大小后:出现汉堡菜单