300字范文 > 学生DW静态网页设计我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网

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

时间：2018-07-20 08:40:35

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"><title>魅力蓉城</title><link href="/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/index.css"></head><body><nav class="navbar navbar-default"><div class="container-fluid"><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><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="/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></div></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"><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> <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><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><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="/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>@chendu</p></div></div></div></div></footer><script src="/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="/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>