HTML5 final assignment: my hometown Web Design - Puxian (6 pages) code quality is good HTML+CSS+JavaScript final assignment HTML code student web 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. A total of 6 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. Scenic spot
3. Culture
4. Information registration
5. Food
2, File directory
3, Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
<title>home page</title>
<link rel="stylesheet" href="library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="library/css/bootstrap.min.css">
<link rel="shortcut icon" href="xy_favicon.ico">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<script src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="library/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="library/js/bootstrap.min.js"></script>
<div class="container">
<!-- Navigation -->
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="active"><a href="index.html" data-ajax="false" class="ui-icon-home ui-btn-icon-top"><span class="hidden-xs">home page</span></a></li>
<li><a href="food.html" data-ajax="false" class="ui-icon-heart ui-btn-icon-top"><span class="hidden-xs">delicious food</span></a></li>
<li><a href="spor.html" data-ajax="false" class="ui-icon-location ui-btn-icon-top"><span class="hidden-xs">scenic spot</span></a></li>
<li><a href="culture.html" data-ajax="false" class="ui-icon-refresh ui-btn-icon-top"><span class="hidden-xs">Culture</span></a></li>
<li><a href="contact.html" data-ajax="false" class="ui-icon-mail ui-btn-icon-top ui-btn ui-btn-inline ui-corner-all ui-shadow"><span class="hidden-xs">Information registration</span></a></li>
</ul>
</div>
</div>
<!-- subject -->
<div class="main">
<div class="row">
<div class="banner col-md-1 col-sm-1 col-xs-1">
<img src="images/banner.jpeg" alt="" class=" visible-lg visible-md">
<!-- <p class="hidden-lg hidden-md min">Capital of Minxiang</p> -->
</div>
</div>
<!-- Service navigation -->
<div class="row sv_nav clearfix" data-role="controlgroup" data-type="horizontal">
<!-- Ticket purchase -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#book" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/book.jpg" alt="" class="img-thumbnail">
<p class="text-muted">Ticket purchase</p>
</a>
<div data-role="popup" id="book" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>Putian ticketing</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="#">
<label for="time">Departure date:</label>
<input type="date" name="time" id="time">
<label for="site">Start stop station:</label>
<input type="text" name="site" id="site">
<label for="money">Ticket price:</label>
<input type="text" name="money" id="money">
<label for="fname">full name:</label>
<input type="text" name="fname" id="fname">
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<label for="id">ID</label>
<input type="text" name="id" id="id">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Putian ticketing system</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
<!-- hotel -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#hotel" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/hotel.jpg" alt="" class="img-thumbnail">
<p class="text-muted">hotel</p>
</a>
<div data-role="popup" id="hotel" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>Book a room</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="#">
<label for="startime">Start accommodation:</label>
<input type="date" name="startime" id="startime">
<label for="endtime">End of stay:</label>
<input type="date" name="endtime" id="endtime">
<label for="room">room number:</label>
<input type="text" name="room" id="room">
<label for="fname">full name:</label>
<input type="text" name="fname" id="fname">
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<label for="id">ID</label>
<input type="text" name="id" id="id">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Reservation system</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
<!-- guide -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#tour_guide" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/tour_guide.png" alt="" class="img-thumbnail">
<p class="text-muted">guide</p>
</a>
<div data-role="popup" id="tour_guide" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>guide</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="#">
<label for="startime">start time:</label>
<input type="date" name="startime" id="startime">
<label for="endtime">End time:</label>
<input type="date" name="endtime" id="endtime">
<label for="tour_guide">Choose a tour guide:</label>
<div class="ui-field-contain">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
<option value="1">Please select a tour guide</option>
<option value="2">Li Dao</option>
<option value="3">Chen Dao</option>
<option value="4">Zhang Dao</option>
</select>
</div>
<label for="fname">full name:</label>
<input type="text" name="fname" id="fname">
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Tour guide system</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
<!-- shopping -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#shop" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/shop.jpg" alt="" class="img-thumbnail">
<p class="text-muted">shopping</p>
</a>
<div data-role="popup" id="shop" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>shopping</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="#">
<label for="fname">full name:</label>
<input type="text" name="fname" id="fname">
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<label>Dishes</label>
<div class="ui-field-contain">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
<option value="1">Please select dishes</option>
<option value="2">Cabbage</option>
<option value="3">Tomatoes</option>
<option value="4">Green vegetables</option>
</select>
</div>
<label for="map">Shipping address:</label>
<input type="text" name="map" id="map">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Shopping system</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
<!-- take-out food -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#take_out" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/take_out.png" alt="" class="img-thumbnail">
<p class="text-muted">take-out food</p>
</a>
<div data-role="popup" id="take_out" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>take-out food</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="#">
<label for="room">room number:</label>
<input type="text" name="room" id="room">
<label for="fname">full name:</label>
<input type="text" name="fname" id="fname">
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<label>delicious food</label>
<div class="ui-field-contain">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
<option value="1">Please select dishes</option>
<option value="2">hamburger</option>
<option value="3">cola</option>
<option value="4">volume</option>
</select>
</div>
<label for="map">Shipping address:</label>
<input type="text" name="map" id="map">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Takeout system</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
<!-- vip -->
<div class="sv_lt col-md-2 col-sm-2 col-xs-2">
<a href="#vip" data-icon="info" data-rel="popup" data-transition="flip" class="ui-btn ui-btn-inline ui-corner-all" data-role="button"><img src="images/vip.png" alt="" class="img-thumbnail">
<p class="text-muted">vip</p>
</a>
<div data-role="popup" id="vip" class="ui-content" data-overlay-theme="b" data-dismissible="false">
<div data-role="header">
<h1>vip</h1>
</div>
<div data-role="main" class="ui-content vip">
<form method="post" action="#">
<img src="images/vip.png" alt="" class="img-thumbnail">
<label>Opening time</label>
<div class="ui-field-contain">
<select name="select-native-1" id="select-native-1" data-iconpos="left">
<option value="1">Please select the duration</option>
<option value="2">1 Months/30 element</option>
<option value="3">3 Months/90 element</option>
<option value="4">12 Months/360 element</option>
</select>
</div>
<label for="phone">Telephone:</label>
<input type="text" name="phone" id="phone">
<input type="button" data-inline="true" value="Submit" class="bk_sb">
</form>
</div>
<div data-role="footer">
<h1>Open VIP service</h1>
</div>
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-right ui-btn-icon-notext"></a>
</div>
</div>
</div>
<!-- Journalism -->
<div class="news">
<a class="row">
<div class="col-md-9">
<h3>Jade Mazu an Zuo Gutian Tin Hau Temple</h3>
<p class="text-muted">2020-12-15 09:25 Putian network
</p>
<p class="text-info hidden-xs">This jade Mazu was donated by Mr. Zhao Liucheng, vice president of China Mazu Cultural Exchange Association and chairman of Shanghai Yucheng Tianci Co., Ltd. Lin jinzan, vice president of China Mazu Cultural Exchange Association and chairman of Meizhou Mazu temple, went to the Tin Hau Temple in Gutian to arrange matters related to religion and customs.</p>
<p class="text-muted">Meizhou daily Su libin</p>
</div>
<div class="col-md-3">
<img src="images/later.jpeg" alt="" class="img-thumbnail hidden-sm hidden-xs">
</div>
</a>
<a class="row">
<div class="col-md-9">
<h3>Putian Wenfeng palace grants grants to poor college students</h3>
<p class="text-muted">2020-12-15 09:25 Putian network
</p>
<p class="text-info hidden-xs">Putian.com on December 8, Chen Luling, chairman of Tianhou palace of Putian Wenfeng, walked into Putian College and awarded the "2020" award to 17 students from families with financial difficulties with excellent character and learning-2021 In the academic year, Wenfeng Tianhou palace scholarship received 2000 yuan per person, a total of 34000 yuan. This is the sixth consecutive year since 2015 that Tianhou palace of Putian Wenfeng has awarded grants to students of the college.</p>
<p class="text-muted">Meizhou Daily reporter Zheng Jidong</p>
</div>
<div class="col-md-3">
<img src="images/wenfeng.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs">
</div>
</a>
<a class="row">
<div class="col-md-9">
<h3>Mazu love across the Taiwan Strait</h3>
<p class="text-muted">2020-12-15 09:24 Putian network
</p>
<p class="text-info hidden-xs">Since the opening of the two sides of the Strait to visit relatives, Taiwan's Mazu Fenling temple has continuously organized groups to visit Mazu temple in Meizhou, setting off an upsurge of Mazu returning to her mother's house. This "fiery emotion" originated from nostalgia and placed in Mazu did not cool down with time, but became more and more condensed in the rotation of time, containing the power to break through time and space, which has been the case for decades.</p>
<p class="text-muted">Meizhou daily Zhou jianguowen/chart</p>
</div>
<div class="col-md-3">
<img src="images/love.jpg" alt="" class="img-thumbnail hidden-sm hidden-xs">
</div>
</a>
</div>
</div>
</div>
<div data-role="footer">
<h1>copyright©Anno</h1>
</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!
