免费HTML5期末大作业：我的家乡网站设计——可根据百度百科--曹县
生活随笔
收集整理的這篇文章主要介紹了
免费HTML5期末大作业：我的家乡网站设计——可根据百度百科--曹县
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
如下代碼供學習交流，獲取完整代碼，請關(guān)注文后二維碼（coding加油站）回復(fù)家鄉(xiāng)3免費獲取。
1.網(wǎng)頁作品簡介 ：
HTML期末大學生網(wǎng)頁設(shè)計作業(yè)，可以替換文字圖片滿足不同的家鄉(xiāng)，根據(jù)百度百科的信息來替換就是自己的家鄉(xiāng)了
2.知識應(yīng)用：
在操作方面上運用了html5和css3，采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎(chǔ)知識
3. 內(nèi)容介紹：
《我的家鄉(xiāng)》共有5個頁面，分別為
Index.html【首頁】
首頁主要使用hover來實現(xiàn)一些動畫，同時具備響應(yīng)式功能，添加桌面同學，可以跟著鼠標的移動來轉(zhuǎn)動（可以刪除），實現(xiàn)的效果圖如下：
核心代碼如下：
about.html【關(guān)于界面】
關(guān)于界面主要介紹家鄉(xiāng)的風景，主要是輪播圖的使用，以及地圖的使用，通過百度百科可隨意更換為你的家鄉(xiāng)，如下是效果圖：
核心代碼如下：
<div id="all"><div class="container-fluid"><div class="row row-offcanvas row-offcanvas-left"> <!-- *** SIDEBAR ***--><div id="sidebar" class="col-md-4 col-lg-3 sidebar-offcanvas"><div class="sidebar-content"><h1 class="sidebar-heading"> <a href="index.html">曹縣 Anyang</a></h1><ul class="sidebar-menu"><!-- Link--><li class="sidebar-item"><a href="index.html" class="sidebar-link active">主頁</a></li><!-- Link--><li class="sidebar-item"><a href="about.html" class="sidebar-link">去旅游</a></li><!-- Link--><li class="sidebar-item"><a href="contact.html" class="sidebar-link">社區(qū)論壇</a></li></ul><p class="sidebar-p">  曹縣，隸屬于山東省菏澤市，古稱曹州，位于山東省西南部，魯豫兩省八縣交界處，南臨商丘、民權(quán)縣，北接菏澤、定陶區(qū)，東靠單縣、成武縣，西瀕東明、蘭考縣；總面積1969平方千米，轄5個街道辦事處，22鄉(xiāng)鎮(zhèn)；</p><p class="sidebar-p">  明洪武四年（1371年），降曹州為曹縣，后復(fù)置曹州，曹縣此稱沿用至今。曾獲得“中國蘆筍之鄉(xiāng)”、“中國泡桐加工之鄉(xiāng)”、“中國食品工業(yè)百強縣”、“中國平原綠化先進縣”、中國首批規(guī)模化克隆牛實驗基地等榮譽。</p><!--<p class="social"><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a><a href="#" title="" class="external instagram"><i class="fa fa-instagram"></i></a><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></p><div class="copyright text-center text-md-left"><p class="credit">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></p></div>--></div></div><!-- *** SIDEBAR END *** --><!-- *** DETAIL ***--><div class="col-md-8 col-lg-9 content-column white-background"><div class="small-navbar d-flex d-md-none"><button type="button" data-toggle="offcanvas" class="btn btn-outline-primary"> <i class="fa fa-align-left mr-2"></i>Menu</button><h1 class="small-navbar-heading"> <a href="index.html">Creative </a></h1></div><div class="row"><div class="col-xl-10"><div class="content-column-content"><h1>去旅游</h1><hr /><h3>部分景點</h3><div><div><div id="container"><div id="list" style="left: -1000px;"><img src="img/anyang/01.jpg" alt=""><img src="img/anyang/02.jpg" alt=""><img src="img/anyang/03.jpg" alt=""><img src="img/anyang/04.jpg" alt=""><img src="img/anyang/05.jpg" alt=""><img src="img/anyang/01.jpg" alt=""><img src="img/anyang/02.jpg" alt=""><img src="img/anyang/03.jpg" alt=""><img src="img/anyang/04.jpg" alt=""><img src="img/anyang/05.jpg" alt=""></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><em id="prev" class="arrow"><</em><em id="next" class="arrow">></em></div><hr /><div><p>  曹縣，隸屬于山東省菏澤市，古稱曹州，位于山東省西南部，魯豫兩省八縣交界處，南臨商丘、民權(quán)縣，北接菏澤、定陶區(qū)，東靠單縣、成武縣，西瀕東明、蘭考縣；總面積1969平方千米，轄5個街道辦事處，22鄉(xiāng)鎮(zhèn)； [39] 根據(jù)第七次人口普查數(shù)據(jù)，截至2020年11月1日零時，曹縣常住人口為1384282人。 [47] 明洪武四年（1371年），降曹州為曹縣，后復(fù)置曹州，曹縣此稱沿用至今。曾獲得“中國蘆筍之鄉(xiāng)”、“中國泡桐加工之鄉(xiāng)”、“中國食品工業(yè)百強縣”、“中國平原綠化先進縣”、中國首批規(guī)模化克隆牛實驗基地等榮譽。歷史上先后涌現(xiàn)了商朝宰相伊尹、戰(zhàn)國時期軍事家吳起、漢朝農(nóng)學家氾勝之等一批杰出人物。曹縣是山東省直接管理縣（市）財政體制改革試點 [1] ，國務(wù)院批準的對外開放縣；是東部企業(yè)向中西部地區(qū)梯次轉(zhuǎn)移的橋頭堡和承接帶，中原經(jīng)濟區(qū)東部縣市之一。</p></div><hr /><div><h3>地圖康康在哪</h3><iframe src="./map.html" width=100% height=600px frameborder="0"></iframe></div><div><hr /><h3>(MORE TODO)<h3></div></div></div></div></div></div></div></div></div>renwen.html【人文界面】
人文界面主要介紹家鄉(xiāng)的人文方面的信息，如下是效果圖：
?
?核心代碼如下：
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; }h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }h1 tt, h1 code { font-size: inherit; }h2 tt, h2 code { font-size: inherit; }h3 tt, h3 code { font-size: inherit; }h4 tt, h4 code { font-size: inherit; }h5 tt, h5 code { font-size: inherit; }h6 tt, h6 code { font-size: inherit; }h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid rgb(238, 238, 238); }h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid rgb(238, 238, 238); }h3 { font-size: 1.5em; line-height: 1.43; }h4 { font-size: 1.25em; }h5 { font-size: 1em; }h6 { font-size: 1em; color: rgb(119, 119, 119); }p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }li > ol, li > ul { margin: 0px; }hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }li p.first { display: inline-block; }ul, ol { padding-left: 30px; }ul:first-child, ol:first-child { margin-top: 0px; }ul:last-child, ol:last-child { margin-bottom: 0px; }blockquote { border-left: 4px solid rgb(223, 226, 229); padding: 0px 15px; color: rgb(119, 119, 119); }blockquote blockquote { padding-right: 0px; }table { padding: 0px; word-break: initial; }table tr { border-top: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }table tr th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; text-align: left; margin: 0px; padding: 6px 13px; }table tr td { border: 1px solid rgb(223, 226, 229); text-align: left; margin: 0px; padding: 6px 13px; }table tr th:first-child, table tr td:first-child { margin-top: 0px; }table tr th:last-child, table tr td:last-child { margin-bottom: 0px; }.CodeMirror-lines { padding-left: 4px; }.code-tooltip { box-shadow: rgba(0, 28, 36, 0.3) 0px 1px 1px 0px; border-top: 1px solid rgb(238, 242, 242); }.md-fences, code, tt { border: 1px solid rgb(231, 234, 237); background-color: rgb(248, 248, 248); border-radius: 3px; padding: 2px 4px 0px; font-size: 0.9em; }code { background-color: rgb(243, 244, 244); padding: 0px 2px; }.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; }.md-task-list-item > input { margin-left: -1.3em; }@media print {html { font-size: 13px; }table, pre { break-inside: avoid; }pre { word-wrap: break-word; }}.md-fences { background-color: rgb(248, 248, 248); }#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(119, 119, 119); margin-top: 0px !important; }.mathjax-block > .code-tooltip { bottom: 0.375rem; }.md-mathjax-midline { background: rgb(250, 250, 250); }#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }.md-image > .md-meta { border-radius: 3px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }.md-tag { color: rgb(167, 167, 167); opacity: 1; }.md-toc { margin-top: 20px; padding-bottom: 20px; }.sidebar-tabs { border-bottom: none; }#typora-quick-open { border: 1px solid rgb(221, 221, 221); background-color: rgb(248, 248, 248); }#typora-quick-open-item { background-color: rgb(250, 250, 250); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }header, .context-menu, .megamenu-content, footer { font-family: "Segoe UI", Arial, sans-serif; }.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }.md-lang { color: rgb(180, 101, 77); }.html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; }#md-notification .btn { border: 0px; }.dropdown-menu .divider { border-color: rgb(229, 229, 229); }.typora-export li, .typora-export p, .typora-export, .footnote-line {white-space: normal;} </style><div class='typora-export os-windows' ><div id='write' class = 'is-node'><h3><a name='header-n0' class='md-header-anchor '></a>文字博物館</h3><hr /><p><img src='md/md_pic/wenbo.jpg'></img></p><p><span> </span>中國文字博物館位于甲骨文的故鄉(xiāng)——河南省曹縣市，是經(jīng)國務(wù)院批準建設(shè)的集文物保護、陳列展示和科學研究為一體的國家級博物館，是中華漢字文化的科普中心，全國科普教育基地，愛國主義教育基地。</p><p>中國文字博物館基本陳列以世界文字為背景，以漢字為主干，以少數(shù)民族文字為重要組成部分，薈萃歷代中國文字樣本精華，講解中國文字的構(gòu)形特征和演化歷程。展覽以詳實的資料、嚴謹?shù)牟季帧⒖茖W的方法和現(xiàn)代化的展示手段充分展示中華民族一脈相承的文字、燦爛的文化和輝煌的文明，同時反映華夏文明與中國語言文字的研究成果，具有普及性和學術(shù)性雙重使命。 </p><p>中國文字博物館分兩期建設(shè)，已于2009年11月16日建成開館的一期工程占地81畝，建筑面積22700平方米，包括主體館、字坊、廣場等。已開工建設(shè)的續(xù)建工程占地175畝，建筑面積68300平方米，包括文字文化研究交流中心和文字文化演繹體驗中心等。</p><p> 續(xù)建工程完成后，中國文字博物館將成為功能完善、面向國內(nèi)外開放的知識型、信息型博物館，成為向全世界展示中華文化的窗口和國際性文化交流平臺。</p><h4><a name='header-n13' class='md-header-anchor '></a>館藏文物</h4><hr /><h5><a name='header-n21' class='md-header-anchor '></a>卜甲</h5><p><img src="md/md_pic/bujia.jpg"></p><p><span> </span>古代占卜用的龜甲。多用龜腹甲，也有用背甲的。先鉆鑿、再火灼。據(jù)灼燒之裂紋推測吉兇，決定行止。刻上卜辭、驗辭等內(nèi)容。現(xiàn)見卜甲多出土于殷墟，鄭州商代遺址、周原西周遺址中也有發(fā)現(xiàn)。該文物出土于殷墟花園莊東。殷墟花園莊東地甲骨，是中國社會科學院考古研究所于1991年秋在殷墟花園莊村東H3發(fā)掘的。該甲骨坑距花園莊村100余米，坑口距地表1.2米，近長方形。坑長2米、寬1米、深2.5米，保存完整。坑中出土甲骨1583片，其中有字甲骨為689片，以大片和完整的居多。這是繼1936年小屯村東北地YH127坑甲骨、1973年小屯南地甲骨發(fā)現(xiàn)以來，殷墟甲骨文的第三次重大發(fā)現(xiàn)，備受學術(shù)界關(guān)注，被評為1991年全國考古十大發(fā)現(xiàn)之一。</p><p> </p><h5><a name='header-n32' class='md-header-anchor '></a>賈伯壺</h5><p><img src="md/md_pic/jiabohu.jpg"></p><p> 2012年11月16日上午，中國文字博物館隆重舉行開館三周年國寶“賈伯壺”首展揭幕儀式。中國文字博物館開館三年以來，在上級文物主管部門的重視指導下，在社會各界的鼎力支持下，始終將文物征集工作做為立館根本，重中之重，常抓不懈，并取得了可喜的成績。尤其西周重器賈伯壺的征集入藏是開館至今征集到館的最為珍貴的文物，是我館文物征集工作進程中的一個重要里程碑，其入藏充實了我館館藏，填補了我館沒有成對青銅壺的空白。</p><p> </p><hr /><p> </p><h3><a name='header-n46' class='md-header-anchor '></a>殷墟</h3><hr /><p><span> </span>殷墟，位于中國歷史文化名城——曹縣市的西北郊，橫跨洹河南北兩岸。古稱“北蒙”，甲骨文卜辭中又稱為“大邑商”、“邑商”，是中國商代晚期的都城，也是中國歷史上第一個有文獻可考、并為甲骨文和考古發(fā)掘所證實的古代都城遺址，距今已有3300年的歷史。 </p><hr /><h5><a name='header-n54' class='md-header-anchor '></a>司母戊鼎</h5><p><img src="md/md_pic/simuwuding.jpg" /></p><p><span> </span>商代是中國青銅時代的第二個王朝，與世界上的其他文明古國相比較，殷墟的青銅文化有著鮮明的中國特色，以青銅禮器為基礎(chǔ)，發(fā)展成為一套以等級為核心的禮制制度，在中國延續(xù)了數(shù)千年，這在世界青銅文明中是絕無僅有的，體現(xiàn)出獨特的東方色彩。殷墟出土青銅器種類繁多，器形厚重，紋飾繁縟，鑄造工藝高超，達到了前所未有的水平。其中尤以王陵遺址出土的司母戊大鼎最負盛名，大鼎高達133厘米，器口長79.2厘米，重量達875公斤，它是至今世界上發(fā)現(xiàn)最大的青銅器，代表了中國古代青銅文化的最高水平。原件現(xiàn)藏中國國家博物館，此鼎造型龐大雄渾，紋飾精美細膩，通體以雷紋為底紋，饕餮紋、夔紋為主體裝飾，給人以穩(wěn)重、莊嚴而又神秘的感覺，是古代科技與藝術(shù)、雕塑與繪畫的完美結(jié)合，是中國青銅器文化中的瑰寶，美術(shù)史上的璀璨明珠。</p><hr /><h3><a name='header-n64' class='md-header-anchor '></a>(MORE TODO)</h3><p> </p></div></div>?contact.html【留言界面】
留言界面可以在沒有后端的支持下自由留言，通過這個可以學習前端狀態(tài)的保存，這里通過localStorage保存信息到本地
效果圖如下：
?適合大多數(shù)我的家鄉(xiāng)標題的作業(yè)，通過百度百科的簡介修改，即可完成該作業(yè)，免費獲取代碼關(guān)注公眾號（coding加油站）回復(fù)家鄉(xiāng)3領(lǐng)取。
?
總結(jié)
以上是生活随笔為你收集整理的免费HTML5期末大作业：我的家乡网站设计——可根据百度百科--曹县的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vijos 1002
- 下一篇： Linux 上部署 Seafile 9.