時間:2023-10-11 17:24:01 | 來源:網(wǎng)站運營
時間:2023-10-11 17:24:01 來源:網(wǎng)站運營
HTML5期末大作業(yè):家鄉(xiāng)網(wǎng)站設計——我的家鄉(xiāng)——浙江文化(4頁) HTML+CSS+JavaScript 家鄉(xiāng)主題HTM5網(wǎng)頁設計作業(yè)成品:常見網(wǎng)頁設計作業(yè)題材有個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他
等網(wǎng)頁設計題目,A+水平作業(yè)
, 可滿足大學生網(wǎng)頁大作業(yè)網(wǎng)頁設計需求, 喜歡的可以下載!
PC電腦端關注我們
1.網(wǎng)頁作品簡介
:HTML期末大學生網(wǎng)頁設計作業(yè) A+水平 ,喜歡的可以下載,文章頁支持手機PC響應式布局。2.網(wǎng)頁作品編輯
:作品下載后可使用任意HTML編輯軟件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
等任意HTML軟件編輯修改網(wǎng)頁)。3.網(wǎng)頁作品技術
:Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等,視頻、 音頻元素 、Flash,同時設計了logo(源文件),基本期末作業(yè)所需的知識點全覆蓋。<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! --> <title>魅力蓉城</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/index.css"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 --> <!-- 警告:通過 file:// 協(xié)議(就是直接將 html 頁面拖拽到瀏覽器中)訪問頁面時 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="index.html" target="_whitr">浙江杭州</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="scenery.html">美景介紹</a></li> <li><a href="food.html">特色美食</a></li> <li><a href="culture.html">地方文化</a></li> <li><a href="https://map.baidu.com/search/%E6%88%90%E9%83%BD%E5%B8%82/@11585451,3556256.75,12z?querytype=s&wd=%E6%88%90%E9%83%BD%E5%B8%82&c=75&provider=pc-aladin&pn=0&device_ratio=2&da_src=shareurl">地圖位置</a></li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">搜索更多</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <nav> <div class="jumbotron"> <div class="container"> <h1>魅力蓉城</h1> <p>杭州,一個來了就走不了的地方</p> <p> <a class="btn btn-primary btn-lg">了解更多</a> </p> </div> </div> </div> <div class="content"> <h1>魅力蓉城</h1> <hr> <!-- 輪播圖 --> <div id="myCarousel" class="carousel slide"> <!-- 輪播(Carousel)指標 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 輪播(Carousel)項目 --> <div class="carousel-inner"> <div class="item active"> <a href="scenery.html"> <img src="img/杭州風景1.jpg" alt="First slide"> </a> </div> <div class="item"> <a href="food.html"> <img src="img/杭州風景3.jpg" alt="Second slide"> </a> </div> <div class="item"> <a href="humanity.html"> <img src="img/杭州風景5.jpg" alt="Third slide"> </a> </div> </div> <!-- 輪播(Carousel)導航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- thumbnail--><div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="img/杭州文化.jpg" alt="242*200"> <div class="caption"> <h1>杭州文化!</h1> <p>了解關于杭州這個地方的特殊文化!</p> <a class="btn btn-primary" href="culture.html">了解更多</a> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/杭州美食1.jpg" alt="242*200"> <div class="caption"> <h1>杭州美食!</h1> <p>若能去杭州,先做好嘗遍各種美食的準備!</p> <a class="btn btn-primary"href="food.html">了解更多</a> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <img src="img/杭州風景5.jpg" alt="242*200"> <div class="caption"> <h1>杭州風景!</h1> <p>倚錦瑟,擊玉壺,吳中狂士游杭州,了解杭州的美景!</p> <a class="btn btn-primary" href="scenery.html">了解更多</a> </div> </div> </div><div class="col-md-3"> <div class="thumbnail"> <img src="img/杭州地圖.jpg" alt="242*200"> <div class="caption"> <h1>杭州位置!</h1> <p>點擊獲取杭州位置</p> <a class="btn btn-primary" href="https://map.baidu.com/search/%E6%88%90%E9%83%BD%E5%B8%82/@11585451,3556256.75,12z?querytype=s&wd=%E6%88%90%E9%83%BD%E5%B8%82&c=75&provider=pc-aladin&pn=0&device_ratio=2&da_src=shareurl">了解更多</a> </div> </div> </div> </div></div><footer class="footer"> <div class="container"> <div class="footerbar"> <div class="footerbar-header"> <p>魅力蓉城 天府之國</p> </div> <div class="footerbar-footer"> <p>2020@chendu</p> </div> </div> </div> </div></footer> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <script> $(function(){ $('#myCarousel').carousel({ interval:2000, }) $('#myCarousel li').click(function(){ var index=$(this).attr("data-slide-to") $('#myCarousel').carousel(parseInt(index)) }) }) </script> </body></html>
PC電腦端關注我們
web前端 零基礎-入門到高級 (視頻+源碼+開發(fā)軟件+學習資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站
HTML5期末考核大作業(yè)源碼
包含 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他
* 可滿足大學生網(wǎng)頁大作業(yè)網(wǎng)頁設計需求, 喜歡的可以下載! 關鍵詞:家鄉(xiāng),浙江,文化,作業(yè),設計
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。