旅行ウェブサイトのホームページ
数日間考えて練習を続けると、具体的な作品を作るときは、開発プロジェクトのモデルや実現する機能を設計してから始めるべきだと思います
。そうしないと、プロセス中に実装したスタイルに常に不満を感じ、常にそれを修正して試し続けることになるため、この時点では、仕事をより良くすることができないだけでなく、無力感を感じることになります。また、衝動的になることもあります。途中で諦めることにつながります。
私が作ったページを例にしてみましょう！最初は単純なWebページを作りたかったのですが、作っていくうちに次のページの機能を改善したり、ページを美しくしたりしたいと思うようになりました。しばらく進まないでください。いずれにせよ、まだまだ困難はあります。皆さんがこのウェブページを改善するために協力し、互いにコミュニケーションできることを願っています。 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">
上記は旅行ウェブサイトのホームページの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7557
15
1384
52
83
11
28
96
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
