>  기사  >  웹 프론트엔드  >  여행 홈페이지 홈페이지

여행 홈페이지 홈페이지

PHP中文网
PHP中文网원래의
2016-12-05 13:26:301488검색

며칠 동안 고민하고 지속적인 연습을 한 후 특정 작품을 만들 때 개발 프로젝트의 모델과 구현하려는 기능을 디자인한 후 시작해야 합니다,

생각하면서 할 수는 없습니다. 그렇지 않으면 그 과정에서 구현한 스타일에 항상 불만을 느낄 것이고, 끊임없이 수정하고
계속 노력하게 될 것입니다. 이때 매우 기분이 좋아질 것입니다. 무기력해집니다. 일을 더 잘 완수할 수 없을 뿐만 아니라 성급해지기도 합니다. 도중에 포기하게 됩니다.
제가 만든 페이지를 예로 들어보세요! 처음에는 그냥 간단한 웹페이지를 만들고 싶었는데, 하다보니 다음 페이지들의 기능을 개선하고 페이지를 아름답게 만들고 싶다는 생각이 들었습니다.
하지만 나중에 많은 어려움을 겪었습니다. 그리고 한동안 더 이상 진행할 수 없었습니다. 어쨌든 여전히 어려움은 있습니다. 모두가 함께 노력하여 이 웹페이지를 개선하고 서로 소통할 수 있기를 바랍니다.

  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)!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.