HTML制作简单交互网页

今天我们要做的事一个简单的交互式网页，主要用的是设置百分比宽度以及媒体查询器。先看一下效果：


这里我们就以第一个代码为例。

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;}
}