HTML final assignment ~ small yellow car ofo environmental protection ~ student web design assignment source code (HTML + CSS)

qq365392777 2021-08-09 15:07:09 阅读数:340

本文一共[544]字,预计阅读时长:1分钟~
html final assignment small yellow
HTML Final homework ~ Yellow car ofo Environmental protection ~ Student web design homework source code (HTML+CSS)

Towards the end of the term , You're still working on HTML Web design homework , The teacher's homework requirements are big ?HTML There is no way to start web homework ? The total number of pages required is too much ? No suitable template ? And so on and so forth . The problem you want to solve , In this blog post, you can basically meet your needs ~

original HTML+CSS+JS Page design , web College students web design homework source code , This is a good web page making , Smart picture , Very suitable for beginners to learn to use .

Introduction to works

1. Introduction to web works :HTML Web design homework for college students at the end of the term , You can download what you like , The article page supports mobile phones PC Responsive layout . There are mainly : home page , memorabilia , Historical development , About us , Sign in Wait a total 5 A page html download .

2. Web work editing : This work is the subject matter of students' personal home page design , The code is simple student level html+css Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. The layout of web works : The overall layout of the web page is LOGO、 Navigation 、 Main content layout . There are many layouts of sub pages , Interest content uses picture list layout , The score page inserts a table , Contact us to set the left alignment using the image alignment .

4. Technical aspects of web works : Use CSS Made a background picture of the web page 、 Color change effect of mouse passing and selected navigation 、 Underline, etc . The home page has made a message form , At the same time, it is easy to use JavaScript Made a form to judge ( The form cannot be empty when submitting )

 

 

One 、 Demonstration of works

1. home page

 Insert picture description here

2. memorabilia

 Insert picture description here

3. Historical development

 Insert picture description here

4. About us

 Insert picture description here

5. Sign in

 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" />
<title>ofo</title>
</head>
<body>
<embed src="music/music.mp3" width="0" height="0"></embed>
<div class="con">
<div class="head">
<div class="logo">
<h1>ofo Xiao Huang bicycle </h1>
</div>
<div class="nav">
<ul>
<li>
<a href="index.htm"> home page </a></li>
<li>
<a href="page1.htm"> memorabilia </a>
</li>
<li><a href="page2.htm"> Historical development </a></li>
<li><a href="page3.htm"> About us </a></li>
<li><a href="dl.htm"> Sign in </a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="lunbo"><a href="#"><img src="images/d1.jpg" width="1024"/></a></div>
<div class="clear"></div>
<div class="main">
<dl>
<dd>
<h1> Yellow car </h1>
</dd>
<dt>&nbsp; </dt>
</dl>
<div label-module="lemmaSummary">
<div label-module="para">
<div label-module="para">ofo Xiaohuang car is a platform for sharing bicycles without piles , Created &ldquo; No pile bike sharing &rdquo; Pattern , Committed to solving the problem of urban travel . Users only need to enter the wechat service number or App Enter the license plate number , You can get the password to unlock the car , Take it and use it , Whenever and wherever possible , You can also share your bike to ofo Sharing platform , Get all ofo The lifetime free use right of Xiaohuang car , With 1 in N.[1-2]<a name="ref_[1-2]_20068457" id="ref_[1-2]_20068457"> </a></div>
<div label-module="para">2015 year 6 Since the start of the month ,ofo More than... Have been connected 500 10000 shared bicycles , Provide hundreds of millions of shared bicycle travel services , For the world 4 A country 100 This city provides users with convenient travel services [3-4]<a name="ref_[3-4]_20068457" id="ref_[3-4]_20068457"> </a></div>
<div label-module="para">ofo The idea is ,&ldquo; Easier to ride &rdquo;. some time ofo I hope not to produce bicycles , Only connect bicycles , So that people can pass... In every corner of the world ofo Unlock the bike , Meet the needs of short distance transportation .[5]<a name="ref_[5]_20068457" id="ref_[5]_20068457"> </a></div>
<div label-module="para">ofo Also in the spirit of open platform and sharing , Users are welcome to share their bikes and join ofo, Mobilize the Urban Bicycle stock market with the Internet innovation mode of sharing economy , Improve bicycle efficiency , Save more space for the city .ofo Advocate civilized car use , Guide users to standardize the use of... Through technical means ofo Shared bicycle , Work with citizens and the government to optimize and share bicycle travel solutions , Make the city better .</div>
</div>
</div>
<h2> Yellow car </h2>
<div class="main_list">
<ul>
<li><a href="#"><img src="images/q1.jpg" /></a></li>
<li><a href="#"><img src="images/q2.jpg" /></a></li>
<li><a href="#"><img src="images/q3.jpg" /></a></li>
<li><a href="#"><img src="images/q4.jpg" /></a></li>
<li><a href="#"><img src="images/q5.jpg" /></a></li>
<li><a href="#"><img src="images/q6.jpg" /></a></li>
<li><a href="#"><img src="images/q7.jpg" /></a></li>
<li><a href="#"><img src="images/q8.jpg" /></a></li>
<li><a href="#"><img src="images/q9.jpg" /></a></li>
<li><a href="#"><img src="images/q10.jpg" /></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<p> Yellow car </p>
<p>All Rights Reserved</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.

Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web front end Zero basis - Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... and 、 The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduates HTML Templates 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , Can pay attention to ↓ Male Z Number Get more source code !

 Insert picture description here

 

版权声明:本文为[qq365392777]所创,转载请带上原文链接,感谢。 https://car.inotgo.com/2021/08/20210809150450630N.html