HTML5 final assignment: Tourism Website Design - Blue local tourism portal (9 pages) HTML+CSS+JavaScript
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 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=gbk" />
<title>home page - eat - Xingwen tourism network</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="js/flash.js"></script>
<script type="text/javascript" src="js/int.js"></script>
</head>
<body>
<div id="topBar">
<div class="wrapper">
<div class="l">Hello, tourists. Welcome to Xingwen tourism information network!</div>
<div class="r">
<a href="#" onclick="window.external.AddFavorite(location.href, 'Xingwen tourism network'); "> add to collection</a>
<a href="#" onclick="this.style.behavior='url(#default#homepage)'; this. setHomePage(location.href); "> set as home page</a>
<span>
<a href="http://shop. xingwentour. gov.cn/" target="_ Blank "> tourist mall < / a >|
<a href="http://www.xwta. gov.cn" target="_ Blank "> government affairs website < / a >|
<a href="http://en.xingwentour.gov.cn" target="_blank">English</a>
</span>
</div>
</div>
</div>
<div id="header">
<div class="wrapper">
<div class="logo">
<a href="/"><img src="images/logo.gif" alt="Xingwen tourism information network" /></a>
<h1>Xingwen County tourism portal　Xingwen County Tourism Information Platform</h1>
</div>
<form target="_blank" action="/search.aspx" method="get"><div class="search">
<dl>
<dd><a id="search_type1" onclick="select_search_type(1);return false;" href="#"Class =" current "> attractions < / a > < / DD >
<dd><a id="search_type2" onclick="select_search_type(2);return false;" href="#"> line < / a > < / DD >
<dd><a id="search_type3" onclick="select_search_type(3);return false;" href="#"> information < / a > < / DD >
</dl>
<ul>
<li><a href="/live/hotel_list.aspx" target="_blank">Hotel accommodation</a></li>
<li><a href="/eat/foodshops.aspx" target="_blank">Catering and entertainment</a></li>
</ul>
<div>
<input type="text" name="q" onfocus="if(this.value=='This is a magical search'){this.value='';}" value="This is a magical search" />
<input name="search_type" id="search_type" value="1" type="hidden" /><button type="submit">search</button>
</div>
<p><strong>Popular search:</strong><a href="/search.aspx?search_type=1&q=%D0%CB%CE%C4%CA%AF%BA%A3">Xingwen stone sea</a><a href="/search.aspx?search_type=1&q=%83k%CD%F5%C9%BD%BE%B0%C7%F8">Bowang mountain scenic spot</a><a href="/search.aspx?search_type=3&q=+%CF%E3%CB%AE%C9%BD"> Perfume Hill</a><a href="/search.aspx?search_type=3&q=qw">qw</a><a href="/search.aspx?search_type=1&q=adsf">adsf</a><a href="/search.aspx?search_type=1&q=%D1%CF%BC%D2%B6%B4">Yan Jiadong</a></p>
</div></form>
</div>
</div>
<div id="nav">
<dl>
<div><iframe src="http://m.weather.com.cn/m/pn8/weather.htm?id=101271110T " width="480" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true" scrolling="no"></iframe></div>
<dd><a href="/service" target="_blank" class="a1">Tourism Service Center</a></dd>
<dd><a href="/diy/" target="_blank" class="a2">Personalized circuit design</a></dd>
<dd><a href="/xuniyou/" target="_blank" class="a3">Virtual tour</a></dd>
</dl>
<ul>
<li><a href="/index.aspx" class="a1">home page</a></li>
<li><a href="/eat" class="a2">eat</a></li>
<li><a href="/live" class="a3">live</a></li>
<li><a href="/traffic" class="a4">that 's ok</a></li>
<li><a href="/tour" class="a5">swim</a></li>
<li><a href="/shop" class="a6">purchase</a></li>
<li><a href="/play" class="a7">Amuse</a></li>
</ul>
</div>
<script type="text/javascript">
function select_search_type(n){
document.getElementById('search_type1').className='';
document.getElementById('search_type2').className='';
document.getElementById('search_type3').className='';
document.getElementById('search_type'+n).className='current';
document.getElementById('search_type').value=n;
}
</script><div id="main">
<div id="cate">
<a class="prev"></a>
<div class="scroll">
<ul>
<li>
<strong>delicious food</strong>
<a href="/eat/feature.aspx">Specialty food</a>|<a href="/eat/foodshops.aspx">Famous restaurant</a>|<a href="/eat/culture.aspx">Food culture</a><br />
<!--<a href="#">Food map</a>|--><a href="#"> gourmet</a>
</li>
<li>
<strong>get accommodation</strong>
<a href="/live/hotel_list.aspx?hotel_type=1">Star Hotel</a>|<a href="/live/hotel_list.aspx?hotel_type=2">Economic Hotel</a>|<a href="/live/hotel_list.aspx?hotel_type=4">agritainment</a><br />
<a href="http://shop. xingwentour. gov.cn/Live/" target="_ Blank "class =" blue "> Hotel Reservation</a>
</li>
<li>
<strong>Travel</strong>
<a href="/tour/scenic.aspx">scenic spot</a>|<a href="/tour/line.aspx">Boutique route</a>|<a href="/tour/rural.aspx">rural tourism </a><br />
<a href="/tour/guides.aspx">Guide introduction</a>|<a href="//DIY "class =" blue "> line customization < / a > | < a href =" tour / Travel_ agency. Aspx "> Travel Agency</a>
</li>
<li>
<strong>shopping</strong>
<a href="/shop/specialty.aspx">Specialty items</a>|<a href="/shop/shopplace.aspx">Shopping place</a>|<a href="/shop/article_list.aspx?cid=16">Shopping expert</a><br />
<a href="/shop/article_list.aspx?cid=11">Preferential activities</a>|<a href=" http://shop. xingwentour. Gov.cn / "class =" Red B "> tourist mall</a>
</li>
<li>
<strong>entertainment</strong>
<a href="/play/match.aspx?type=2" class="b">tourism festival </a>|<a href="/play/match.aspx?type=1">Performance with national characteristics</a><br />
<a href="/play/match.aspx?type=3">Sports events</a>|<a href="/play/playplace.aspx">Entertainment place</a>
</li>
<li>
<strong>service</strong>
<a href="/service/info.aspx">Tourism overview</a>|<a href="/service/article.aspx">Travel information</a>|<a href="#"> tourist consultation < / a > < br / >
<a href="/service/interaction.aspx">Tourism Interaction</a>|<a href="/service/toolinfo.aspx">Travel Toolbox </a>
</li>
</ul>
</div>
<a class="next"></a>
</div> <div id="page">
<div class="pageLeft">
<h2 class="t1">eat</h2>
<div class="subNav">
<div>
<ul>
<li><a href="feature.aspx" >Specialty food</a></li>
<li><a href="foodshops.aspx" >Famous restaurant</a></li>
<li><a href="culture.aspx" >Food culture</a></li>
<!--<li><a href="#"> food map</a></li> -->
<!--<li><a href="#"> gourmet</a></li> -->
</ul>
<form action="/search.aspx" method="get"><p><input type="text" name="q" onfocus="if(this.value=='Full text search keywords'){this.value='';}" value="Full text search keywords" /><input name="search_type" type="hidden" value="3" /><button type="submit">search</button><a href="#"> Advanced < / a > < / P > < / form > </ div>
</div>
<div class="cust">
<p><a href="/diy/" target="_blank">Customize my line</a></p>
</div>
<div class="links">
<h3>Travel Tips</h3>
<ul>
<li><a href="http://shop. xingwentour. gov.cn/Travel/" target="_ Blank "class =" A1 "> ticket booking</a></li>
<li><a href="http://shop. xingwentour. gov.cn/Live/" target="_ Blank "class =" A2 "> Hotel Reservation</a></li>
<li><a href="http://www.weather. com. cn/weather/101271110. shtml" target="_ Blank "class =" A3 "> weather forecast</a></li>
<li><a href="/service/knowledge_list.aspx" target="_blank" class="a4">Travel knowledge</a></li>
<li><a href="/service/faq.aspx" target="_blank" class="a5">common problem</a></li>
<li><a href="/service/yellowpage.aspx" target="_blank" class="a6">Common telephone</a></li>
<li><a href="http://www.12306. cn/mormhweb/" target="_ Blank "class =" A7 "> train query</a></li>
<li><a href="http://flight. qunar. com/status/alphlet_ order. jsp" target="_ Blank "class =" A8 "> flight query</a></li>
</ul>
</div> <div class="ad">
<a href="#"><img src="images/ad1.jpg" /></a>
</div>
</div> <div class="pageRight">
<div class="chiMain">
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(function() {
$('.chiMain .itemA .bPic').cycle({
fx: 'scrollLeft',
speed: 300,
timeout: 3000,
pager: '.chiMain .itemA .sPic',
pagerAnchorBuilder: function(idx, slide) {
return '.chiMain .itemA .sPic li:eq(' + (idx) + ') a';
}
});
});
</script>
<div class="itemA">
<ul class="bPic">
<li><img src="images/13358590557048136.jpg" height="270" /><p><a href="article_detail.aspx?aid=30" target="_blank">Fried egg with rice</a></p></li>
<li><img src="images/133585869242480091.jpg" height="270" /><p><a href="article_detail.aspx?aid=28" target="_blank">Dam pig cake</a></p></li>
<li><img src="images/1335858604366991827.jpg" height="270" /><p><a href="article_detail.aspx?aid=27" target="_blank">Wild mushroom black chicken</a></p></li>
<li><img src="images/1335858544745679406.jpg" height="270" /><p><a href="article_detail.aspx?aid=26" target="_blank">Stone mill bean dregs</a></p></li>
</ul>
<ul class="sPic">
<li><a class="current" href="article_detail.aspx?aid=30"><img src="images/small_13358590557048136.jpg" /></a></li>
<li><a href="article_detail.aspx?aid=28"><img src="images/small_133585869242480091.jpg" /></a></li>
<li><a href="article_detail.aspx?aid=27"><img src="images/small_1335858604366991827.jpg" /></a></li>
<li><a href="article_detail.aspx?aid=26"><img src="images/small_1335858544745679406.jpg" /></a></li>
</ul>
</div>
<div class="itemB">
<form name="formsearch" onsubmit="if(document.formsearch.q.value=='Please enter keyword'){document.formsearch.q.value='';}" action="foodshops.aspx" method="get"><input type="text" name="q" onfocus="if(this.value=='Please enter keyword'){this.value='';}" value="Please enter keyword" />
<select name="type"><option value="">All categories</option><option label="Flavor Restaurant" value="1">Flavor Restaurant</option>
<option label="Business banquet" value="2">Business banquet</option>
<option label="special snacks" value="3">special snacks</option>
<option label="agritainment" value="4">agritainment</option>
</select>
<button type="submit">Search</button></form>
</div>
<div class="clearit"></div>
<div class="itemC">
<h2>Famous restaurant</h2>
<ul class="list">
<li><a target="_blank" href="foodshops_detail.aspx?fid=4"><img src="images/small_133430051224932637.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=4">Boyuan Holiday Inn Xingwen County</a></p></li>
<li><a target="_blank" href="foodshops_detail.aspx?fid=3"><img src="images/small_13342995521533953.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=3">Xingwen hotel catering</a></p></li>
<li><a target="_blank" href="foodshops_detail.aspx?fid=2"><img src="images/small_1334299196461429480.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=2">Xiaoyaxuan</a></p></li>
<li><a target="_blank" href="foodshops_detail.aspx?fid=1"><img src="images/small_13342990377686426.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=1">Xingwen shuqinyuan farmhouse</a></p></li>
</ul>
<ul class="clearit"></ul>
<a href="foodshops.aspx" class="more" target="_blank">more</a>
</div>
<div class="itemD">
<h2>Food culture</h2>
<div>
<img src="images/chi2.jpg" />
<ul>
<li><a target="_blank" href="article_detail.aspx?aid=8">Xingwen famous wine-Shihaidong fragrant wine</a></li>
<li><a target="_blank" href="article_detail.aspx?aid=7">Xingwen Shihai pig cake</a></li>
<li><a target="_blank" href="article_detail.aspx?aid=6">Yibin's diet is mainly characterized by freshness and spicy</a></li>
<li><a target="_blank" href="article_detail.aspx?aid=5">Explore the footprints of ancient crafts and the past life of Heshi handicraft</a></li>
</ul>
</div>
</div>
<!--<div class="itemE">
<h2>Gourmet Master </h2>
<div>
<strong><a href="#"> making rice and steamed buns the eating habits of Baima people in northern Sichuan < / a > < / strong >
<p><span>@Don't eat cat fish</span>There is a tribe called Baima people living in Pingwu County, Nanping County, Sichuan Province and Wen County, Gansu Province. The genus of the white horse people has not been determined. There are theories of "white horse family", "white horse Tibetan" and "white horse Qiang"...</p>
<a href="#"Class =" more "> more > ></a>
</div>
<a href="#"><img src="images/chi3.jpg" /></a>
</div>-->
</div>
</div>
<div class="clearit"></div>
</div>
<div id="footer">
<div class="nav">
<ul>
<li><a href="/service/info_view.aspx?aid=5" target="_blank">About us</a></li>
<li><a href="/service/info_view.aspx?aid=6" target="_blank">Advertising services</a></li>
<li><a href="/service/info_view.aspx?aid=7" target="_blank">contact information</a></li>
<li><a href="/service/info_view.aspx?aid=8" target="_blank">Website statement</a></li>
<li><a href="/service/info_view.aspx?aid=9" target="_blank">Join us </a></li>
<li><a href="/service/info_view.aspx?aid=10" target="_blank">cooperative partner</a></li>
<li><a href="#"> back to top</a></li>
</ul>
</div>
<div class="copyright">
<div class="l">
©2011 Yibin Xingwen County Tourism Bureau All Rights Reserved. <a href="http://www.miibeian. gov.cn" target="_ Blank "> Shu ICP Bei No. 10207069 < / a > < a href =" / manage / "target =" "_ Blank "> website management < / a > <! -- < script type =" text / JavaScript ">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F61c10ac8bc0b320cb36a7ee421dabefa' type='text/javascript'%3E%3C/script%3E"));
</script>--><br />
Address: No. 7, Changjiang Avenue, Yibin City B Room 115, district Tel: 0831-2323293 Postal Code: 614000 email: tour@xingwentour.gov.cn
</div>
<div class="r">
You can also contact and follow us through microblog!<br />
<a href="#" class="a1">follow@Sina Weibo</a><a href="#"Class =" A2 "> follow @ Tencent Weibo</a>
</div>
<div class="clearit"></div>
</div>
</div></div>
<div id="author">
<ul>
<li><img src="images/f1.gif" /></li>
<li><img src="images/f2.gif" /></li>
<li><img src="images/f3.gif" /></li>
<li><img src="images/f4.gif" /></li>
</ul>
<p><strong>Impates</strong>Provide whole process network planning and operation　Design by:<a href="http://www.citycy. com" target="_ Blank "> leading city interaction</a></p>
</div><a href="#"title =" return to top "id =" GoTop "></a>
</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!
