Freshman WEB front-end static web pages—design and implementation of environmentally friendly web pages

⛵Get the source code and contact at the end of the article✈

Web front-end development technology
description of web design theme, DIV+CSS layout production, HTML+CSS web design final course assignment | Environmental protection | Earth protection | Campus environmental protection | Garbage classification | Green home | design work

  1. HTML: structure

  2. CSS: style
    In terms of operation, html5 and css3 are used, and
    basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are adopted

  3. JavaScript: do interactive behavior with the user


Front-end learning route

(1) html file: where index.html is the home page, and other html is the second-level page;
(2) css file: all css page styles, text scrolling, image zoom, etc.;
(3) js file: js realizes dynamic carousel special effects , form submission, click event, etc. (js code is used in web pages)

Basic structure of web page

(1) Homepage: The first page you see when you enter the webpage (LOGO, company name, navigation, banner, news, related information, bottom information, banner is generally 5) (2) Secondary page: After clicking to enter from the  
homepage The page is called the second-level page
(3) Third-level page: the page clicked from the second-level page

Web page html : A web page is the basic element of a website and a platform for carrying various website applications.
In layman's terms, a website is a home page composed of web pages : the home page is the entry
page of a website, so it is often edited to make it easy to understand . The top or side area, also known as the navigation bar, plays the role of linking various pages in the site or software.
Web page footer : It is the area at the bottom of each page in the web page. Often used to display additional information. Such as author, record number, etc.


web demo

insert image description here
insert image description here
insert image description here
insert image description here
insert image description here

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="content12">
<div class="guanggaotupian">


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

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

<div  class="content12">
<div class="daohang">




<div class="img"><img src="images/2.jpg"></div>
 
<ul>
<li class="active"><a href="index.html">首页</a>

   
    <li ><a href="zhidujieshao.html">制度介绍</a>
      

	 </li>
    <li ><a href="fazhanlicheng.html">发展历程</a>
      

	 </li>
    <li ><a href="zhidaosixiang.html">指导思想</a>
      

	 </li>
    <li ><a href="zucheng.html">组成</a>
      

	 </li>
    <li ><a href="jianlitujing.html">建立途径</a>
      

	 </li>
    <li ><a href="liuyanfangshi.html">留言方式</a>
      

	 </li>
    <li ><a href="zhucedenglu.html">注册登录</a>
      

	 </li>

</ul>





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

<div  class="content12">
<div class="taitou">


<div class="title">发展历程</div>

</div>
<div class="fzlc">











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

<div class="desc">
<br><br>对于中国经济发展过程中,尤其是在生产活动中存在的巨大浪费现象,党中央、国务院一直高度重视。早在1995年召开的党的十四届三中全会上,就提出了实现“经济增长方式”和“经济体制”两个根本性转变的战略要求。2003年10月,党的十六届三中全会在京召开,这次全会明确提出了“坚持以人为本,树立全面、协调、可持续的发展观”的科学发展观的要求。</div>




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





 










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

<div  class="content12">
<div class="taitou">


<div class="title">指导思想</div>

</div>
<div class="zdsx">






















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

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

<div class="title">指导思想</div>

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


<div class="desc">
<br><br>以邓小平理论和“三个代表”重要思想为指导,认真贯彻党的十六大和十六届三中、四中全会精神,树立和落实以人为本、全面协调可持续的科学发展观,坚持资源开发与节约并重,把节约放在首位的方针,紧紧围绕实现经济增长方式的根本性转变,<br><br>以提高资源利用效率为核心,以节能、节水、节材、节地、资源综合利用和发展循环经济为重点,加快结构调整,推进技术进步,加强法制建设,完善政策措施,强化节约意识,尽快建立</div>



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

<div class="list">
<img src="images/6.jpg" class="simg">
<img src="images/7.jpg" class="simg">
<img src="images/8.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>


The more you learn, the more confused you become

It's normal to feel this way, because you haven't really been in the company, and you don't know how much you need to learn to be competent for the work assigned to you in the company. I can see from your statement that your foundation should still be very solid. There is definitely no problem following the full set of video tutorials on the Internet.

When you actually enter the company in the future and find that the difficulty and amount of work are only about 20% of your study period, you may sigh: So the work is nothing more than that.

This is normal, because most companies recruit you to work and write business, not to let you be a newcomer to develop the company structure. They are all ready-made things, what you have to do is to add bricks and tiles under the guidance of others and direct them hand in hand. At that time, I am afraid you will exclaim: This is it?

So, relax and enjoy your college time
—————————————————


learn more

Follow me | Like blog posts | Take you to increase your knowledge every day


insert image description here

Guess you like

Origin blog.csdn.net/m0_65484028/article/details/127873883