HTML期末作业-旅游网页作业Html+css+Bootstarp
生活随笔
收集整理的這篇文章主要介紹了
HTML期末作业-旅游网页作业Html+css+Bootstarp
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML期末作業(yè)-旅游網(wǎng)頁作業(yè)Html+css+JavaScript+Bootstarp，共有8個頁面
部分網(wǎng)頁截圖?
?
?
網(wǎng)頁源碼?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>荷城-貴港</title><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"><link rel="stylesheet" href="css/index.css"><!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><script src="js/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="js/bootstrap/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="js/bootstrap/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap/bootstrap.css"> </head> <body> <!--首頁導(dǎo)航--> <div class="top"> <nav class=" navbar navbar-expand-sm navbar-dark "><div class=""><a class="navbar-brand" href="#"><img class="img-fluid" src="./images/index.png"><p class="top-logo">荷城-貴港</p></a></div><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav "><li class="nav-item"><a class="nav-link " href="index.html">首頁</a></li><li class="nav-item"><a class="nav-link" href="html/jianjie.html">簡介</a></li><li class="nav-item"><a class="nav-link" href="html/list-new.html">新聞動態(tài)</a></li><li class="nav-item"><a class="nav-link" href="html/techan.html">特色美食</a></li><li class="nav-item"><a class="nav-link" href="html/jingdian.html">旅游景點</a></li></ul></div> </nav> </div> <!--主要內(nèi)容--> <div class="container d-biankuang" style="margin-top:30px"><div class="row row-jianjie"><div class="col-sm-12 d-biaoti"><h3>簡介</h3></div><hr class="row-hr"><div class="col-sm-7"><div id="demo" class="carousel slide" data-ride="carousel"><!-- 指示符 --><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li></ul><!-- 輪播圖片 --><div class="carousel-inner"><div class="carousel-item active"><img src="images/001.jpg" alt=""></div><div class="carousel-item"><img src="images/002.jpg" alt=""></div><div class="carousel-item"><img src="images/003.jpg" alt=""></div><div class="carousel-item"><img src="images/004.jpg" alt=""></div></div><!-- 左右切換按鈕 --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a></div></div><!--<div class="col-sm-5"><div class=""><p>貴港，位于廣西壯族自治區(qū)東南部，西江流域中游，潯郁平原中部，是大西南出海通道的重要門戶，中緬油氣管道天然氣管道終點。貴港港為中國西部地區(qū)內(nèi)河第一大港，國家智慧城市試點城市，西江黃金水道流經(jīng)市境，東臨梧州、南臨玉林和欽州、西接南寧、北鄰來賓。</p><p>1995年10月經(jīng)國務(wù)院批準(zhǔn)升為地級市，轄港北區(qū)、港南區(qū)、覃塘區(qū)和平南縣，代管縣級桂平市，總面積10606平方千米。特產(chǎn)有菠蘿蜜、貴港蓮藕、龍眼、桂圓干、覃塘毛尖茶、羅漢果等。</p><p>貴港市因城里多種植荷花而別稱荷城，是一座具有兩千多年歷史的古郡新城，也是一座充滿生機的新興內(nèi)河港口城市。貴港市是國家一類對外開放口岸、全國內(nèi)河港口十強、中國西部地區(qū)最大內(nèi)河港口、國家承接產(chǎn)業(yè)專業(yè)示范區(qū)、全國雙擁模范城、全國群眾文化和體育先進(jìn)城市、廣西壯族自治區(qū)園林城市、廣西壯族自治區(qū)愛國衛(wèi)生先進(jìn)城市、廣西壯族自治區(qū)文明城市...</p></div></div>--><div class="col-sm-5"><div class="row"><div class="col-sm-12 list-lanmu"><h5 class="col-new-h5">新聞動態(tài)</h5><a href="html/list-new.html">更多</a></div><hr class="row-hr"><div class="col-sm-12 list-tite"><a href="html/new.html"><h7 class="row-hr-h7">2020年廣東省成人學(xué)士學(xué)位外語考試成績明天公布！</h7><p class="row-hr-p">6.12</p></a></div><div class="col-sm-12 list-tite"><a href="html/new.html"><h7 class="row-hr-h7">2020年廣東省成人學(xué)士學(xué)位外語考試成績明天公布！</h7><p class="row-hr-p">6.12</p></a></div><div class="col-sm-12 list-tite"><a href="html/new.html"><h7 class="row-hr-h7">2020年廣東省成人學(xué)士學(xué)位外語考試成績明天公布！</h7><p class="row-hr-p">6.12</p></a></div><hr class="row-hr"></div></div></div><div class="row row-jianjie"><div class="col-md-12 d-biaoti"><h3>特產(chǎn)美食</h3></div><hr class="row-hr"><div class="col-ms-3"><div class="tu"><a href="html/lianou.html"><img src="images/009.jpg">蓮藕</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/maojiancha.html"><img src="images/010.jpg">覃塘毛尖茶</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/tianluo.html"><img src="images/011.jpg" >田螺湯</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/guiping.html"><img src="images/012.jpg" >桂平狗肉</a></div></div></div><div class="row"><div class="colo-sm-12"><div class="d-biaoti"><h3>簡介</h3></div></div><hr class="row-hr"><div class="col-ms-3"><div class="tu"><a href="html/nanshansi.html"><img src="images/004.jpg" width="250" height="220">南山寺</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/xingshiji.html"><img src="images/016.jpg" width="250" height="220">新世紀(jì)廣場</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/maochaojiang.html"><img src="images/014.jpg" width="250" height="220">馬草江生態(tài)公園</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/tianpingshan.html"><img src="images/015.jpg" width="250" height="220">平天山國家森林公園</a></div></div></div></div> </div><!--頁腳--> <div class="container-fluid foot"><div class="row text-center " ><div class="foot-banquan" ><p>GuiGang @ 2021-09-03</p></div></div> </div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的HTML期末作业-旅游网页作业Html+css+Bootstarp的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android用户登录volley,如何
- 下一篇： HTML期末网页作业-仿QQ官网QQ注册