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)
- The page is divided into four parts: header, menu navigation bar (preferably drop-down), middle content section, and footer.
- All pages are hyperlinked to each other, and can go to the third-level page, which consists of 5-10 pages.
- The unified layout of page styles and styles is displayed normally, not messy, using Div+Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture rotation.
- There are multimedia elements in the page, such as gif, video, music, the use of form technology. .
- The page is refreshing, beautiful, generous, and not the same. .
- 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.
!
π[How to get]
gitee code cloud source code warehouse - welcome to Star: https://gitee.com/zhanyuqiu2022/my-app