Travel website homepage
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('./imgages/bkg-pat.png'); 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="./imgages/2.jpg" alt="风景图片"width="100%"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="./imgages/01.jpg" alt="风景图片"width="120px"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="./imgages/02.jpg" alt="风景图片"width="120px"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="./imgages/05.jpg" alt="风景图片"width="120px"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="./imgages/05.jpg" alt="风景图片"width="120px"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="./imgages/04.jpg" alt="风景图片"width="120px"height="100px">a>li>317 <p><a href="">ps:江西风景区a>p>318 p>319 <p>320 <li><a href=""><img src="./imgages/06.jpg" alt="风景图片"width="120px"height="100px">a>li>321 <p>ps:江西风景区p>322 p>323 <p>324 <li><a href=""><img src="./imgages/07.jpg" alt="风景图片"width="120px"height="100px">a>li>325 <p>ps:江西风景区p>326 p>327 <p>328 <li><a href=""><img src="./imgages/08.jpg" alt="风景图片"width="120px"height="100px">a>li>329 <p>ps:江西风景区p>330 p>331 <p>332 <li><a href=""><img src="./imgages/09.jpg" alt="风景图片"width="120px"height="100px">a>li>333 <p>ps:江西风景区p>334 p>335 <p>336 <li><a href=""><img src="./imgages/10.jpg" alt="风景图片"width="120px"height="100px">a>li>337 <p>ps:江西风景区p>338 p>339 <p>340 <li><a href=""><img src="./imgages/11.jpg" alt="风景图片"width="120px"height="100px">a>li>341 <p>ps:江西风景区p>342 p>343 <p>344 <li><a href=""><img src="./imgages/12.jpg" alt="风景图片"width="120px"height="100px">a>li>345 <p>ps:江西风景区p>346 p>347 348 <p>349 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>350 <p>ps:江西风景区p>351 p>352 <p>353 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>354 <p>ps:江西风景区p>355 p>356 <p>357 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>358 <p>ps:江西风景区p>359 p>360 <p>361 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>362 <p>ps:江西风景区p>363 p>364 <p>365 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>366 <p>ps:江西风景区p>367 p>368 <p>369 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"height="100px">a>li>370 <p>ps:江西风景区p>371 p>372 <p>373 <li><a href=""><img src="./imgages/2.jpg" alt="风景图片"width="120px"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('')script>387 script src="dist/sidebar-menu.js?1.1.2">script>388 script>389 $.sidebarMenu($('.sidebar-menu'))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('click', 'li a', function(e) { 5 var $this = $(this); 6 var checkElement = $this.next(); 7 8 if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) { 9 checkElement.slideUp(animationSpeed, function() {10 checkElement.removeClass('menu-open');11 });12 checkElement.parent("li").removeClass("active");13 }14 15 //If the menu is not visible16 else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {17 //Get the parent menu18 var parent = $this.parents('ul').first();19 //Close all open menus within the parent20 var ul = parent.find('ul:visible').slideUp(animationSpeed);21 //Remove the menu-open class from the parent22 ul.removeClass('menu-open');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('menu-open');30 parent.find('li.active').removeClass('active');31 parent_li.addClass('active');32 });33 }34 //if this isn't a link, prevent the page from being redirected35 if (checkElement.is('.treeview-menu')) {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)!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1375
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
