HTML期末作业-旅游网页作业Html+css+Bootstarp
2024-05-24 05:47:02
HTML期末作业-旅游网页作业Html+css+JavaScript+Bootstarp，共有8个页面
部分网页截图
网页源码
<!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文件。务必在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>
<!--首页导航-->
<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">新闻动态</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>
<!--主要内容-->
<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="data:images/001.jpg" alt=""></div><div class="carousel-item"><img src="data:images/002.jpg" alt=""></div><div class="carousel-item"><img src="data:images/003.jpg" alt=""></div><div class="carousel-item"><img src="data: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>贵港，位于广西壮族自治区东南部，西江流域中游，浔郁平原中部，是大西南出海通道的重要门户，中缅油气管道天然气管道终点。贵港港为中国西部地区内河第一大港，国家智慧城市试点城市，西江黄金水道流经市境，东临梧州、南临玉林和钦州、西接南宁、北邻来宾。</p><p>1995年10月经国务院批准升为地级市，辖港北区、港南区、覃塘区和平南县，代管县级桂平市，总面积10606平方千米。特产有菠萝蜜、贵港莲藕、龙眼、桂圆干、覃塘毛尖茶、罗汉果等。</p><p>贵港市因城里多种植荷花而别称荷城，是一座具有两千多年历史的古郡新城，也是一座充满生机的新兴内河港口城市。贵港市是国家一类对外开放口岸、全国内河港口十强、中国西部地区最大内河港口、国家承接产业专业示范区、全国双拥模范城、全国群众文化和体育先进城市、广西壮族自治区园林城市、广西壮族自治区爱国卫生先进城市、广西壮族自治区文明城市...</p></div></div>--><div class="col-sm-5"><div class="row"><div class="col-sm-12 list-lanmu"><h5 class="col-new-h5">新闻动态</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年广东省成人学士学位外语考试成绩明天公布！</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年广东省成人学士学位外语考试成绩明天公布！</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年广东省成人学士学位外语考试成绩明天公布！</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>特产美食</h3></div><hr class="row-hr"><div class="col-ms-3"><div class="tu"><a href="html/lianou.html"><img src="data:images/009.jpg">莲藕</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/maojiancha.html"><img src="data:images/010.jpg">覃塘毛尖茶</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/tianluo.html"><img src="data:images/011.jpg" >田螺汤</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/guiping.html"><img src="data: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="data: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="data:images/016.jpg" width="250" height="220">新世纪广场</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/maochaojiang.html"><img src="data:images/014.jpg" width="250" height="220">马草江生态公园</a></div></div><div class="col-ms-3"><div class="tu"><a href="html/tianpingshan.html"><img src="data: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>HTML期末作业-旅游网页作业Html+css+Bootstarp相关推荐
- HTML网页设计期末课程大作业~旅游住宿酒店的HTML网页设计(14页) ~学生网页设计作业源码 旅游网页代码 学生网页设计与制作期末作业下载 DW旅游网页作业代码下载
旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- HTML5期末大作业：美食餐厅网站设计——一千一夜美食餐厅(11页) 食品网页设计作业,海鲜网页制作作业, 大众食品学生网页作业, 美食网页作业成品, 食物网页作业模板 ,甜品网页作业定制
HTML5期末大作业:美食餐厅网站设计--一千一夜美食餐厅(11页) 食品网页设计作业,海鲜网页制作作业, 大众食品学生网页作业, 美食网页作业成品, 食物网页作业模板 ,甜品网页作业定制 常见网页设 ...
- 【百套源码】HTML5期末大作业 - 各类网页作业源码合集
文章目录 持续更新文章记录 1️⃣ 个人介绍类相关源码 1.1 html实现个人简历 1.2 科技风个人简历 1.3 网站风个人简历 1.4 多种风格个人主页模板 1.5 html好看的个人简历明星版 ...
- HTML期末作业-旅游网页
旅游网页HTML+CSS+JavaScript 部分网页截图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 【源码分享】响应式风景旅游网页设计-HTML+CSS+JavaScript
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- HTML5期末大作业：汽车网站设计——汽车介绍(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生汽车网页作业, 汽车网页作业成品, 汽车网页作业模板
HTML5期末大作业:汽车网站设计--汽车介绍(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 ...
- HTML期末学生大作业-奶茶网页作业html+css+javascript
html网页制作期末大作业--奶茶网站html+css+javascript 5个页面适用学生作业 课程设计奶茶.期末作业奶茶网.毕业设计奶茶网页 部分网页截图 部分网页源码 <!DOCTYP ...
- HTML期末学生大作业-乒乓球网页作业html+css+javascript
一.部分网页截图 二.部分源代码 <div id="cbx-aboutus" class="cbx-section cbx-aboutus">< ...
- HTML期末学生大作业-节日网页作业html+css+javascript
最新文章
- 《Framework Design Guidelines 2nd Edition》推荐
- Sublime Text 2
- 【LeetCode从零单排】No221.Maximal Square
- 1.10 比较两个数组是否相等（equals()）
- CSS——icon 全解
- String类型的算法题（获取子串在主串中出现的次数）和（获取两个字符串中最大相同子串）-Java代码实现
- 设置python的中文字体显示
- SpringBoot-拦截器、过滤器、监听器
- 【C/C++】sizeof(结构体)的计算
- 古人从瀑布中看到彩虹，怎么想的？
- 前端逼死强迫症系列之javascript
- idea在mac版怎么配置svn_IntelliJ Idea 集成svn 和使用
- 中华石杉Java面试突击第一季笔记三（分布式缓存）
- 八爪鱼抓取html,网页数据爬取方法详解 - 八爪鱼采集器
- 手机刷的面具是什么_小米9刷Magisk(面具)详细教程
- 【STM32f10】MDK编译报错：Undefined symbol TIM3_PWM_Init (referred from main.o)
- 女性睾酮水平高（High Testosterone Levels in Women）
- 斯坦福编程方法学作业讲解3---Karel机器人三大定律（上）
- 在虚拟机中开启VT功能
- 支付宝SDK集成服务端(java)