️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业: 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式:【HTML七夕情人节表白网页制作 (110套) 】
网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2) css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
G19JP 环保保护环境 页面4个
DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
head>
<body>
<div class="main" >
<div class="content12">
<div class="daohang">
<ul>
<li class="active"><a href="index.html">首页a>
li>
<li ><a href="jieshao.html">介绍a>li>
<li ><a href="zhuyaoneirong.html">主要内容a>li>
<li ><a href="huanbaomingyan.html">环保名言a>li>
ul>
div>
div>
<div class="clear">div>
<div class="content12">
<div class="guanggaotupian">
<div class="img">
<img src="images/1.jpg">div>
div>
div>
<div class="clear">div>
<div class="content12">
<div class="taitou">
<div class="title">
<div class="line">div>
<div class="stitle">
<div class="sstitle">
<div class="h2">主要内容div>
<span>ZHUYAONEIRONGspan>
div>
div>
div>
div>
<div class="zynr">
<ul>
<li>
<div class="img"><img src="images/2.jpg">div>
<div class="text">
<div class="title">防止污染div>
<div class="clear">div>
<div class="desc">防止由生产和生活活动引起的环境污染、化学污染,包括防治工业生产排放的废水、废气、废渣、粉尘、放射性物质以及产生的噪声、振动、恶臭和电磁微波辐射,交通运输活动产生的有害气体、液体、噪声,海上船舶运输排出的污染物,工农业生产和人民生活使用的有毒有害化学品,城镇生活排放的烟尘、污水和垃圾等造成的污染。div>
div>
li>
<li>
<div class="img"><img src="images/3.jpg">div>
<div class="text">
<div class="title">防止破坏div>
<div class="clear">div>
<div class="desc">防止由建设和开发活动引起的环境破坏,包括防止由大型水利工程、公路干线、大型港口码头、机场和大型工业项目等工程建设对环境造成的污染和破坏,农垦和围湖造田活动、海上油田、海岸带和沼泽地的开发、森林和矿产资源的开发对环境的破坏和影响,新工业区、新城镇的设置和建设等对环境的破坏和污染。div>
div>
li>
ul>
div>
div>
<div class="clear">div>
<div class="content12">
<div class="taitou">
<div class="title">
<div class="line">div>
<div class="stitle">
<div class="sstitle">
<div class="h2">环保名言div>
<span>HUANBAOMINGYANspan>
div>
div>
div>
div>
<div class="hbmy">
<div class="list">
<img src="images/4.jpg" class="img">
<img src="images/5.jpg" class="img">
div>
<div class="desc">
<br><br>手下留情,足下留青,爱护环境,人人有责。<br><br>植树造林,功在千秋。<br><br>爱祖国,护绿化,保清洁,爱家园。<br><br>保持地球生态平衡,就是保护人类自身。<br><br>人人为环保,环保为人人。<br><br>人人关心环境质量,人人参与环境保护。<br><br>珍惜资源,永续利用。<br><br>保护环境光荣,污染环境可耻。<br><br>依靠科技进步,促进环境保护。<br><br>提高环境意识,保护美好家园。div>
div>
div>
<div class="clear">div>
<div class="content12">
<div class="taitou">
<div class="title">
<div class="line">div>
<div class="stitle">
<div class="sstitle">
<div class="h2">介绍div>
<span>JIESHAOspan>
div>
div>
div>
div>
<div class="js">
<div class="text">
<div class="list">
<img src="images/6.jpg" class="img" >
div>
环境保护就是指人类为解决现实或潜在的环境问题,协调人类与环境的关系,保障经济社会的持续发展而采取的各种行动的总称。<br><br>其方法和手段有工程技术、行政管理、也有法、经济、宣传教育……<br><br>保护环境是人类有意识地保护自然资源并使其得到合理的利用,防止自然环境受到污染和破坏;对受到污染和破坏的环境做好综合的治理,以创造出适合于人类生活、工作的环境,协调人与自然的关系,让人们做到与自然和谐相处的概念。
div>
<div class="clear">div>
<div class="slist">
<img src="images/7.jpg" class="simg" >
div>
div>
div>
<div class="clear">div>
<div class="content12">
<div class="dibu">
<div class="desc">
保护环境
div>
div>
div>
<div class="clear">div>div>body>html>
@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}
.content12{width:1200px;margin:0 auto;}
.daohang ul{
width:1200px;background:#660066;float:left;
}
.daohang ul li{float:left;
width:100px;padding:10px 0px; text-align:center;height:40px;line-height:40px;color:#ffffff;position: relative; }
.daohang ul li a{
color:#fff;}
.daohang li:hover a{
color:#fff;}
.daohang ul li.active{
}
.guanggaotupian
{
text-align:center;
}
.dibu .desc
{
text-align:center;color:#ffffff;
background:#660066;padding:20px 0px;
margin-top:10px;
}
.dibu img
{
}
.jieshao
{
width:1200px;}
.jieshao .text
{
float:left;
margin-top:20px;
margin-bottom:20px;
}
.jieshao .img
{
width:580px;padding:0px 5px;
float:left;
}
.jieshao img
{
width:580px;height:410px;}
.jieshao .slist
{
text-align:center;
}
.jieshao .simg
{
height:400px;width:1160px;margin:10px;
float:left;
}
.jieshao .desc
{
width:580px;height:400px;overflow:hidden;float:left;
text-align:left;padding:5px;
}
.zhuyaoneirongliebiao ul
{
width:1200px;
}
.zhuyaoneirongliebiao ul li
{
width:1180px;padding:10px;
float:left;
}
.zhuyaoneirongliebiao .active
{
background:#660066;}
.zhuyaoneirongliebiao .active .title
{
color:#ffffff;
}
.zhuyaoneirongliebiao .active .desc
{
color:#ffffff;
}
.zhuyaoneirongliebiao ul li img
{
width:344px;padding:5px;
height:200px;float:left;
}
.zhuyaoneirongliebiao ul li .title{margin:10px 0px;
font-weight:bold;
font-size:16px;
}
.zhuyaoneirongliebiao ul li .desc
{
width:796px;text-align:left;float:left;
padding:5px;
margin-left:20px;
}
.zhuyaoneirongliebiao ul li button
{
display:block;
text-align:left;
padding:5px 10px;
margin-top:20px;
}
.huanbaomingyan
{
width:1200px; text-align: justify;
}
.huanbaomingyan .text
{
padding:10px;
}
.huanbaomingyan .img
{
text-align:center;
}
.huanbaomingyan .desc
{
padding:10px;
text-align:left;
float:left;
text-align: justify;
}
.huanbaomingyan .list
{
text-align:center;
}
.huanbaomingyan .img
{
width:1050px;margin:5px auto;
}
1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏”
一键三连哦!
2.【关注我| 获取更多源码】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习