當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

html静态页面作业家乡网站设计—我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品

發布時間：2024/8/1 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 html静态页面作业家乡网站设计—我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML5期末大作業：家鄉網站設計——我的家鄉-四川(9頁) HTML+CSS+JavaScript 學生DW網頁設計作業成品

常見網頁設計作業題材有個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

作品介紹

1.網頁作品簡介 ：HTML期末大學生網頁設計作業 A+水平 ,喜歡的可以下載，文章頁支持手機PC響應式布局。

2.網頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網頁）。

3.網頁作品技術：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻、音頻元素、Flash，同時設計了logo（源文件），基本期末作業所需的知識點全覆蓋。

文章目錄

HTML5期末大作業：家鄉網站設計——我的家鄉-四川(9頁) HTML+CSS+JavaScript 學生DW網頁設計作業成品
作品介紹
一、作品展示
二、文件目錄
三、代碼實現
五、學習資料
六、更多源碼

一、作品展示

二、文件目錄

三、代碼實現

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>我的家鄉</title><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="css/navigation.css"><link rel="stylesheet" href="css/commonCSS.css" /><style> /*************************************************logo背景圖***************************************************/body{/*css3中可以指定背景圖片的大小,是相對于父元素的寬度和高度的百分比的大小*/background-color: #FFFFF0;margin: 0;padding: 0;background-image: url(img/楓葉.jpg);background-repeat: repeat-x;background-size: 100% 167px;} /************************************導航條*********************************8***********************/.nav{margin-top:167px ;}#shiping{width:800px;margin: 0 auto;}*, *:before, *:after {box-sizing: border-box;}.content {display: flex;margin: 0 auto;justify-content: center;align-items: center;flex-wrap: wrap;max-width: 1000px;}.heading {width: 100%;margin-left: 1rem;font-weight: 900;font-size: 1.618rem;text-transform: uppercase;letter-spacing: .1ch;line-height: 1;padding-bottom: .5em;margin-bottom: 1rem;position: relative;}.heading:after {display: block;content: '';position: absolute;width: 60px;height: 4px;background: linear-gradient(135deg, #1a9be6, #1a57e6);bottom: 0;}.description {/*???*/width: 100%;margin-top: 0;margin-left: 1rem;margin-bottom: 3rem;}.card {color: inherit;cursor: pointer;width: calc(33% - 2rem);min-width: calc(33% - 2rem);height: 400px;min-height: 400px;perspective: 1000px;margin: 1rem;position: relative;}@media screen and (max-width: 800px) {.card {width: calc(50% - 2rem);}}@media screen and (max-width: 500px) {.card {width: 100%;}}.front,.back {display: flex;border-radius: 6px;background-position: center;background-size: cover;text-align: center;justify-content: center;align-items: center;position: absolute;height: 100%;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;transform-style: preserve-3d;transition: ease-in-out 600ms;}.front {background-size: cover;padding: 2rem;font-size: 1.618rem;font-weight: 600;color: #fff;overflow: hidden;font-family: Poppins, sans-serif;}.front:before {position: absolute;display: block;content: '';top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, #1a9be6, #1a57e6);opacity: .25;z-index: -1;}.card:hover .front {transform: rotateY(180deg);}.card:nth-child(even):hover .front {transform: rotateY(-180deg);}.back {background: #fff;transform: rotateY(-180deg);padding: 0 2em;}.card:hover .back {transform: rotateY(0deg);}.card:nth-child(even) .back {transform: rotateY(180deg);}.card:nth-child(even):hover .back {transform: rotateY(0deg);}.button {transform: translateZ(40px);cursor: pointer;-webkit-backface-visibility: hidden;backface-visibility: hidden;font-weight: bold;color: #fff;padding: .5em 1em;border-radius: 100px;font: inherit;background: linear-gradient(135deg, #1a9be6, #1a57e6);border: none;position: relative;transform-style: preserve-3d;transition: 300ms ease;}.button:before {transition: 300ms ease;position: absolute;display: block;content: '';transform: translateZ(-40px);-webkit-backface-visibility: hidden;backface-visibility: hidden;height: calc(100% - 20px);width: calc(100% - 20px);border-radius: 100px;left: 10px;top: 16px;box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);background-color: rgba(26, 87, 230, 0.25);}.button:hover {transform: translateZ(55px);}.button:hover:before {transform: translateZ(-55px);}.button:active {transform: translateZ(20px);}.button:active:before {transform: translateZ(-20px);top: 12px;}div.img a:hover img{border: 1px solid black;}/****************************************鼠標移到到家鄉圖片上出現邊框效果**************************************************/.hometownimg a:hover img{border:2px black solid;}</style></head> <body><div class="container"> <div class="nav" style="margin-left: -105px; margin-right: -110px;"><a href="index.html#aboutMe" target="_blank" style="float:right;">關于我</a><a href="index.html" class="on">首頁<em></em></a><a href="diary.html">生活筆記<em></em></a><a href="hometown.html">我的家鄉<em></em></a><a href="tour.html">我的旅游<em></em></a><a href="#">我的愛好<em></em></a><a href="/">技術雜談<em></em></a></div><div id="shiping" style="margin-top: 50px;"><video controls="controls" autoplay="autoplay" loop="loop" style="width: 100%;"><source src="img/Waqrp1081-mobile.mp4"></source><source src=""></source></video></div><div class="" style="background-color: #FFFFF0; margin-top: 50px;"><div class=""><div class=""><h2 style="text-align: center;">四川</h2><p style="text-align: center; line-height: 30px;">     四川，簡稱“川”或“蜀”，是<a href="https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD/106554">中華人民共和國</a>省級行政區。<br/> 省會成都，位于中國西南地區內陸，界于北緯26°03′-34°19′，東經92°21′-108°12′之間，<br>東連<a href="https://baike.baidu.com/item/%E9%87%8D%E5%BA%86/23586?fr=aladdin">重慶</a>，<br/>南鄰<a>云南</a>、<a>貴州</a>，<br/>西接西藏，<br>北界陜西、甘肅、青海，<br/>四川省總面積48.6萬平方千米。 <br />     四川省地貌東西差異大，地形復雜多樣，<br/>位于中國大陸地勢三大階梯中的第一級<a>青藏高原</a>和第二級<a href="https://baike.baidu.com/item/%E9%95%BF%E6%B1%9F%E4%B8%AD%E4%B8%8B%E6%B8%B8%E5%B9%B3%E5%8E%9F/345194">長江中下游平原</a>的過渡地帶，<br/>高差懸殊，地勢呈西高東低的特點，由山地、丘陵、平原盆地和高原構成。<br/>四川省分屬三大氣候，分別為，<a>四川盆地</a>中亞熱帶濕潤氣候，川西南山地亞熱帶半濕潤氣候，川西北高山高原高寒氣候。<br />     <br /></p><p><a class="btn btn-primary btn-large" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569?fr=aladdin" style="margin-left: 500px;">詳細信息</a></p></div></div></div> <div style="margin-top: 50px;"><h2 style="text-align: center;">成都美食與文化</h2><div class="hometownimg" style="margin-left: -20px; margin-right: -20px; margin-top: 30px;"><a href="#"><img src="img/噴火1.jpg" /></a><a><img src="img/變臉.jpg" style="margin-left:12px; margin-right: -10px;"/></a><a><img src="img/變臉2.jpg" style="margin-left: 24px;"/></a><a><img src="img/火鍋2.jpg" style="margin-top: 15px;"/></a><a><img src="img/串串.jpg" style="margin-top: 15px; margin-left: 12px;"/></a><a><img src="img/血旺.jpg" style="margin-top: 15px; margin-left: 12px;" /></a></div> </div><div class="" style="background-color: #FFFFF0; margin-top: 50px;"><div class=""><div class=""><p style="text-align: center; line-height: 30px;"> 川劇是融匯<a>高腔</a>、<a>昆曲</a>、<a>胡琴</a>(即皮黃)、<a>彈戲</a>(即梆子)和四川民間燈戲五種聲腔藝術而成的劇種。<br/>流行于四川東中部、重慶及貴州、云南部分地區。<br/> 川劇中展現的絕技豐富多彩，如變臉、托舉、開慧眼、藏刀、噴火等，很多傳統的技藝至今都令人嘆為觀止。<br/>川劇臉譜是川劇表演藝術中重要的組成部分，<br/>是歷代川劇藝人共同創造并傳承下來的藝術瑰寶。<br/> 2006年川劇入選第一批<a>國家級非物質文化遺產</a>名錄。<br/>成都作為國家歷史文化名城，古蜀<a>文明發祥地</a>，具有<a>“天府之國”</a>的美稱。<br/>孕育出了歷史悠久、內涵豐富的天府文化，也孕育出了<a>蜀繡</a>、<a>蜀錦</a>、<a>瓷胎竹編</a>、<a>川劇變臉</a>等一大批非遺瑰寶。<br />歡迎大家來成都游玩。</p></div></div></div><div class="content" style="margin-top: 50px;"><a class="card" href="#!"><div class="front" style="background-image: url(img/迎春花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/小花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/梅花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/熊貓.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/梨花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a><a class="card" href="#!"><div class="front" style="background-image: url(img/油菜花.jpg)"></div><div class="back"><div><p>Consectetur adipisicing elit. Possimus, praesentium?</p><p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p><button class="button">Click Here</button></div></div></a></div><div class="" style="background-color: #FFFFF0;text-align: center;margin-top: 50px;margin-bottom: 20px;"><div class=""><div class=""><h2>成都</h2><div style="line-height: 30px;"><p>如果說<a>杜牧</a>是揚州的代言人，<a>白居易</a>和<a>蘇東坡</a>是杭州的代言人，那么，<a>杜甫</a>毫無疑問是成都的代言人。</p><p>揚州之美，美在月色。</p><p>杭州之美，美在西湖。</p><p>成都之美，美在錦江。</p><p>因為錦江，成都古代稱為<a>錦城</a>或<a>錦官城</a>。</p><h2>春夜喜雨</h2><p>(唐) 杜甫</p><p>好雨知時節，當春乃發生。</p><p>隨風潛入夜，潤物細無聲。</p><p>野徑云俱黑，江船火獨明。</p><p>曉看紅濕處，花重<a>錦官城</a>。</p><p><a class="btn btn-primary btn-large" href="https://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473">詳細信息</a></p></div></div></div></div><div class="row clearfix" style="margin-left: 410px; margin-top: 20px;" ><div class="col-md-12 column" ><ul class="pagination"><li><a href="#">Prev</a></li><li><a href="index.html">1</a></li><li><a href="diary.html">2</a></li><li><a href="hometown.html">3</a></li><li><a href="tour.html">4</a></li><li><a href="#">Next</a></li></ul></div></div><div class="footer"><p class="p1" style="color: white;">Copyright © 2019年4月21日鄭州航空工業管理學院智能工程學院計算機科學與技術專業胡雪版權所有</p></div></div></body> <script src="js/bootstrap.js"></script> </html>

五、學習資料

web前端零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站

六、更多源碼

HTML5期末考核大作業源碼* 包含個人、美食、公司、學校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、明星、服裝、體育、化妝品、物流、環保、書籍、婚紗、軍事、游戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

總結

以上是生活随笔為你收集整理的html静态页面作业家乡网站设计—我的家乡-四川(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： html本地修改浏览器自动更新,更改ht
下一篇： HTML5期末大作业：我的家乡网站设计—