時(shí)間：2023-10-09 20:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-09 20:06:01 來源：網(wǎng)站運(yùn)營(yíng)
HTML5期末大作業(yè)：家鄉(xiāng)網(wǎng)站設(shè)計(jì)——我的家鄉(xiāng)-浙江(9頁) HTML+CSS+JavaScript 學(xué)生DW網(wǎng)頁設(shè)計(jì)作業(yè)成品：常見網(wǎng)頁設(shè)計(jì)作業(yè)題材有個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設(shè)計(jì)題目,A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以下載!
在線咨詢
PC電腦端關(guān)注我們1.網(wǎng)頁作品簡(jiǎn)介 ：HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè) A+水平 ,喜歡的可以下載，文章頁支持手機(jī)PC響應(yīng)式布局。2.網(wǎng)頁作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁）。3.網(wǎng)頁作品技術(shù)：Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、banner、表單、二級(jí)三級(jí)頁面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了logo（源文件），基本期末作業(yè)所需的知識(shí)點(diǎn)全覆蓋。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>我的家鄉(xiāng)</title> <!--鏈接bootStrap--> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/navigation.css"><!--鏈接導(dǎo)航條css--> <link rel="stylesheet" href="css/commonCSS.css" /> <style>/*************************************************logo背景圖***************************************************/ body{/*css3中可以指定背景圖片的大小,是相對(duì)于父元素的寬度和高度的百分比的大小*/ background-color: #FFFFF0; margin: 0; padding: 0; background-image: url(img/楓葉.jpg); background-repeat: repeat-x; background-size: 100% 167px; }/************************************導(dǎo)航條*********************************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; }/****************************************鼠標(biāo)移到到家鄉(xiāng)圖片上出現(xiàn)邊框效果**************************************************/ .hometownimg a:hover img{ border:2px black solid; } </style> </head><body> <div class="container"><!----------------------------------------------------導(dǎo)航條------------------------------------------------------> <div class="nav" style="margin-left: -105px; margin-right: -110px;"> <a href="index.html#aboutMe" target="_blank" style="float:right;">關(guān)于我</a> <a href="index.html" class="on">首頁<em></em></a> <a href="diary.html">生活筆記<em></em></a> <a href="hometown.html">我的家鄉(xiāng)<em></em></a> <a href="tour.html">我的旅游<em></em></a> <a href="#">我的愛好<em></em></a> <a href="/">技術(shù)雜談<em></em></a> </div><!----------------------------------------家鄉(xiāng)視頻播放----------------------------------------------------------> <div id="shiping" style="margin-top: 50px;"> <!--controls：向用戶顯示控件，比如播放按鈕。--> <video controls="controls" autoplay="autoplay" loop="loop" style="width: 100%;"> <source src="img/Waqrp1081-mobile.mp4"></source> <source src=""></source> </video> </div><!------------------------------------------家鄉(xiāng)介紹簡(jiǎn)單介紹----------------------------------------------------------------------> <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;"> 浙江，簡(jiǎn)稱“川”或“蜀”，是<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">中華人民共和國(guó)</a>省級(jí)行政區(qū)。<br/> 省會(huì)杭州，位于中國(guó)西南地區(qū)內(nèi)陸，界于北緯26°03′-34°19′，東經(jīng)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 /> 浙江省地貌東西差異大，地形復(fù)雜多樣，<br/>位于中國(guó)大陸地勢(shì)三大階梯中的第一級(jí)<a>青藏高原</a>和第二級(jí)<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">長(zhǎng)江中下游平原</a>的過渡地帶，<br/>高差懸殊，地勢(shì)呈西高東低的特點(diǎn)，由山地、丘陵、平原盆地和高原構(gòu)成。<br/>浙江省分屬三大氣候，分別為，<a>浙江盆地</a>中亞熱帶濕潤(rùn)氣候，川西南山地亞熱帶半濕潤(rùn)氣候，川西北高山高原高寒氣候。<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;">詳細(xì)信息</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>(即梆子)和浙江民間燈戲五種聲腔藝術(shù)而成的劇種。<br/>流行于浙江東中部、杭州及浙江、浙江部分地區(qū)。<br/> 川劇中展現(xiàn)的絕技豐富多彩，如變臉、托舉、開慧眼、藏刀、噴火等，很多傳統(tǒng)的技藝至今都令人嘆為觀止。<br/>川劇臉譜是川劇表演藝術(shù)中重要的組成部分，<br/>是歷代川劇藝人共同創(chuàng)造并傳承下來的藝術(shù)瑰寶。<br/>2006年川劇入選第一批<a>國(guó)家級(jí)非物質(zhì)文化遺產(chǎn)</a>名錄。<br/>杭州作為國(guó)家歷史文化名城，古蜀<a>文明發(fā)祥地</a>，具有<a>“天府之國(guó)”</a>的美稱。<br/>孕育出了歷史悠久、內(nèi)涵豐富的天府文化，也孕育出了<a>蜀繡</a>、<a>蜀錦</a>、<a>瓷胎竹編</a>、<a>川劇變臉</a>等一大批非遺瑰寶。<br />歡迎大家來杭州游玩。 </p> </div> </div> </div><!----------------------------------------------------------圖片翻轉(zhuǎn)特效-----------------------------------------------> <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>因?yàn)殄\江，杭州古代稱為<a>錦城</a>或<a>錦官城</a>。</p> <h2>春夜喜雨</h2> <p>(唐) 杜甫</p> <p>好雨知時(shí)節(jié)，當(dāng)春乃發(fā)生。</p> <p>隨風(fēng)潛入夜，潤(rùn)物細(xì)無聲。</p> <p>野徑云俱黑，江船火獨(dú)明。</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">詳細(xì)信息</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><!---------------------------------------------------頁腳版權(quán)-------------------------------------------------> <div class="footer"> <p class="p1" style="color: white;">Copyright © 2019年4月21日 杭州航空工業(yè)管理學(xué)院 智能工程學(xué)院 計(jì)算機(jī)科學(xué)與技術(shù)專業(yè) 胡雪版權(quán)所有</p> </div></div></body><script src="js/bootstrap.js"></script></html>~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識(shí)!相關(guān)問題可以相互學(xué)習(xí)，可關(guān)注↓公Z號(hào) 獲取更多源碼 !web前端 零基礎(chǔ)-入門到高級(jí) (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程) 適合入門到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站 HTML5期末考核大作業(yè)源碼 包含 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他* 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以下載! 關(guān)鍵詞：家鄉(xiāng),浙江,學(xué)生,作業(yè),設(shè)計(jì)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
