HTML5 final assignment: planned travel website design - finished HTM5 web page design assignment of travel theme of Fengyang smart tourism (9 pages)

HTML5 final assignment: planned travel website design - finished HTM5 web page design assignment of travel theme of Fengyang smart tourism (9 pages)

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!

Get more source code

PC pays attention to us

🧡Author home page - more source code

🧡HTML final assignment column

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=utf-8" />
<title>Fengyang County Tourism Bureau</title>
<meta name="keywords" content="Fengyang County Tourism Bureau " />
<meta name="description" content="Fengyang County Tourism Bureau " />
<link href="css/whir_css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/superslide.2.1.js"></script>
</head>
<body>
<!--head-->
<div id="header">
  <div class="top">
    <div class="welcome">
      <div class="welleft">Welcome to Fengyang smart tourism official flagship store!</div>
      <div class="zhuce"><a href="#">Sign in</a> / <a href="#"> register < / a > < / div >
    </div>
    <div class="searchbox">
      <div class="logo"><a href="#"title =" Fengyang County Tourism Bureau "> < img SRC =" images / logo. JPG "/ > < / a > < / div >
      <div class="search">
        <input type="text" class="input1" value="Please enter query keyword"  onFocus="this.value='';" onBlur="if(this.value==''){this.value='Please enter query keyword';}"name="" /><input type="image" src="images/btn.jpg" class="btn" />
      </div>
      <div class="tel"><img src="images/tel.jpg" /></div>
    </div>
  </div>
  <div class="nav">
    <ul class="navmenu">
      <li><a href="index.html">Website home page</a></li>
      <li><a href="List page.htm">Scenic spot tickets</a></li>
      <li><a href="List page.htm">Hotel Hotel</a></li>
      <li><a href="List page.htm">agritainment</a></li>
      <li><a href="List page.htm">Tourism commodities</a></li>
      <li><a href="List page.htm">Food and beverage</a></li>
      <li><a href="List page.htm">Tourism strategy</a></li>
      <li class="login"><a href="personal data.html">Log in now</a></li>
    </ul>
  </div>
</div>
<div class="fullSlide">
  <div class="bd">
    <ul>
      <li _src="url(images/banner.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="#"></a></li>
      <li _src="url(images/banner.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
      <li _src="url(images/banner.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
      <li _src="url(images/banner.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="#"></a></li>
      <li _src="url(images/banner.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
    </ul>
  </div>
  <div class="hd">
    <ul>
    </ul>
  </div>
  <span class="prev"></span> <span class="next"></span> </div>
<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
    jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
</script>
<div id="container">
  <!--Scenic spot tickets-->
  <div class="column">
    <div class="title">
      <h1>Scenic spot tickets</h1>
    </div>
    <ul class="list">
      <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> self service tour of Fengyang Ming Emperor Mausoleum on 4 nights and 6 days</a></span>
        <div class="jdinfo"><span class="go">01 People have been there</span><span class="price">¥209</span></div>
      </li>
      <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic1.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Fengyang Jiushan Cave 4 nights 6 days self service tour</a></span>
        <div class="jdinfo"><span class="go">01 People have been there</span><span class="price">¥209</span></div>
      </li>
      <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic2.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> self service tour of Fengyang Ming Emperor Mausoleum on 4 nights and 6 days</a></span>
        <div class="jdinfo"><span class="go">01 People have been there</span><span class="price">¥209</span></div>
      </li>
      <li> <span class="jdpic"><a href="#"><img src="images/pic3.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Fengyang large displacement 4-night 6-day self-service tour</a></span>
        <div class="jdinfo"><span class="go">01 People have been there</span><span class="price">¥209</span></div>
      </li>
      <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic4.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> self service tour of Fengyang reservoir on 4 nights and 6 days</a></span>
        <div class="jdinfo"><span class="go">01 People have been there</span><span class="price">¥209</span></div>
      </li>
    </ul>
  </div>
  <!--Hotel Hotel-->
  <div class="column">
    <div class="title1">
      <h1>Hotel Hotel</h1>
    </div>
    <ul class="list">
      <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic5.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Fengyang Imperial City Hotel</a></span>
        <div class="jdinfo"><span class="zhu">01 People have lived</span><span class="price">¥209</span></div>
      </li>
      <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic6.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Zhenpin Hotel</a></span>
        <div class="jdinfo"><span class="zhu">01 People have lived</span><span class="price">¥209</span></div>
      </li>
      <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic7.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Fengyang International Hotel</a></span>
        <div class="jdinfo"><span class="zhu">01 People have lived</span><span class="price">¥209</span></div>
      </li>
      <li> <span class="jdpic"><a href="#"><img src="images/pic8.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Fengyang large displacement 4-night 6-day self-service tour</a></span>
        <div class="jdinfo"><span class="zhu">01 People have lived</span><span class="price">¥209</span></div>
      </li>
      <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic9.jpg" width="224" height="148" /></a></span> <span class="jdtext"><a href="#"> Zhenpin Hotel</a></span>
        <div class="jdinfo"><span class="zhu">01 People have lived</span><span class="price">¥209</span></div>
      </li>
    </ul>
  </div>
  <!--agritainment-->
  <div class="column">
    <div class="list1">
      <div class="title2">
        <h1>agritainment</h1>
      </div>
      <ul>
        <li class="jl1"><a href="#"> < img SRC =" images / Pic11. JPG "width =" 193 "height =" 310 "/ > < span > forest park tickets < / span ></a></li>
        <li class="jl2"><a href="#"> < img SRC =" images / pic12. JPG "width =" 247 "height =" 145 "/ > < span > forest park tickets < / span ></a></li>
        <li class="jl3"><a href="#"> < img SRC =" images / pic13. JPG "width =" 217 "height =" 145 "/ > < span > forest park tickets < / span ></a></li>
        <li class="jl4"><a href="#"> < img SRC =" images / pic13. JPG "width =" 217 "height =" 145 "/ > < span > forest park tickets < / span ></a></li>
        <li class="jl5"><a href="#"> < img SRC =" images / pic12. JPG "width =" 247 "height =" 145 "/ > < span > forest park tickets < / span ></a></li>
        <li class="jl6"><a href="#"> < img SRC =" images / Pic11. JPG "width =" 193 "height =" 310 "/ > < span > forest park tickets < / span ></a></li>
      </ul>
    </div>
    <!--Tourism strategy-->
    <div class="lygl">
      <div class="title3">
        <h1>Tourism strategy</h1>
      </div>
      <img src="images/pic10.jpg" width="270" height="134" /><br />
      <p>China's most valuable culture(heritage)The selection activity of "tourism destination" is jointly sponsored by China Heritage Conservation Foundation, China Tourism News Agency and mobile TV station of Xinhua news agency. It aims to show the outstanding achievements made by governments at all levels in realizing benign interaction between cultural heritage protection and tourism development, and build new landscapes and new routes of historical culture and tourism value</p>
      <p>Fengyang has profound history and culture, rich and unique tourism resources, magical and beautiful natural scenery, brilliant red culture and rich and colorful folk culture</p>
    </div>
  </div>
  <!--delicious food-->
  <div class="column">
    <div class="food">
      <div class="title4">
        <h1>delicious food</h1>
      </div>
      <ul class="list2">
        <li class="f1"> <a href="#"><img src="images/pic14.jpg" width="212" height="141" /><br />
          Fengyang Imperial City cuisine</a> </li>
        <li class="f2"> <a href="#"><img src="images/pic15.jpg" width="212" height="141" /><br />
          Fengyang Imperial City cuisine</a> </li>
        <li class="f3"> <a href="#"><img src="images/pic16.jpg" width="212" height="141" /><br />
          Fengyang Imperial City cuisine</a> </li>
        <li class="f4"> <a href="#"><img src="images/pic17.jpg" width="212" height="141" /><br />
          Fengyang Imperial City cuisine</a> </li>
      </ul>
    </div>
    <!--independent travel-->
    <div class="zyx">
      <div class="title5">
        <h1>independent travel</h1>
      </div>
      <ul>
        <li><span class="zyimg"><a href="#"> < img SRC =" images / PIC18. JPG "width =" 107 "height =" 55 "/ > < / a > < / span > < span class =" zytext "> China's most valuable cultural (Heritage) Tourism
          Tour by China Heritage Conservation Fund
          Tourism newspapers are interactive</span></li>
        <li><span class="zyimg"><a href="#"> < img SRC =" images / pic19. JPG "width =" 107 "height =" 55 "/ > < / a > < / span > < span class =" zytext "> China's most valuable cultural (Heritage) Tourism
          Tour by China Heritage Conservation Fund
          Tourism newspapers are interactive</span></li>
        <li class="nobg"><span class="zyimg"><a href="#"> < img SRC =" images / pic20. JPG "width =" 107 "height =" 55 "/ > < / a > < / span > < span class =" zytext "> China's most valuable cultural (Heritage) Tourism
          Tour by China Heritage Conservation Fund
          Tourism newspapers are interactive</span></li>
      </ul>
    </div>
  </div>
</div>
<!--bottom-->
<div id="footer">
  <div class="foot">
    <div class="fnav">
      <ul>
        <li><a href="#"> about us</a></li>
        <li><a href="#"> Disclaimer</a></li>
        <li><a href="#"> add to collection</a></li>
        <li class="nobg"><a href="#"> set as home page</a></li>
      </ul>
    </div>
    <div class="copyright">Copyright: Fengyang Tourism Bureau Tel: 0550-66258789 Address: 109 Donghua Road, Fengyang zip code: 233100 email: fyx_lyj@163.com<br />
      Wan ICP Bei 07501184 Designed by <a href="#" target="_blank">samxinnet</a></div>
  </div>
</div>
</body>
</html>


4, Get more source code

PC pays attention to us

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 and gifts Products, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!

Bold style

Tags: Front-end html5 css

Posted on Fri, 26 Nov 2021 01:36:50 -0500 by petrb