HTML5 final assignment: environmental protection website design - environmental protection - environmental equipment (5 pages) HTML+CSS+JavaScript environmental protection and environmental optimization
Common web design topics include individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers, gifts Car, other web design topics, A + level homework, can meet the web design needs of College Students' Web homework, and those who like can be downloaded!
Introduction to works
1. Introduction to web works: HTML final college students' web design homework A + level, you can download what you like, and the article page supports mobile PC responsive layout.
2. Web page work editing: after downloading the work, you can use any HTML editing software (such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +, etc.) to edit and modify the web page.
3. Web work technology: Div+CSS, mouse over effect, Table, navigation bar effect, banner, form, secondary and tertiary pages, video, audio elements, Flash, logo (source file) is designed, and the knowledge points required for basic final homework are fully covered.
1, Work display
2, File directory
3, Code implementation
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>XX environmental protection equipment Co., Ltd</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="alternate icon" type="image/png" href="images/favicon.png">
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/default.min.css" />
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/handlebars.min.js"></script>
<script type="text/javascript" src="js/iscroll-probe.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/jquery.raty.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</head>
<body>
<header>
<div class="header-top">
<div class="width-center">
<div class="header-logo "><img src="picture/logo.png" alt=""></div>
<div class="header-title div-inline">
<strong>XXX Environmental Protection Equipment Co., Ltd</strong>
<span>XXXHUANBAOSHEBEIYOUXIANGONGSI</span>
</div>
<div class="header-right">
<span>National consultation hotline</span>
<span>00-000-00000000</span>
</div>
</div>
</div>
<div class="header-nav">
<button class="am-show-sm-only am-collapsed font f-btn" data-am-collapse="{target: '.header-nav'}">Menu <i
class="am-icon-bars"></i></button>
<nav>
<ul class="header-nav-ul am-collapse am-in">
<li class="on"><a href="index.html" name="index">Website home page</a></li>
<li><a href="about.html" name="about">About us</a></li>
<li><a href="productlist.html" name="show">Engineering case</a></li>
<li><a href="article_list.html" name="new">News information</a></li>
<li><a href="contact.html" name="message">contact us</a>
<div class="secondary-menu">
<ul><li><a href="message.html" class="message"></a></li></ul>
</div>
</li>
</ul>
</nav>
</div>
</header>
<div class="am-slider am-slider-default" data-am-flexslider="{playAfterPaused: 8000 , controlNav: false, directionNav: false }">
<div class="search-box">
<div><input type="text" name="" placeholder=" Please enter the environmental protection category you need"></div>
<div class="search-box-btn"></div>
</div>
<ul class="am-slides">
<li><img src="picture/banner.jpg" alt="" ></li>
<li><img src="picture/banner.jpg" alt="" ></li>
<li><img src="picture/banner.jpg" alt="" ></li>
<li><img src="picture/banner.jpg" alt="" ></li>
</ul>
</div><div class="copyrights">Collect from <a href="/" >Web page template</a></div>
<main>
<div class="index-only-small">
<ul>
<li><a href="about.html"><span></span><p>About us</p></a></li>
<li><a href="productlist.html"><span></span><p>Engineering case</p></a></li>
<li><a href="article_list.html"><span></span><p>News information</p></a></li>
<li><a href="contact.html"><span></span><p>contact us</p></a></li>
</ul>
</div>
<div class="index-main-title">
<p>About us</p>
<span>Provide relevant treatment and purification equipment for environmental problems manufactured by major heavy industrial plants</span>
</div>
<div class="index-main-body">
<ul>
<li><img src="picture/main1.jpg"><p>Industrial waste gas purification</p></li>
<li><img src="picture/main2.jpg"><p>Organic waste gas purification</p></li>
<li><img src="picture/main3.jpg"><p>Dust purification</p></li>
</ul>
<p>Our main products are mainly industrial waste gas treatment. Our products include: purification equipment, waste gas purification equipment, acid waste gas purifier, organic waste gas purifier, dry waste gas purification equipment, wet waste gas purification equipment, etc. It also produces noise control,
HVAC equipment, electroplating tank, water tank, exhaust purification equipment, air supply equipment, etc. Produced by our company WGF-3 Acid waste gas purifier and its application with type composite adsorbent DBS The adsorbent was awarded the best technical type by the National Environmental Protection Bureau...</p>
<a>Learn more</a>
</div>
<div class="index-sm-banner">
<img src="picture/smbanner.jpg">
<p>
XX Environmental protection equipment company is an environmental protection company specializing in environmental pollution control and ecological environment restoration, integrating technology development, technical services, environmental protection equipment manufacturing, general contracting and comprehensive utilization of resources. Its main products are industrial waste gas treatment, waste water treatment, solid waste and soil remediation. Our products include purification equipment, waste gas purification equipment, Acid waste gas purifier, organic waste gas purifier, dry waste gas purification equipment, wet waste gas purification equipment, etc. It also produces noise control, HVAC equipment and electroplating tank, water tank, exhaust purification equipment, air supply equipment, etc. Produced by our company WGF-3 Acid waste gas purifier and its application with type composite adsorbent DBS The adsorbent won the best use technology award of the National Environmental Protection Bureau.
</p>
<span></span>
</div>
<div class="index-main-bottom">
<p>Engineering case</p>
<span>Provide relevant treatment and purification equipment for environmental problems manufactured by major heavy industrial plants</span>
</div>
<div class="project-case">
<div>
<a href="article_list_content.html">
<img src="picture/smcase1.jpg">
<div class="projec-case-right">
<h6>Hunan waste gas purification and treatment project</h6>
<p>Hunan gold Chemical Co., Ltd. is a professional enterprise engaged in the R & D, production and sales of acid dyes. We provide a systematic overall solution for gold Chemical Co., Ltd. to centrally treat the wastewater of acid dye mother liquor, with a daily treatment of 100 tons. Recover aniline from wastewater to realize resource utilization; The qualified wastewater meets the reuse requirements and realizes zero discharge. </p>
</div>
</a>
</div>
<div>
<a href="article_list_content.html">
<img src="picture/smcase2.jpg">
<div class="projec-case-right">
<h6>Yichang solid waste treatment project</h6>
<p>Yichang Chemical Co., Ltd. is a professional enterprise engaged in the R & D, production and sales of acid dyes. We provide a systematic overall solution for gold Chemical Co., Ltd. to centrally treat the wastewater of acid dye mother liquor, with a daily treatment of 100 tons. Recover aniline from wastewater to realize resource utilization; The qualified wastewater meets the reuse requirements and realizes zero discharge. </p>
</div>
</a>
</div>
<div>
<a href="article_list_content.html">
<img src="picture/smcase3.jpg">
<div class="projec-case-right">
<h6>Jiangxi contaminated soil remediation project</h6>
<p>Jiangxi Chemical Co., Ltd. is a professional enterprise engaged in the R & D, production and sales of acid dyes. We provide a systematic overall solution for gold Chemical Co., Ltd. to centrally treat the wastewater of acid dye mother liquor, with a daily treatment of 100 tons. Recover aniline from wastewater to realize resource utilization; The qualified wastewater meets the reuse requirements and realizes zero discharge. </p>
</div>
</a>
</div>
</div>
</main>
<div class="feature">
<img class="big" src="picture/main4.jpg">
<img class="sm" src="picture/main5.jpg">
</div>
<main>
<div class="index-main-hg-title">
<p>Engineering case</p>
<span>Provide relevant treatment and purification equipment for environmental problems manufactured by major heavy industrial plants</span>
</div>
<div class="index-main-body">
<ul>
<li><img src="picture/smcase1.jpg"><p>Hunan waste gas purification and treatment project</p><span>Protecting the environment is to protect our home</span><a href="productlist.html">MORE</a></li>
<li><img src="picture/smcase2.jpg"><p>Yichang solid waste treatment project</p><span>Protecting the environment is to protect our home</span><a href="productlist.html">MORE</a></li>
<li><img src="picture/smcase3.jpg"><p>Jiangxi contaminated soil remediation project</p><span>Protecting the environment is to protect our home</span><a href="productlist.html">MORE</a></li>
</ul>
</div>
<div class="news-info">
<h2>News information</h2>
<div>
<ul>
<li class="news-left"><img src="picture/smcase4.jpg"><div><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><span>After the residents' waste treatment fee and sewage charge, provinces and cities across the country will successively announce similar measures, and the sewage charge such as sulfur dioxide will be included in the collection scope of environmental tax in the future</span><a href="article_list.html">MORE</a></div></li>
<li><img src="picture/smcase5.jpg"><div><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><span>After the residents' waste treatment fee and sewage charge, provinces and cities across the country will successively announce similar measures, and the sewage charge such as sulfur dioxide will be included in the collection scope of environmental tax in the future</span><a href="article_list.html">MORE</a></div></li>
<li><img src="picture/smcase6.jpg"><div><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><span>After the residents' waste treatment fee and sewage charge, provinces and cities across the country will successively announce similar measures, and the sewage charge such as sulfur dioxide will be included in the collection scope of environmental tax in the future</span><a href="article_list.html">MORE</a></div></li>
<li><img src="picture/smcase7.jpg"><div><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><span>After the residents' waste treatment fee and sewage charge, provinces and cities across the country will successively announce similar measures, and the sewage charge such as sulfur dioxide will be included in the collection scope of environmental tax in the future</span><a href="article_list.html">MORE</a></div></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
<div class="news-dynamic">
<h2>news information</h2>
<ul>
<li><a href="article_list_content.html"><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><i class="font"></i><span>2017/06/01</span></a></li>
<li><a href="article_list_content.html"><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><i class="font"></i><span>2017/06/01</span></a></li>
<li><a href="article_list_content.html"><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><i class="font"></i><span>2017/06/01</span></a></li>
<li><a href="article_list_content.html"><p>Garbage disposal fees and sewage charges will be greatly increased throughout the country</p><i class="font"></i><span>2017/06/01</span></a></li>
</ul>
</div>
</main>
<footer class="footer">
<div class="footer-pc">
<ul>
<li><p>Website home page | About us | Engineering case | News information | contact us</p></li>
<li><p>Address: Daye City, Hubei Province XXX Avenue XXX office</p></li>
<li><P>Telephone: XXX</P></li>
<li><p>Post code: 435100</p></li>
</ul>
<img src="picture/qccode.png" alt="">
</div>
<div class="footer-phone">
<button data-am-smooth-scroll class="am-btn am-btn-success">Top<i class="font"></i></button>
</div>
</footer>
</body>
</html>
4, Get more source code
~Pay attention to me and praise the blog ~ bring you up knowledge every day!
Relevant issues can be learned from each other. You can pay attention to ↓ public Z to get more source code!
5, Learning materials
A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites
6, More source code
HTML5 final assessment homework source code * includes individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers Gifts, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!
