今天我们要做的事一个简单的交互式网页,主要用的是设置百分比宽度以及媒体查询器。先看一下效果:
这里我们就以第一个代码为例。
HTML部分:
这里主要有4个div,然后分别存放顶部导航栏、中间的图片和文字,以及底部的导航。导航是使用nav标记,中间的布局用的是div标记实现的。
导航:
<div id="nav">
<div id="list">
<div id="logo">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div id="nav2">
<nav>
<a href="#">首页</a>
<a href="#">全球方案</a>
<a href="#">解决方案</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
</div>
</div>
</div>
content:
<!-- banner图 -->
<div id="banner">
<div id="box1"></div>
<div id="box2">
<div id="text1">爱护需要行动</div>
<div id="text2">
爱护森林吧!行动起来吧!滥砍乱伐森林是人类的愚蠢行为。再不要做这种危害子孙后代的事了。
我们一定要保护好现有的深林资源!谨防森林火灾再次发生!
</div>
<div id="text3">
<button type="button">了解更多>></button>
</div>
</div>
<img src="1.jpg" style="width: 100%;">
</div>
<!-- content -->
<div id="content">
<br><h2>我们的使命</h2>
<div id="content1">
<img src="2.png" style="width: 100%;">
</div>
<div id="content2">
<div>
<b>治理污染</b><br><br>
将环境保护纳入国民经济与社会发展计划和年度计划。在经济发展中防治环境污染和生态破坏。
</div>
<div>
<b>垃圾分类</b><br><br>
关心垃堤分类。特别是可器收垃墙。进行固收再生,减少对森林树木的采集砍伐
</div>
<div>
<b>节能低碳</b><br><br>
开始低硬生活吧。节能减0,减少对资源的消费,并还自己-片蓝天!
</div>
</div>
</div>
footer :
<div id="footer">
<center>@2016 items All Right Reserved | Design by 传智播客</center>
</div>
CSS部分:
这里只设置了一些简单的样式,唯一需要注意的是这里用到了媒体查询器。
#nav{
width: 100%;
height: 10%;
background-color: #006400;
}
#logo{
margin-left: 5%;
font-size: 25px;
color: white;
display: none;
}
#list a{
font-size: 20px;
color: white;
text-decoration: none;
margin: 50px;
line-height: 50px;
}
#banner{
width: 100%;
background-color:lightyellow ;}
#box1,#box2{
position: absolute;
top:50%;
left: 70%;
width: 20%;
height: 30%;
border-radius: 10px;
}
#box1{
background-color: #FFFFFF;
filter: opacity(0.5);
}
#box2 div{margin: 5%;}
#text1{
color:green;
font-size: 20px;
font-weight: bold;
}
#text3 button{
background-color: green;
border: green 1px solid;
color: white;
}
#content{
width: 100%;
background-color:lightyellow ;
}
h2{
color: green;
text-align: center;
}
#content1{
width: 40%;
padding-left: 5%;
}
#content2{width: 45%;}
#content1,#content2{display: inline-block;}
#content2 div{margin: 12%;}
#footer{
width: 100%;
background-color: #006400;
color: white;
line-height: 50px;
}
媒体查询器的代码:
这里主要是设置了当屏幕尺寸小于600px时,清楚网页中存放的图片和文字的div的浮动,隐藏顶部导航栏的同时显示汉堡菜单的按钮。
@media screen and (max-width:600px){
#content1,#content2{
display:block;
width: 100%;
padding: 0;
}
#content2{
margin: 0;
padding: 0;
padding-bottom: 1%;
}
#box1,#box2{
position: absolute;
top: 20%;
left: 40%;
width: 50%;
height: 30%;
}
#nav2{display: none;}
#logo{display: block;}
}
更多推荐
HTML制作简单交互网页
发布评论