HTML5期末大作业：家乡网站设计——我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品

文章目录

HTML5期末大作业：家乡网站设计——我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码

一、作品展示

二、文件目录

三、代码实现


<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><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:// 协议（就是直接将 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 插件。你也可以根据需要只加载单个插件。 --><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>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号获取更多源码

学生DW静态网页设计我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品相关推荐

html简单个人网页制作——我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品
HTML5期末大作业:家乡网站设计--我的家乡--四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
HTML5期末大作业：关于我的家乡——四川文化(4页) HTML+CSS+JavaScript
HTML5期末大作业:关于我的家乡--四川文化(4页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 1.临近期末, 你还在为HT ...
HTML+CSS静态页面网页设计作业——我的家乡-四川成都(4页) HTML+CSS+JavaScript
HTML5期末大作业:我的家乡网站设计--我的家乡-四川成都(4页) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
html简单个人网页制作 div+css静态网页设计——我的家乡-金堂(9页) HTML+CSS+JavaScript 关于家乡的HTML网页设计-----金堂
HTML5期末大作业:老家网站设计--我的家乡-金堂(9页) HTML+CSS+JavaScript 关于家乡的HTML网页设计-----金堂常见网页设计作业题材有个人. 美食. 公司. 学校. ...
HTML5期末大作业：关于家乡景点介绍网页设计-------我的家乡金堂(9页) HTML+CSS+JavaScript
HTML5期末大作业:关于家乡景点介绍网页设计-------我的家乡金堂(9页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 1 ...
HTML大期末作业: 关于家乡介绍HTML网页设计——我的家乡鉴江(5页) HTML+CSS+JavaScript...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
HTML5期末大作业：日式料理网站设计——简洁日式料理餐饮(4页) HTML+CSS+JavaScript 父亲美食HTM5网页设计作业成品
HTML5期末大作业:日式料理网站设计--简洁日式料理餐饮(4页) HTML+CSS+JavaScript 父亲美食HTM5网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
静态HTML网页设计作品——斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweav
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweave ...
静态HTML网页设计作品我的家乡-获奖第二(6页) HTML+CSS+JavaScript 关于我的家乡HTML网页设计--
文章目录一.作品展示二.文件目录三.代码实现四.获取更多源码一.作品展示二.文件目录三.代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

学生DW静态网页设计我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品

HTML5期末大作业：家乡网站设计——我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品

文章目录

一、作品展示

二、文件目录

三、代码实现

四、获取更多源码

学生DW静态网页设计我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品相关推荐

最新文章

热门文章