HTML网页设计制作 dreamweaver网页源代码 垃圾分类环保主题网站制作

️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业: 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式:【HTML七夕情人节表白网页制作 (110套) 】


文章目录

  • 二、网站介绍
  • 三、网站效果
    • ▶️1.视频演示
    • 2.图片演示
  • 四、 网站代码
    • HTML结构代码
    • CSS样式代码
  • 五、更多源码


二、网站介绍

网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面:计划采用最新的网页编程语言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代码)。


三、网站效果

▶️1.视频演示

G19JP 环保保护环境 页面4个

2.图片演示



HTML网页设计制作 dreamweaver网页源代码 垃圾分类环保主题网站制作_第1张图片


四、 网站代码

HTML结构代码



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>


CSS样式代码



@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模板 、等!

以上内容技术相关问题欢迎一起交流学习

你可能感兴趣的:(网页设计,dreamweaver,web课程与设计,web前端,web前端期末大作业)