HTML5期末⼤作业：景点介绍⽹站设计——贵州⼭地旅游介绍⽹页模板（1个页
⾯）HTML+C。。。
HTML5期末⼤作业：景点介绍⽹站设计——贵州⼭地旅游介绍⽹页模板(1个页⾯)
HTML+CSS+JavaScript 期末作业HTML代码学⽣⽹页课程设计期末作业下载
临近期末, 你还在为HTML⽹页设计结课作业,⽼师的作业要求感到头⼤？HTML⽹页作业⽆从下⼿？⽹页要求的总数量太多？没有合适的模板？等等⼀系列问题。你想要解决的问题，在这篇博⽂中基本都能满⾜你的需求~
原始HTML+CSS+JS页⾯设计, web⼤学⽣⽹页设计作业源码，这是⼀个不错的⽹页制作，画⾯精明，⾮常适合初学者学习使⽤。
作品介绍
1.⽹页作品简介⽅⾯ ：HTML期末⼤学⽣⽹页设计作业 ，喜欢的可以下载，⽂章页⽀持⼿机PC响应式布局。
2.⽹页作品编辑⽅⾯：此作品为学⽣个⼈主页⽹页设计题材，代码为简单学⽣⽔平 html+css 布局制作，作品下载后可使⽤任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使⽤）
3.⽹页作品布局⽅⾯：⽹页布局整体为LOGO、导航、主体内容布局。⼦页⾯多种布局，兴趣爱好内容使⽤图⽚列表布局，成绩页⾯插⼊了表格，使⽤图⽚对齐⽅式设置了左对齐。
4.⽹页作品技术⽅⾯：使⽤CSS制作了⽹页背景图、⿏标经过及选中导航变⾊效果、下划线等。 ⾸页制作了留⾔表单，同时简单使⽤JavaScript制作了表单判断（提交时表单不能为空）
⽂章⽬录
⼀、作品演⽰
⼆、代码⽬录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="css/swiper.min.css">
<link rel="stylesheet"type="text/css"href="css/main.css">
<link rel="stylesheet"href="css/cloudzoom.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/guizhou.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/cloudzoom.js"></script>
<script src="js/page.js"></script>
<title>贵州⼭地旅游</title>
<style type="text/css">
body{min-width: 1200px !important;}
.swiper-wrapper div.swiper-slide{float: left;width:11% !important;}
.guizhoubg li{display: none;}
.guizhous{opacity: 0;}
</style>
<!--启动CloudZoom就可以了，quickStart()⽴即启动-->
<script type="text/javascript">
CloudZoom.quickStart();
</script>
</head>
<body>
<!-- 头部开始 -->
<div class="head">
<div class="head_top">
<div class="w1200 clearFloat">
<div class="left fl"><span>本商城推介信息为⼴告</span></div>
<div class="right fr">
<span>请</span>
<a href="javascript:;">登录</a>|
<a href="javascript:;">注册</a>|
<a href="javascript:;">我的融e购</a>|
<a href="javascript:;">购物车</a>|
<a href="javascript:;">帮助中⼼</a>|
<a href="javascript:;"></a>
</div>
</div>
</div>
<div class="w1200">
<div class="logo fl">
<a href="javascript:;">
<img class="ig1"src="images/index1.png"/>
<img class="ig2"src="images/index2.png"/>
</a>
</div>
<div class="ser fr">
<div class="right1">
<div class="right1_box"><input type="text"placeholder="输⼊查关键字"/></div>
<input class="in2"type="button"value="搜索"/>
</div>
<div class="right2"><span>热门搜索：科沃斯机器⼈</span></div>
</div>
</div>
</div>
</div>
<!-- 头部结束 -->
<!-- 导航开始 -->
<div class="nav">
<div class="w1200 clearFloat">
<div class="left fl"><a href="javascript:;">所有商品分类</a></div>
<div class="right fr">
<ul class="clearFloat">
<li><a href="javascript:;">⾸页</a></li>
<li><a href="javascript:;">⼤牌e起购</a></li>
<li><a href="javascript:;">百元店</a></li>
<li><a href="javascript:;">跨境馆</a></li>
<li><a href="javascript:;">汽车城</a></li>
<li><a href="javascript:;">购房中⼼</a></li>
<li><a href="javascript:;">⾦融</a></li>
<li><a href="javascript:;">企业采购</a></li>
</ul>
</div>
</div>
</div>
<!-- 导航结束 -->
<!-- banner 开始 -->
<div class="banner">
<div class="lunbo fullSlide">
<a class="prev"></a>
<a class="next"></a>
<div class="bd">
<ul>
<li ><a href="javascript:;"></a></li> <li ><a href="javascript:;"></a></li> <li ><a href="javascript:;"></a></li> </ul>
</div>
</div>
<script type="text/javascript">
jQuery(".fullSlide").slide({mainCell:".bd ul", effect:"fold", autoPlay:true, delayTime:700});
</script>
<div class="quan">
<div class="w1200">
<ul>
<li class="li1 clearFloat">
<div class="jian"><span>减</span></div>
<div class="li_left fl">
<em>￥</em>
<i>3</i>
</div>
<div class="li_right fl">
<div class="p1"><span>满59元</span>即可使⽤</div>
<a class="lq"href="javascript:;">领取优惠券</a>
<a class="lq"href="javascript:;">领取优惠券</a>
</div>
</li>
<li class="li2 clearFloat">
<div class="jian"><span>减</span></div>
<div class="li_left fl">
<em>￥</em>
<i>5</i>
</div>
<div class="li_right fl">
<div class="p1"><span>满79元</span>即可使⽤</div>
<a class="lq"href="javascript:;">领取优惠券</a>
</div>
</li>
<li class="li3 clearFloat">
<div class="jian"><span>减</span></div>
<div class="li_left fl">
<em>￥</em>
<i>10</i>
</div>
<div class="li_right fl">
<div class="p1"><span>满158元</span>即可使⽤</div>
<a class="lq"href="javascript:;">领取优惠券</a>
</div>
</li>
</ul>
</div>
</div>
<div class="banner_db"></div>
</div>
网页模板编辑器<!-- banner 结束 -->
<!-- ⼩导航开始 -->
<div class="nav2">
<div class="w1200">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:;">
<div class="ig"><img src="images/index7.png"/></div> <p>⾸页</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="ig"><img src="images/index8.png"/></div> <p>游在贵州</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="ig"><img src="images/index9.png"/></div> <p>吃在贵州</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="ig"><img src="images/index10.png"/></div> <p>住在贵州</p>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<div class="ig"><img src="images/index11.png"/></div> <p>⾏在贵州</p>
</a>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论