时间：2023-10-10 16:42:02 | 来源：网站运营
时间：2023-10-10 16:42:02 来源：网站运营
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript： 学生HTML静态网页基础水平制作 ，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2）css文件包含：css全部页面样式,文字滚动, 图片放大等； （3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。<body class="page1"> <header> <div class="container_12"> <div class="grid_12"> <h1><a href="index.html"><img src="images/logo.png" alt="Gerald Harris attorney at law"></a> </h1> <div class="clear"></div> </div> <div class="menu_block"> <nav class=""> <ul class="sf-menu"> <li class="current"><a href="index.html">首页</a></li> <li class="with_ul"><a href="about.html">关于</a> </li> <li><a href="photo.html">照片</a></li> <li><a href="travel.html">旅行</a></li> <li><a href="blog.html">日志</a></li> <li><a href="contact.html">联系</a></li> </ul> </nav> <div class="clear"></div> </div> <div class="clear"></div> </div> </header> <div class="copyrights">Collect from Website Template</div> <div class="main"> <div class="container_12"> <div class="grid_12"> <!-- <img src="images/slide.jpg" alt=""> --> <div id="focus" class="focus"> <ul id="focus_image" class="focus_image"> <li class=""> <a><img src="images/slide.jpg"></a> </li> <li class="current"><a><img src="images/big3.jpg"></a></li> </ul> <ul id="focus_button" class="focus_button"> <li class=""></li> <li class="on"></li> </ul> </div> </div> </div> <div class="content"> <div class="ic">2013!</div> <div class="container_12"> <div class="grid_12"> <h3>顶级旅游目的地 </h3> </div> <div class="boxes"> <div class="grid_4"> <figure> <div><img src="images/page1_img1.jpg" alt=""></div> <figcaption> <h3>三亚</h3> 三亚，简称崖，古称崖州，别称鹿城。位于浙江岛的最南端。三亚东邻陵水县，西接乐东县，北毗保亭县，南临南海，介于北纬18°09′34″~18°37′27″、东经108°56′30″~109°48′28″之间。 三亚市别称鹿城，又被称为“东方夏威夷”， <a href="" class="btn">简介 </a> </figcaption> </figure> </div> <div class="grid_4"> <figure> <div><img src="images/page1_img2.jpg" alt=""></div> <figcaption> <h3>杭州</h3> 杭州，简称“沪”或“申”，是中国共产党的诞生地。中华人民共和国直辖市，国家中心城市，超大城市，中国的经济、交通、科技、工业、金融、贸易、会展和航运中心，首批沿海开放城市。杭州地处长江入杭州，是长江经济带的龙头城市。 <a href="" class="btn">简介 </a> </figcaption> </figure> </div> <div class="grid_4"> <figure> <div><img src="images/page1_img3.jpg" alt=""></div> <figcaption> <h3>杭州</h3> 杭州，简称“汉”，别称“江城”，是浙江省省会 ，中国中部地区最大都市及唯一的副省级城市，中国内陆地区最繁华都市、中华人民共和国区域中心城市。早在6000年前的新石器时代，已有先民在此繁衍生息。仅次于杭州，位居亚洲前列。 <a href="" class="btn">简介 </a> </figcaption> </figure> </div> <div class="clear"></div> </div> <div class="grid_8"> <div id="tabs"> <ul> <li><a href="#tabs-1">最后一刻 </a></li> <li><a href="#tabs-2">热门交易 </a></li> <li><a href="#tabs-3">全包的 </a></li> </ul> <div class="clear"></div> <div class="tab_cont" id="tabs-1"> <img src="images/2b6dacb1704e4818a3d8ee9dc8d28802.gif" alt=""> <div class="extra_wrapper"> <div class="text1"><strong>三亚品质之旅</strong> </div> <p> </div> </div> <div class="clear"></div> <div class="bottom_block"> <div class="container_12"> <div class="grid_2 prefix_2"> <ul> <li><a href="#">常见问题解答页面 </a></li> <li><a href="#">人们会说</a></li> </ul> </div> <div class="grid_2"> <ul> <li><a href="#">有用的链接</a></li> <li><a href="#">我们的团队</a></li> </ul> </div> <div class="grid_2"> <ul> <li><a href="#">简单的介绍</a></li> <li><a href="#">家庭旅行</a></li> </ul> </div> <div class="grid_2"> <h4>联系我们:</h4> 电话: 1-800-234-5678<br> <a href="#">电话24小时在线</a> </div> <div class="clear"></div> </div> </div> <footer> <div class="container_12"> <div class="grid_12"> <div class="socials"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> <div class="copy"> 旅行 © 2021 | <a href="#">优先政策</a> | 旅行请联系我们公司 </div> </div> <div class="clear"></div> </div> </footer> </div> <audio controls="controls" autoplay="autoplay" hidden=""> <source src="audio/song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio></body>/**/@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);@import "../css/reset.css";@import "../css/grid.css";@import "../css/superfish.css";input { outline: none !important;}html { width: 100%;}a[href^="tel:"] { color: inherit; text-decoration: none;} overflow: hidden;}.img_inner { max-width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin-bottom: 25px; margin-top: 3px; position: relative;}a.comment { margin-top: 2px; display: inline-block; float: right; margin-right: 85px;}.blog+.blog { border-top: 1px solid #dedbdb; margin-top: 60px; padding-top: 58px;}.blog time { text-align: center; display: block; background-color: #38afe5; border-radius: 500px; color: #fff; width: 39px; height: 30px; padding-top: 9px; font-size: 11px; line-height: 11px; float: left; margin-right: 13px; margin-top: 3px;}ul.list2.l1 { width: auto; float: none; padding-top: 0; margin-bottom: 43px;}/****Map***/.map { padding-top: 0px; margin-top: -2px;}.map figure { width: 550px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; margin-right: 26px; padding-top: 2px;}.map figure iframe { width: 550px; height: 414px; max-width: 100%;}.map address { overflow: hidden;}.map address+address { margin-top: 43px;}.map address+address dt { margin-bottom: 5px;}.map .text2 { margin-bottom: 21px; font: bold 24px/24px 'Marvel', sans-serif; color: #000; padding-top: 1px;}address dt { margin-bottom: 19px;}address dd span { min-width: 95px; display: inline-block; text-align: left;}/************Footer***********/footer { display: block; padding: 25px 0; color: #6b6868;}.socials { text-align: center; margin-bottom: 21px;}.socials a { margin: 0 5px; display: inline-block; width: 46px; height: 46px; background: url(../images/socials.png) 0 0 no-repeat;}.socials a+a { background-position: -60px 0;}.socials a+a+a { background-position: -122px 0;}.socials a+a+a+a { background-position: right 0;}.socials a:hover { opacity: 0.5;}.copy { text-align: center; color: #fff; font-size: 12px;}.f_bot { padding-top: 26px; padding-bottom: 40px; color: #797979;}/**to top**/#toTop { display: none; text-decoration: none; position: fixed; bottom: 30px; margin-right: -620px !important; overflow: hidden; width: 36px; height: 37px; border: none; text-indent: -999px; z-index: 999; background: url(../images/totop.png) no-repeat left top; transition: 0s ease; -webkit-transition: 0s ease; -o-transition: 0s ease;}#toTop:hover { background-position: right 0;}table { border-collapse: collapse; margin: 10px 15px; width: 290px;}th strong { color: #fff;}th { background: #86DFEA; width: 50px; height: 29px; padding-left: 10px; padding-right: 11px; color: #fff; text-align: left; border-left: 1px solid #DEA; border-bottom: solid 2px #FFF;}tr { height: 30px;}td { padding-left: 11px; padding-right: 11px; /* border-left: 1px solid #FFE1C3; */ border-left: 1px solid #FFF; border-bottom: solid 1px #ffffff;}td.first,th.first { border-left: 0px;}tr.row-a { background: #F8F8F8;}tr.row-b { background: #EFEFEF;}.focus{float:left;position:relative;width:1000px;height:460px;margin-bottom:20px;border:2px solid #fff;border-radius:5px;overflow:hidden;}.focus_image{float:left;width:1000px;height:460px;list-style:none;}.focus_image li{float:left;width:1000px;height:460px;display:none;}.focus_image li.current{display:block;}.focus_image li img{float:left;width:1000px;height:460px;}.focus_button{position:absolute;bottom:24px;right:415px;width:100px;height:45px;padding-top:20px;list-style:none;}.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;}.focus_button li.on{background-color:#2a97b6;}.title { color: #2d1f16; line-height: 28px; margin: 10px 0;}.title h2 { font-size: 18px;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：旅游,实现,设计,漂亮,简单
