Maison  >  Article  >  interface Web  >  旅游网站首页

旅游网站首页

PHP中文网
PHP中文网original
2016-12-05 13:26:301473parcourir

经过几天的思考与不断的实践,做一个具体的作品时,应在动手之前先设计好开发项目的模型以及所要实现的功能,

觉不能一边在做一边去思考,否则,你会感觉到在做的过程中老是觉得对自己实现的样式感觉不满意,会对它不断地修改,
不断地尝试,此时,你会觉得很无奈,不仅无法使作品更好的完成,还会使自己变得浮躁。导致中途放弃。
就拿我做的页面来说吧!开始就只想简简单单的做一个网页,可是后面在做的过程中,感觉就想完善以下页面的功能以及美化一下页面,
可是导致后面困难重重,一时之间没法进行下去。总之困难还有的。希望大家一起完善这个网页大家一起交流。

  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="./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(&#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">


以上就是旅游网站首页的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:【CSS3】 CSS3:弹性盒子(Flex Box)Article suivant:XML基础