HTML+CSS+JS Environmental Protection web Design Final Course Big Homework web Front-End Development Technology web Course Design Webpage Planning and Design

1. πŸ‘¨‍πŸŽ“ website title

🌲 Environmental protection, 🌳 Earth protection, 🌴 Campus environmental protection, 🌡 Garbage sorting, 🚡🏼 Green home, etc. Design and production of websites.

2. ✍️ Website description

⭐ Summarizes the experience of some students in web page production: general web pages need to incorporate the following knowledge points: div+css layout, floating, positioning, advanced css, tables, forms and verification, js carousels, audio and video Flash applications, UL Li, drop-down navigation bar, mouse over effects and other knowledge points, the style and themes of the web page are also very comprehensive: such as hobbies, scene, campus, food, animation, games, coffee, music, hometown, movies, celebrities , shopping malls and personal homepages and other themes , students and novices can refer to the layout and design of the page below and the HTML source code (useful like β–³)

πŸ… A set of A+ web pages should include (specifically according to individual requirements)

  1. The page is divided into four parts: header, menu navigation bar (preferably drop-down), middle content section, and footer.
  2. All pages are hyperlinked to each other, and can go to the third-level page, which consists of 5-10 pages.
  3. The unified layout of page styles and styles is displayed normally, not messy, using Div+Css technology.
  4. The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
  5. There must be JS special effects, such as timing switching and manual switching of picture rotation.
  6. There are multimedia elements in the page, such as gif, video, music, the use of form technology. .
  7. The page is refreshing, beautiful, generous, and not the same. .
  8. It must not only be able to present the content required by users, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.

3. πŸ“š website introduction

πŸ“” Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has a stable display effect.

πŸ““Website programming: It is planned to use the latest web programming language HTML5+CSS3+JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers on the market, and the effect of seeing the website immediately after opening it has been achieved.

πŸ“˜Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.

πŸ“’Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;

πŸ“™Web page editing: The code of web works is simple, and you can use any HTML editing software (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ and other html editing software to run, modify, edit, etc.).
in:
(1) The πŸ“œhtml file contains: index.html is the home page, and other html are secondary pages;
(2) πŸ“‘ css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) πŸ“„ js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).

4. 🌐 Website Effect






5. πŸ”§ website code

🧱HTML structure code


<!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="w12">
<div class="daohang">




<div class="img"><img src="images/1.jpeg"></div>
 
<ul>
<li class="active"><a href="index.html">front page</a>

   
    <li ><a href="huanjingbaohu.html">environmental protection</a>
      

	 </li>
    <li ><a href="fazhanqianjing.html">Prospects</a>
      

	 </li>
    <li ><a href="xinxinggainian.html">new concept</a>
      

	 </li>
    <li ><a href="lishiyange.html">History</a>
      

	 </li>
    <li ><a href="fenxibaogao.html">analysis report</a>
      

	 </li>
    <li ><a href="zaochengyingxiang.html">make an impact</a>
      

	 </li>
    <li ><a href="juticuoshi.html">specific measure</a>
      

	 </li>
    <li ><a href="xiangguanjieri.html">related festivals</a>
      

	 </li>
    <li ><a href="xiangguanjigou.html">Related agencies</a>
      

	 </li>
    <li ><a href="jiazhiyiyi.html">value meaning</a>
      

	 </li>
    <li ><a href="falvzhichi.html">legal support</a>
      

	 </li>

</ul>





</div>
</div>
<div class="clear"></div>

<div  class="w12">
<div class="gg1">


<div class="img">
<img src="images/2.jpg"></div>
 

</div>
<div class="taitou">


<div class="title">environmental protection</div>

</div>
</div>
<div class="clear"></div>

<div  class="w5">
<div class="gg">




<ul>
<li>
<div class="img"><img src="images/2.jpg"></div>
</li>
<li>
<div class="img"><img src="images/3.jpg"></div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
</li>
<li>
<div class="img"><img src="images/5.jpg"></div>
</li>
 
</ul>

</div>
</div>

<div  class="w7">
<div class="huanjingbaohu">








<div class="text">
<div class="desc">
<div class="clear"></div>
environmental protection ( environmental protection),Abbreviated as environmental protection, it involves a wide range and strong comprehensiveness. It involves many fields of natural science and social science, as well as its unique research object. Environmental protection methods include: adopting administrative, legal, economic, scientific and technological, non-governmental spontaneous environmental protection organizations, etc., rational use of natural resources, prevention of environmental pollution and damage, in order to achieve a balanced and sustainable development of the natural environment, the human environment, and the economic environment. Expand the reproduction of useful resources and ensure the development of society.</div>
<div class="img"><img src="images/6.jpg"></div>

</div>
 










</div>
<div class="zaochengyingxiang">








<div class="text">
<div class="desc">
<div class="clear"></div>
Environmental cost, also known as environmental degradation cost, refers to the cost of reducing the quality of environmental service functions due to environmental pollution caused by economic activities. Environmental degradation costs are divided into environmental protection expenditures and environmental degradation costs. Environmental protection expenditures refer to the value actually paid to protect the environment, and environmental degradation costs refer to the value of environmental pollution losses and the value that should be paid for environmental protection. The natural environment mainly provides living space and ecological efficiency, and has the characteristics of long-term and repeated use, which is also similar to the use of fixed assets.</div>
<div class="img"><img src="images/7.jpg"></div>

</div>
 










</div>
</div>
<div class="clear"></div>

<div  class="w12">
<div class="tupianliebiao1">




<ul>
<li>
<div class="img"><img src="images/8.jpg"></div>
</li>
<li>
<div class="img"><img src="images/9.jpg"></div>
</li>
<li>
<div class="img"><img src="images/7.jpg"></div>
</li>
<li>
<div class="img"><img src="images/10.jpg"></div>
</li>
<li>
<div class="img"><img src="images/11.jpg"></div>
</li>
<li>
<div class="img"><img src="images/12.jpg"></div>
</li>
<li>
<div class="img"><img src="images/13.jpg"></div>
</li>
<li>
<div class="img"><img src="images/14.jpg"></div>
</li>
 
</ul>

</div>
</div>
<div class="clear"></div>

<div  class="w12">
<div class="dibu">

<div class="desc">
Copyright by so-and-so 
</div>


</div>
</div>
<div class="clear"></div></div></body></html>

πŸ’’CSS style code

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

.w12{width:1200px;margin:0 auto;}





.w5{width:500px;float:left;}


.gg ul
{
width:500px;}
.gg ul li{
width:230px;height:200px;float:left;
padding:10px;
text-align:center;
}
.gg ul li img
{
width:230px;height:200px;}







.w7{width:700px;float:left;}


.huanjingbaohu .text
{
width:700px;float:left;

margin-top:10px;
}

.huanjingbaohu .img
{
width:330px;padding:0px  5px;
float:left;
}
.huanjingbaohu  img
{
width:330px;}

.huanjingbaohu .desc
{
width:330px;float:left;

text-align:left;
padding:5px;
}





.zaochengyingxiang .text
{
width:700px;float:left;

margin-top:10px;
}

.zaochengyingxiang .img
{
width:330px;padding:0px  5px;
float:left;
}
.zaochengyingxiang  img
{
width:330px;}

.zaochengyingxiang .desc
{
width:330px;float:left;

text-align:left;
padding:5px;
}





.tupianliebiao1 ul
{float:left;
padding:10px;
text-align:center;
}
.tp ul li img
{
width:580px;height:500px;}







.falvzhichi
{
width:1200px;}
.falvzhichi .text
{

float:left;
margin-top:20px;
margin-bottom:20px;
}

.falvzhichi .img
{
width:580px;padding:0px  5px;
float:left;
}
.falvzhichi  img
{
width:580px;}

.falvzhichi .desc
{
width:580px;float:left;
text-align:left;padding:5px;
}







.tp1 ul
{
width:1200px;height:500px;}
.tp1 ul li{
width:580px;height:500px;float:left;
padding:10px;
text-align:center;
}
.tp1 ul li img
{
width:580px;height:500px;}










6. πŸ₯‡ How to make learning no longer blind

Many novice programmers who have just started programming have learned the basic grammar, but they don’t know the purpose of the grammar, how to deepen the image, and how to improve themselves. At this time, it is very important to brush some questions on your own every day. Go to the beginner programming training on Niuke.com. This topic is programming entry level, suitable for beginners who have just learned grammar. The topics involve basic programming grammar, basic structure, etc. Each question has a practice mode and an exam mode, which can be restored to the exam mode for simulation, or through the practice mode. Practice .

7. 🎁More dry goods

1. If my blog is helpful to you, if you like the content of my blog, please "πŸ‘ Like" "✍️ Comment" "πŸ’™ Favorites" with one click!

two πŸ’— [ πŸ‘‡ 🏻 πŸ‘‡ 🏻 πŸ‘‡ 🏻 follow me | get more source code | high quality articles] take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as the whole station template, college students' Graduation HTML template, final homework template, and so on! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other!"!

3.

Technical related questions about the above contentπŸ’ŒWelcome to exchange and learn togetherπŸ‘‡πŸ»πŸ‘‡πŸ»πŸ‘‡πŸ»πŸ”₯

!

πŸ’‚[How to get]

gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app

Tags: Front-end html css

Posted by robembra on Fri, 09 Sep 2022 21:16:06 +0300