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

HTML制作简单交互网页相关推荐

php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
使用html和css制作简单的网页
使用html和css制作简单的网页创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
HTML+CSS+Javascript制作简单版网页时钟
HTML+CSS+Javascript制作简单版网页时钟 <!DOCTYPE html> <html><head><meta charset="ut ...
用html编写一个诗歌的网页,试验2用HTML语言制作简单的网页.doc
<计算机网络B>实验指导书实验三网页制作测绘工程学院实验三网页制作一.实验目的 1.简单了解HTML语言. 2.认识网页以及网页的结构. 3.掌握用HTML语言制作简单网页的方 ...
Web入门(1)——制作简单的网页
文章目录安装基础软件设计网站外观做出计划绘制草图选定内容文本主题颜色图像字体处理文件网站应保存在何处? 关于大小写和空格的提示网站应该使用什么结构? 文件路径安装基础软件计 ...
学生汽车网页设计作品静态HTML网页模板源码大学生汽车网站制作简单汽车网页设计成品
学生奥迪汽车静态网页设计作品作品介绍作品截图网页代码作品地址作品介绍本网页设计期末大作业成品使用DIV CSS布局制作,题材为奥迪概念车.顶部LOGO区及首页的汽车区使用 CSS3动画属性 ...
用JavaScript制作简单的网页计算器
一.题目利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> ...
html制作简单框架网页实现自己的音乐驿站操作步骤及源文件下载（播放功能限mp3文件）
使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用还有一个特点, ...
html制作简单框架网页实现自己的音乐驿站操作步骤及源文件下载（播放功能限mp3文件）...
使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用还有一个特点, ...

HTML制作简单交互网页

HTML部分：

CSS部分：

HTML制作简单交互网页相关推荐

最新文章

热门文章