HTML5 final assignment: About Hotel theme website design - advanced hotel apartment web page (4 pages) HTML+CSS+JavaScript final assignment HTML code student web page course design final assignment Download Web page design and production finished products
1. Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? Can't you start HTML web page homework? The total number of pages required is too much?
2. No suitable template? And so on. The problems you want to solve can basically meet your needs in this blog post~
3. Original HTML+CSS+JS page design, web college students' web design homework source code, this is a good web page production, the picture is smart, and is very suitable for beginners to learn and use.
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. Including: home page, about us, login and registration, A total of 4 pages.
2. Web page work editing: this work is the subject of web page design for students' final homework, and the code is simple student level html+css layout. After downloading the work, you can use any HTML editing software (for example, any HTML software such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +) to edit and modify the web page).
3. Layout of web works: the overall layout of the web page is responsive layout, LOGO, navigation and main content layout. There are many layouts of sub pages. The contents of interests and hobbies use the picture list layout. The score page inserts a table. Contact us to set the left alignment using the picture alignment.
4. Web page work technology: use DIV+CSS to make web pages, background map, music, video, flash, mouse passing and selected navigation color change effect, underline, etc. Submit the form, comment and leave a message, and make a form judgment using JavaScript (the form cannot be empty when submitting).
1, Work display
1. Home page
2. Product Center
3. Information centres
4. About us
2, File directory
3, 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" />
<title>Heating floor,Floor heating floor,Geothermal floor,Floor heating floor two in one</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="loading"><img src="images/loading.gif" width="32" height="32"></div>
<div class="header">
<div class="header-main w1000 clearfix">
<div class="logo"><a href=""><img src="images/logo.jpg" width="175" height="60"></a></div>
<div class="menub">
<b></b>
<ul>
<li class="ho">
<a href="default.html" class="btit">Website home page</a>
</li>
<li class="ho">
<a href="content.html" class="btit">About us</a>
<div class="subnav" style="width:500px;">
<a href="">Brand profile</a><span>·</span>
<a href="">Brand culture</a><span>·</span>
<a href="">Heating process</a><span>·</span>
<a href="">Honorary qualification</a><span>·</span>
<a href="">Talent strategy</a>
</div>
</li>
<li class="ho">
<a href="pro_list.html" class="btit">Product Center</a>
<div class="subnav" style="width:500px;">
<a href="">Product introduction</a><span>·</span>
<a href="">Product display</a><span>·</span>
<a href="">Installation instructions</a>
</div>
</li>
<li class="ho">
<a href="news_list.html" class="btit">News Center</a>
<div class="subnav" style="width:400px;">
<a href="">Brand information</a><span>·</span>
<a href="">Popular views</a><span>·</span>
<a href="">Home dynamics</a><span>·</span>
<a href="">Wonderful video</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">Investment promotion</a>
<div class="subnav" style="width:400px;">
<a href="">Franchise advantage</a><span>·</span>
<a href="">Experience center display</a><span>·</span>
<a href="">How to join</a><span>·</span>
<a href="">Apply for joining</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">Customer case</a>
<div class="subnav" style="width:400px;">
<a href="">New house installation</a><span>·</span>
<a href="">Old house reconstruction</a><span>·</span>
<a href="">Engineering case</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">Service Centre</a>
<div class="subnav">
<a href="">service idea </a><span>·</span>
<a href="">Service support</a><span>·</span>
<a href="">Home Consultant</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">contact us</a>
</li>
</ul>
</div>
</div>
<div class="bg"></div>
</div>
<div class="banner">
<ul class="jslist">
<li style="background:url(images/banner1.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
<div class="ret"></div>
</div>
</li>
<li style="background:url(images/banner2.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
</div>
</li>
<li style="background:url(images/banner3.jpg) no-repeat center">
<a href="" target="_blank"></a>
<div class="bannertxt w1000">
<img src="images/home_14.png" width="734" height="91" class="txt1">
<img src="images/home_18.png" width="16" height="17" class="txt2">
<img src="images/home_22.png" width="409" height="88" class="txt3">
</div>
</li>
</ul>
<div class="number">
<span class="current"><i><div class="sz1"></div></i></span>
<span ><i><div class="sz2"></div></i></span>
<span ><i><div class="sz3"></div></i></span>
</div>
</div>
<div class="sub3 w1000">
<div class="tocntit">About us</div>
<div class="tosentit">ABOUT US</div>
<div class="about_img"><img src="images/ab.jpg" width="387" height="254"/></div>
<div class="profile">
<div class="title"> ABOUT</div>
<div class="index_con">Heating floor, as its name implies, is a floor that can heat, which can provide heat to the house. More than ten years ago, scientists from Germany, the United States, Japan and other countries took the heat energy efficient technology as a research topic and sought to invent a high-efficiency, energy-saving, environmental friendly and low-carbon heat energy efficient conversion material applied in aerospace, science and technology and civil fields.<br />The indoor floor heating material with the floor as the carrier, or it is a functional floor. Its appearance is no different from that of the ordinary floor, but a high-tech heating layer is built in the middle of the floor. Its remarkable feature is that the floor itself can continuously generate heat and release it to the indoor space after power on...</div>
<span><a href="">Learn more</a></span> </div>
</div>
<div class="clear"></div>
<div class="merch-wrap10 pro-wrap">
<div class="w1000">
<div class="tocntit">Product display</div>
<div class="tosentit">PRODUCT DISPLAY</div>
<div class="merch-line">
<span class="box white"></span>
</div>
<div class="listwrap w1000">
<div class="list bd" id="ISL_Cont_1d6">
<ul class="clearfix">
<li><span><img src="images/propic01.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic02.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic06.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic08.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic04.jpg" width="258" height="164"></span></li>
<li><span><img src="images/propic05.jpg" width="258" height="164"></span></li>
</ul>
</div>
<span class="butn prev" id="Left_ding6"><a href="javascript:void(0)"></a></span>
<span class="butn next" id="Right_ding6"><a href="javascript:void(0)"></a></span>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var scrollPic_06 = new ScrollPicleft();
scrollPic_06.scrollContId = "ISL_Cont_1d6"; // Content container ID ''
scrollPic_06.arrLeftId = "Left_ding6"; //Left arrow ID
scrollPic_06.arrRightId = "Right_ding6"; //Right arrow ID
scrollPic_06.frameWidth = 1000; //Display box width
scrollPic_06.pageWidth = 1000; //Flip width
scrollPic_06.speed = 10; //Movement speed (in milliseconds, the smaller the faster)
scrollPic_06.space = 10; //Each pixel move (in px, the larger the faster)
scrollPic_06.autoPlay = true; //Auto play
scrollPic_06.autoPlayTime = 3; //Automatic playback interval (seconds)
scrollPic_06.initialize(); //initialization
</script>
<div class="clear"></div>
<div class="merch-wrap6 pro-wrap w1000">
<div class="tocntit">Honorary qualification</div>
<div class="tosentit">HONOR QUALIFICATION</div>
<div class="botwrap" style="bottom: 0px; opacity: 1;">
<div id="box" class="honor-box">
<pre class="prev"></pre>
<pre class="next"></pre>
<ul class="clearfix">
<li><img src="images/zzpic01.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic02.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic03.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic04.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic01.jpg" width="261" height="187"> </li>
<li><img src="images/zzpic03.jpg" width="261" height="187"> </li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.zoompic.js" ></script>
<div class="clear"></div>
<div class="i-se an-i">
<div class="tocntit">News Center</div>
<div class="tosentita">CUSTOMER CASE</div>
<div class="i-seb w1000">
<div class="le">
<a href="" class="leimg"><img src="images/defaultnews01.jpg" width="495" height="235"></a>
<div class="con">
<a href="" class="more">more</a>
<a href="" class="tit">The floor will heat up, which can save a lot of things</a><br>
<a href="" class="txt">Now, we use advanced self heating flooring"CG Far infrared intelligent cellular"Heating technology and"Intelligent temperature control technology",The temperature can be set at any time,And flexibly control the heating area..</a>
</div>
</div>
<div class="ri">
<ul>
<li><a href="" class="img"><img src="images/propic01.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">Principle and advantages of heating floor</a>
<a href="" class="txt">There is an essential difference between heating floor and traditional floor heating,Traditional floor heating needs to pre heat the pipeline or the floor under the floor...</a>
</div>
</li>
<li>
<a href="" class="img"><img src="images/propic02.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">New choice of heating floor for home heating</a>
<a href="" class="txt"> The floor can also be heated?you 're right,Now let's heat the floor with the help of electrical strength,Successfully produced with independent intellectual property rights, officially revised and launched...</a>
</div>
</li>
<li>
<a href="" class="img"><img src="images/propic06.jpg" width="133" height="88"></a>
<div class="con">
<a href="" class="tit">Decrypt the principle, advantages and disadvantages of self heating floor..</a>
<a href="" class="txt">Self heating floor integrates the heating device into the floor,Combine floor heating equipment and geothermal floor into one,It reduces the paving cost of consumers...</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="i-th an-i">
<div class="tocntit">Customer case</div>
<div class="tosentit">CUSTOMER CASE</div>
<div class="i-thb w1000">
<ul>
<li>
<div class="con">
<a href="" class="tit">New house installation</a><br>
<span class="entit"><img src="images/home_69.png" width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="New house installation" src="images/propic06.jpg" class="jpg in-focus1">
<img data-title="New house installation" src="images/propic06.jpg" class="jpg ">
<img data-title="New house installation" src="images/propic06.jpg" class="jpg ">
</div>
</a>
<i></i>
</li>
<li class="li2">
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="Old house reconstruction" src="images/propic03.jpg" class="jpg in-focus2">
<img data-title="Old house reconstruction" src="images/propic04.jpg" class="jpg ">
<img data-title="Old house reconstruction" src="images/propic02.jpg" class="jpg ">
</div>
</a>
<div class="con">
<a href="" class="tit">Old house reconstruction</a><br>
<span class="entit"><img src="images/home_82.png"width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<i></i>
</li>
<li>
<div class="con">
<a href="" class="tit">Engineering case</a><br>
<span class="entit"><img src="images/home_71.png" width="214" height="18"></span><br>
<span class="hr"></span><br>
<span class="txt"></span>
</div>
<a href="" class="pic-a">
<div class="clear-picshow">
<img data-title="Engineering case" src="images/propic05.jpg" class="jpg">
<img data-title="Engineering case" src="images/propic03.jpg" class="jpg">
<img data-title="Engineering case" src="images/propic02.jpg" class="jpg">
</div>
</a>
<i></i>
</li>
</ul>
</div>
</div>
<div class="i-fo an-i">
<div class="tocntit">Investment promotion</div>
<div class="tosentit">INVESTMENT TO JOIN</div>
<div class="i-fob w1000">
<ul>
<li class="even">
<img src="images/jmpic01.jpg" />
<span class="bg"></span>
<span class="btit">Join in<br>advantage</span>
</li>
<li class="odd">
<img src="images/jmpic02.jpg" />
<span class="bg"></span>
<span class="btit">experience<br>core</span>
</li>
<li class="even">
<img src="images/jmpic03.jpg" />
<span class="bg"></span>
<span class="btit">how<br>Join in</span>
</li>
<li class="odd">
<img src="images/jmpic04.jpg" />
<span class="bg"></span>
<span class="btit">apply<br>Join in</span>
</li>
</ul>
</div>
</div>
<div class="link w1000">Links:<a href="">Baidu</a> <a href="">Google</a></div>
<div class="footer clearfix">
<div class="f-fi w1000 clearfix">
<div class="le">
<ul>
<li class="ho">
<a href="" class="btit">About us</a>
<div class="subnav">
<a href="">Brand profile</a>
<a href="">Brand culture</a>
<a href="">Heating process</a>
<a href="">Honorary qualification</a>
<a href="">Talent strategy</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">Product Center</a>
<div class="subnav">
<a href="">Product introduction</a>
<a href="">Product display</a>
<a href="">Installation instructions</a>
</div>
</li>
<li class="ho">
<a href="" class="btit">News Center</a>
<div class="subnav">
<a href="">Brand information</a>
<a href="">Popular views</a>
<a href="">Home dynamics</a>
<a href="">Wonderful video</a>
</div>
</li>
</ul>
</div>
<div class="map">
</div>
</div>
<div class="f-se w1000">
<div class="le fl">
CopyRight 2020 XX Technology Co., Ltd All Right Reserved Zhejiang ICP prepare xxxxxxxx number
technical support:<a target="_blank" href="">So and so technology</a>
</div>
<div class="footertel fr">National free unified hotline: xxx</div>
</div>
</div>
</body>
</html>
4, web front end (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
5, Source code acquisition
❉ you can learn from each other about the above content and technical issues, and you can use the web front-end diary on V Xinggong Z > > > 👇🏻👇🏻👇🏻 Get more source code 👇🏻👇🏻👇🏻 !
6, More source code
The source code of more than 500 HTML5 final assessment assignments 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!
