search
HomeWeb Front-endHTML TutorialTravel website homepage

Travel website homepage

Dec 05, 2016 pm 01:26 PM

After several days of thinking and continuous practice, when making a specific work, you should design the model of the development project and the functions to be realized before starting.

I feel that I can’t think about it while doing it. Otherwise, you will always feel dissatisfied with the style you have implemented during the process, and you will constantly modify it and keep trying. At this time, you will feel helpless and not only unable to make the work better The completion of it will also make you become impetuous. leading to giving up midway.
Take the page I made as an example! In the beginning, I just wanted to make a simple web page, but in the process of doing it, I felt that I wanted to improve the functions of the following pages and beautify the page. However, it caused many difficulties later and I couldn't proceed for a while. Anyway, there are still difficulties. I hope everyone can work together to improve this webpage and communicate with each other.

  1 <!DOCTYPE html>  2 <html "lang="zh-CN"">  3 <head>  4     <meta charset="UTF-8">  5     <title>visvitortitle>  6   <meta name="viewport" content="width=device-width, initial-scale=1">  7    <link rel="stylesheet" href="dist/sidebar-menu.css?1.1.2">  8     <link href="css/bootstrap.min.css?1.1.2" rel="stylesheet" type="text/css" >  9    <script src="js/jquery-2.1.1.min.js?1.1.2">script> 10      <script src="js/jquery-2.1.1.min.js?1.1.2">script> 11     <script src="bootstrap.min.js?1.1.2">script> 12     <style> 13     .main-sidebar{ 14       position: absolute; 15       top: 0; 16       left: 0; 17       height: 100%; 18       min-height: 100%; 19       width: 135px; 20       z-index: 810; 21       background-color: #E2EDF3; 22    } 23     #main{ 24         padding: 20px; 25         background-image:url(&#39;./imgages/bkg-pat.png&#39;); 26         background-size: 100% 100%; 27     } 28     .Content{ 29       width: 90%; 30       height: 100%; 31       border: 1px solid #fff; 32       padding-left: 30px; 33     } 34     table ,th,td{ 35       color:#A33B08; 36     } 37     .content_one{ 38       width: 100%; 39       height: 50px; 40       padding-left: 50px; 41       border: 1px solid #fff; 42        background: #E3EDF3; 43        margin-left: 120px; 44     } 45      .content_one ul { 46               padding-left: 85px; 47  48      } 49       .content_one ul li{ 50         width: 60px; 51         height: 35px; 52         background: #E3EDF3; 53        border:  1px solid #E3EDF3; 54        list-style-type: none; 55        padding-left: 30px; 56        margin-left: 80px; 57        float: left; 58        font-size: 25px; 59        font-family: "楷体"; 60        line-height: 50px; 61       } 62       .content_two{ 63       margin-left: 125px; 64       width: 90%; 65       height: 1000px; 66       border: 1px solid #E2EDF3; 67       } 68        .content_two ul{ 69         padding: 30px; 70         margin:30px;  71        } 72        .content_two ul li{ 73         list-style-type: none; 74         75       } 76        .content_two .p1{ 77        width: 120px; 78         height: 125px; 79         border:  1px solid #E2EDF3; 80        margin: 30px; 81         float: left; 82     83        } 84        .content_three{ 85       width: 90%; 86       height: 25px; 87       border: 1px solid #fff; 88       background: #E2EDF3; 89       margin-left: 120px; 90        } 91         .content_three p{ 92           text-align: center; 93         } 94        .content_four{ 95      width: 90%; 96       height: 25px; 97       border: 1px solid #fff; 98       background: #E2EDF3; 99       margin-left: 120px;100        }101           .content_four footer{102             text-align: center;103 104           }105     style>106 head>107 <body>108 <aside>109          <section  class="sidebar">110              <ul>111                  <li>MAIN NAVIGATIONli>112                     <li>113                   <a href="#">114                        <i class="fa fa-dashboard">i> <span>Dashboardspan> <i class="fa fa-angle-left pull-right">i>115                    a>116              <ul>117                  <li><a href="#"><i class="fa fa-circle-o">i> Dashboard v1a>li>118                  <li><a href="#"><i class="fa fa-circle-o">i> Dashboard v2a>li>119           ul>120         li>121         <li>122           <a href="#">123               <i class="fa fa-files-o">i>124                 <span>Layout Optionsspan>125                  <span class="label label-primary pull-right">4span>126           a>127           <ul style="display: none;">128                  <li><a href="#"><i class="fa fa-circle-o">i> Top Navigationa>li>129                  <li><a href="#"><i class="fa fa-circle-o">i> Boxeda>li>130                  <li><a href="#"><i class="fa fa-circle-o">i> Fixeda>li>131                   <li class=""><a href="#"><i class="fa fa-circle-o">i> Collapsed Sidebara>132                    li>133               ul>134         li>135         <li>136             <a href="#">137             <i class="fa fa-th">i> <span>Widgetsspan>138             <small class="label pull-right label-info">newsmall>139           a>140         li>141         <li>142           <a href="#">143             <i class="fa fa-pie-chart">i>144             <span>Chartsspan>145             <i class="fa fa-angle-left pull-right">i>146           a>147           <ul>148             <li><a href="#"><i class="fa fa-circle-o">i> ChartJSa>li>149             <li><a href="#"><i class="fa fa-circle-o">i> Morrisa>li>150             <li><a href="#"><i class="fa fa-circle-o">i> Flota>li>151             <li><a href="#"><i class="fa fa-circle-o">i> Inline chartsa>li>152           ul>153         li>154         <li>155           <a href="#">156             <i class="fa fa-laptop">i>157             <span>UI Elementsspan>158             <i class="fa fa-angle-left pull-right">i>159           a>160           <ul>161             <li><a href="#"><i class="fa fa-circle-o">i> Generala>li>162             <li><a href="#"><i class="fa fa-circle-o">i> Iconsa>li>163             <li><a href="#"><i class="fa fa-circle-o">i> Buttonsa>li>164             <li><a href="#"><i class="fa fa-circle-o">i> Slidersa>li>165             <li><a href="#"><i class="fa fa-circle-o">i> Timelinea>li>166             <li><a href="#"><i class="fa fa-circle-o">i> Modalsa>li>167           ul>168         li>169         <li>170           <a href="#">171             <i class="fa fa-edit">i> <span>Formsspan>172             <i class="fa fa-angle-left pull-right">i>173           a>174           <ul>175             <li><a href="#"><i class="fa fa-circle-o">i> General Elementsa>li>176             <li><a href="#"><i class="fa fa-circle-o">i> Advanced Elementsa>li>177             <li><a href="#"><i class="fa fa-circle-o">i> Editorsa>li>178           ul>179         li>180         <li>181           <a href="#">182             <i class="fa fa-table">i> <span>Tablesspan>183             <i class="fa fa-angle-left pull-right">i>184           a>185           <ul>186             <li><a href="#"><i class="fa fa-circle-o">i> Simple tablesa>li>187             <li><a href="#"><i class="fa fa-circle-o">i> Data tablesa>li>188           ul>189         li>190         <li>191           <a href="#">192             <i class="fa fa-calendar">i> <span>Calendarspan>193             <small class="label pull-right label-danger">3small>194           a>195         li>196         <li>197           <a href="#">198             <i class="fa fa-envelope">i> <span>Mailboxspan>199             <small class="label pull-right label-warning">12small>200           a>201         li>202         <li>203           <a href="#">204             <i class="fa fa-folder">i> <span>Examplesspan>205             <i class="fa fa-angle-left pull-right">i>206           a>207           <ul>208             <li><a href="#"><i class="fa fa-circle-o">i> Invoicea>li>209             <li><a href="#"><i class="fa fa-circle-o">i> Profilea>li>210             <li><a href="#"><i class="fa fa-circle-o">i> Logina>li>211             <li><a href="#"><i class="fa fa-circle-o">i> Registera>li>212             <li><a href="#"><i class="fa fa-circle-o">i> Lockscreena>li>213             <li><a href="#"><i class="fa fa-circle-o">i> 404 Errora>li>214             <li><a href="#"><i class="fa fa-circle-o">i> 500 Errora>li>215             <li><a href="#"><i class="fa fa-circle-o">i> Blank Pagea>li>216             <li><a href="#"><i class="fa fa-circle-o">i> Pace Pagea>li>217           ul>218         li>219         <li>220           <a href="#">221             <i class="fa fa-share">i> <span>Multilevelspan>222             <i class="fa fa-angle-left pull-right">i>223           a>224           <ul>225             <li><a href="#"><i class="fa fa-circle-o">i> Level Onea>li>226             <li>227               <a href="#"><i class="fa fa-circle-o">i> Level One <i class="fa fa-angle-left pull-right">i>a>228               <ul>229                 <li><a href="#"><i class="fa fa-circle-o">i> Level Twoa>li>230                 <li>231                   <a href="#"><i class="fa fa-circle-o">i> Level Two <i class="fa fa-angle-left pull-right">i>a>232                   <ul>233                     <li><a href="#"><i class="fa fa-circle-o">i> Level Threea>li>234                     <li><a href="#"><i class="fa fa-circle-o">i> Level Threea>li>235                   ul>236                 li>237               ul>238             li>239             <li><a href="#"><i class="fa fa-circle-o">i> Level Onea>li>240           ul>241         li>242         <li><a href="#"><i class="fa fa-book">i> <span>Documentationspan>a>li>243         <li>LABELSli>244         <li><a href="#"><i class="fa fa-circle-o text-red">i> <span>Importantspan>a>li>245         <li><a href="#"><i class="fa fa-circle-o text-yellow">i> <span>Warningspan>a>li>246         <li><a href="#"><i class="fa fa-circle-o text-aqua">i> <span>Informationspan>a>li>247       ul>248     section>249    aside>250     <p id="main">251          <p id="content">252               <p center>253                         <ul>254                           <li><a href="">Homea>li>255                           <li><a href="">navgationa>li>256                           <li><a href="">guidea>li>257                           <li><a href="">ideala>li>258                           <li><a href="">calla>li>259                         ul>260               p>261               <p>262                   <p>263                     <table border="1" width="100%"height="50px"bgcolor="#E2EDF3" border-color="#E5D3C5"cellpading="0"cellspacing="0">264                       <tr>265                       <th>地方th>266                         <td >上海td>267                         <td>厦门td>268                         <td>杭州td>269                         <td>九江td>270                         <td>南昌td>271                         <td>抚州 td>272 273                       tr>274                       <tr>275                       <th>景点th>276                         <td>东方明珠td>277                          <td>鼓浪屿td>278                           <td>西湖td>279                           <td>庐山td>280                           <td>秋水广场td>281                           <td>文塔td>282                       tr>283                       <tr>284                       <th>门票th>285                         <td>120元td>286                          <td>222元td>287                          <td>120元td>288                           <td>230元td>289                          <td>20元td>290                          <td>20元td>291                       tr>292                     table>293                   p>294                   <ul>295                   <p data-id="id-0" data-type="cat-item-1">296                   <li><a href="./imgages/2.jpg"><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>297                       <p><a href="">ps:江西风景区a>p>298                   p>299                    <pdata-id="id-1" data-type="cat-item-2">300                   <li><a href="./imgages/01.jpg"><img src="/static/imghwm/default1.png"  data-src="./imgages/01.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>301                       <p><a href="">ps:江西风景区a>p>302                   p>303                   <pdata-id="id-2" data-type="cat-item-3">304                   <li><a href="./imgages/02.jpg"><img src="/static/imghwm/default1.png"  data-src="./imgages/02.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>305                       <p><a href="">ps:江西风景区a>p>306                   p>307                    <p data-id="id-3" data-type="cat-item-4">308                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/05.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>309                       <p><a href="">ps:江西风景区a>p>310                   p>311                    <p data-id="id-1" data-type="cat-item-2">312                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/05.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>313                       <p><a href="">ps:江西风景区a>p>314                   p>315                    <p data-id="id-1" data-type="cat-item-2">316                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/04.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>317                       <p><a href="">ps:江西风景区a>p>318                   p>319                    <p>320                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/06.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>321                       <p>ps:江西风景区p>322                   p>323                    <p>324                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/07.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>325                       <p>ps:江西风景区p>326                   p>327                    <p>328                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/08.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>329                       <p>ps:江西风景区p>330                   p>331                    <p>332                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/09.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>333                       <p>ps:江西风景区p>334                   p>335                    <p>336                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/10.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>337                       <p>ps:江西风景区p>338                   p>339                    <p>340                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/11.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>341                       <p>ps:江西风景区p>342                   p>343                    <p>344                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/12.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>345                       <p>ps:江西风景区p>346                   p>347                  348                   <p>349                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>350                       <p>ps:江西风景区p>351                   p>352                     <p>353                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>354                       <p>ps:江西风景区p>355                   p>356                   <p>357                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>358                       <p>ps:江西风景区p>359                   p>360                   <p>361                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>362                       <p>ps:江西风景区p>363                   p>364                    <p>365                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>366                       <p>ps:江西风景区p>367                   p>368                   <p>369                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>370                       <p>ps:江西风景区p>371                   p>372                     <p>373                   <li><a href=""><img src="/static/imghwm/default1.png"  data-src="./imgages/2.jpg"  class="lazy"   alt="风景图片"   style="max-width:90%"height="100px">a>li>374                       <p>ps:江西风景区p>375                   p>376                   ul>377               p>378               <p  class="content_three">379                   <p><a href="">图片来源:江西抚州风景区a>p>380               p>381               <p>382                   <footer >文章来源:江西新闻网footer>383               p>384          p>385 p>386   <script>window.jQuery || document.write(&#39;&#39;)script>387   script src="dist/sidebar-menu.js?1.1.2">script>388     script>389       $.sidebarMenu($(&#39;.sidebar-menu&#39;))390     script>391 body>392 html> 下面是css和js 1 .sidebar-menu { 2   list-style: none; 3   margin-top: 10px; 4   padding: 0; 5   background-color: #343434; } 6   .sidebar-menu > li { 7     position: relative; 8     margin: 0; 9     padding: 0; }10     .sidebar-menu > li > a {11       padding: 12px 5px 12px 15px;12       display: block;13       border-left: 3px solid transparent;14       color: #b8c7ce; }15       .sidebar-menu > li > a > .fa {16         width: 20px; }17     .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {18       color: #fff;19       background: #1e282c;20       border-left-color: #3c8dbc; }21     .sidebar-menu > li > .treeview-menu {22       margin: 0 1px;23       background: #2c3b41; }24     .sidebar-menu > li .label,25     .sidebar-menu > li .badge {26       margin-top: 3px;27       margin-right: 5px; }28   .sidebar-menu li.header {29     padding: 10px 25px 10px 15px;30     font-size: 12px;31     color: #4b646f;32     background: #3434346; }33   .sidebar-menu li > a > .fa-angle-left {34     width: auto;35     height: auto;36     padding: 0;37     margin-right: 10px;38     margin-top: 3px; }39   .sidebar-menu li.active > a > .fa-angle-left {40     transform: rotate(-90deg); }41   .sidebar-menu li.active > .treeview-menu {42     display: block; }43   .sidebar-menu a {44     color: #b8c7ce;45     text-decoration: none; }46   .sidebar-menu .treeview-menu {47     display: none;48     list-style: none;49     padding: 0;50     margin: 0;51     padding-left: 5px; }52     .sidebar-menu .treeview-menu .treeview-menu {53       padding-left: 20px; }54     .sidebar-menu .treeview-menu > li {55       margin: 0; }56       .sidebar-menu .treeview-menu > li > a {57         padding: 5px 5px 5px 15px;58         display: block;59         font-size: 14px;60         color: #8aa4af; }61         .sidebar-menu .treeview-menu > li > a > .fa {62           width: 20px; }63         .sidebar-menu .treeview-menu > li > a > .fa-angle-left,64         .sidebar-menu .treeview-menu > li > a > .fa-angle-down {65           width: auto; }66       .sidebar-menu .treeview-menu > li.active > a, .sidebar-menu .treeview-menu > li > a:hover {67         color: #fff; } js code 1 $.sidebarMenu = function(menu) { 2   var animationSpeed = 300; 3    4   $(menu).on(&#39;click&#39;, &#39;li a&#39;, function(e) { 5     var $this = $(this); 6     var checkElement = $this.next(); 7  8     if (checkElement.is(&#39;.treeview-menu&#39;) && checkElement.is(&#39;:visible&#39;)) { 9       checkElement.slideUp(animationSpeed, function() {10         checkElement.removeClass(&#39;menu-open&#39;);11       });12       checkElement.parent("li").removeClass("active");13     }14 15     //If the menu is not visible16     else if ((checkElement.is(&#39;.treeview-menu&#39;)) && (!checkElement.is(&#39;:visible&#39;))) {17       //Get the parent menu18       var parent = $this.parents(&#39;ul&#39;).first();19       //Close all open menus within the parent20       var ul = parent.find(&#39;ul:visible&#39;).slideUp(animationSpeed);21       //Remove the menu-open class from the parent22       ul.removeClass(&#39;menu-open&#39;);23       //Get the parent li24       var parent_li = $this.parent("li");25 26       //Open the target menu and add the menu-open class27       checkElement.slideDown(animationSpeed, function() {28         //Add the class active to the parent li29         checkElement.addClass(&#39;menu-open&#39;);30         parent.find(&#39;li.active&#39;).removeClass(&#39;active&#39;);31         parent_li.addClass(&#39;active&#39;);32       });33     }34     //if this isn&#39;t a link, prevent the page from being redirected35     if (checkElement.is(&#39;.treeview-menu&#39;)) {36       e.preventDefault();37     }38   });39 }  " _ue_custom_node_="true">


The above is the content of the homepage of the travel website. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.