4. web前端网页制作 “成都“旅游主题网页设计实例大学生期末大作业 html+css+js

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。兼容各大主流浏览器、显示效果稳定的浮动网页布局结构，已达到打开后就能即时看到网站的效果。

3.知识应用

采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计，js动态轮播特效, 点击事件、导航栏效果、DIV、Banner、表格、视频、注册、登录页面等。

二、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

三、代码展示

代码如下（节选示例）：

1.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>成都</title>
</head>
<body>
<div class="head">
<div class="main"><span class=""><img src="images/logo.jpg" width="150"/></span>
<p class="clear"></p>
</div>
</div>
<div class="menu">
<div class="main">
<ul class="center">
<li><a href="index.html">网站首页</a></li>
<li><a href="jieshao.html">关于成都</a></li>
<li><a href="chihewanle.html">吃喝玩乐</a></li>
<li><a href="tupian.html">旅游风光</a></li>
<li><a href="zhuce.html">会员注册</a></li> <li><a href="denglu.html">会员登录</a></li>

</ul>
</div>
</div>
<div class="main">
<div class="banner ">
<div class="top_img">
<div class="focus" id="focus">
<div id="focus_m" class="focus_m">
<ul>
<li style="display:block"> <img src="images/banner1.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/banner2.jpg" width="100%" /> </li>
<li style="display:none"> <img src="images/banner3.jpg" width="100%" /> </li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" title="上一张"><b></b><span></span></a> <a href="javascript:;" class="focus_r" id="focus_r" title="下一张"><b></b><span></span></a> </div>
</div>
</div>
<script type="text/javascript" src="js/js.js"></script>
<div class="content">
<div class="bar">
<h3>旅游风光</h3>
</div>
<div class="scrollleft">
<ul>
<li> <a href="tupian.html"><img src="images/0.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/1.jpg" width="100%" height="200"/></a> </li>
<li> <a href="tupian.html"><img src="images/2.jpg" width="100%" height="200"/></a> </li>
<li> <a href="tupian.html"><img src="images/3.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/4.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/5.jpg" width="100%" height="200"/> </a></li>
<li> <a href="tupian.html"><img src="images/6.jpg" width="100%" height="200"/> </a></li>
       <li> <a href="tupian.html"><img src="images/7.jpg" width="100%" height="200"/> </a></li>
<div class="clear"></div>
</ul>
</div>
   <div class="bar">
<h3>成都介绍</h3>
</div>
<div class=""> <img src="images/tu.jpg" width="500" class="fl" style="margin-right:11px" />
<p>成都，简称“蓉”，别称蓉城、锦城，四川省辖地级市，是四川省省会、副省级市、特大城市 [188] 、成渝地区双城经济圈核心城市，国务院批复确定的中国西部地区重要的中心城市，国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽 [1] 。截至2019年，全市下辖12个市辖区、3个县、代管5个县级市，总面积14335平方千米 [2-3] ，建成区面积949.6平方公里，常住人口1658.10万人，城镇人口1233.79万人，城镇化率74.41% [4] 。<br>

成都地处中国西南地区、四川盆地西部、成都平原腹地，境内地势平坦、河网纵横、物产丰富、农业发达，属亚热带季风性湿润气候，自古有“天府之国”的美誉 [5] ，是中国人民解放军西部战区机关驻地 [6] ，作为全球重要的电子信息产业基地 [7-8] ，有国家级科研机构30家，国家级研发平台67个 [9] ，高校65所， [67] 各类人才约389万人；2019年世界500强企业落户301家 [10] 。<br>
成都是全国十大古都和首批国家历史文化名城 [11] ，古蜀文明发祥地 [12] 。境内金沙遗址有3000年历史 [13] ，周太王以“一年成聚，二年成邑，三年成都” [14] ，故名成都 [15] ；蜀汉、成汉、前蜀、后蜀等政权先后在此建都；一直是各朝代的州郡治所；汉为全国五大都会之一；唐为中国最发达工商业城市之一，史称“扬一益二”；北宋是汴京外第二大都会，发明世界上第一种纸币交子。拥有都江堰、武侯祠、杜甫草堂等名胜古迹，是中国最佳旅游城市 [16] 。</p>
</div>
<div class="clear"></div>
<div class="scrollleft2" id="content">
<ul>
<li> <a href="tupian.html"><img src="images/a0.jpg" width="100%" height="160"/> </a></li>
<li> <a href="tupian.html"><img src="images/a1.jpg" width="100%" height="160"/></a> </li>

.....

2.CSS

代码如下（节选示例）：

@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#fff;
}
a{color:#fff;text-decoration:none;
}

.container{width:1090px;margin:0 auto;overflow:hidden;background-color:#56b6b2;
}

.header{float:left;width:1090px;height:100px;line-height:95px;font-size:36px;font-weight:bold;letter-spacing:5px;text-align:center;background-color:#369d99;
}

.nav{float:left;width:1090px;height:50px;line-height:50px;background-color:#f2dda4;
}
.nav a{font-size:14px;font-weight:bold;color:#56b6b2;margin:0 18.5px 0 30px;
}
.nav a:nth-last-child(1){margin-right:0;
}

.focus{float:left;position:relative;width:1090px;
}
.focus_image{float:left;width:1030px;height:440px;list-style:none;margin:30px 0 10px 30px;
}
.focus_image li{float:left;width:1030px;height:440px;display:none;
}
.focus_image li.now{display:block;
}
.focus_image li img{float:left;width:1030px;height:440px;
}
.focus_dot{position:absolute;bottom:30px;right:435px;padding-top:20px;width:130px;height:45px;list-style:none;
}
.focus_dot li{float:left;width:12px;height:12px;margin-left:10px;background-color:#fff;border-radius:50%;cursor:pointer;
}
.focus_dot li.on{background-color:#56b6b2;
}

.wrapper{float:left;width:1090px;padding-bottom:60px;
}
.wrapper a:hover{text-decoration:underline;
}

.line{float:left;width:500px;margin:60px 0 0 30px;
}
.line img{float:left;width:230px;height:170px;
}
.line h3{float:right;width:250px;height:30px;line-height:30px;font-size:18px;
}
.line p{float:right;width:250px;line-height:25px;margin-top:10px;
}

.word{float:left;width:323px;height:370px;margin:60px 0 0 30px;
}
.word h3{float:left;width:323px;height:30px;line-height:30px;font-size:18px;
}
.word p{float:left;width:323px;line-height:25px;margin:10px 0 2px 0;
}

.same{float:left;width:323px;height:370px;margin:60px 0 0 30px;
}
.same h3{float:left;width:323px;height:30px;line-height:30px;font-size:18px;
}
.same img {float:left;width:323px;height:210px;margin-top:12px;
}
.same p{float:left;width:323px;line-height:25px;margin-top:12px;
}

.content{float:right;width:1090px;margin-top:30px;
}
.content h3{float:left;width:1090px;height:50px;line-height:50px;font-size:16px;text-align:center;
}
.content img{float:left;width:760px;margin:15px 0 10px 165px;
}
.content p{float:left;width:760px;line-height:30px;margin:5px 0 0 165px;font-size:13px;text-indent:25px;
}

.message{float:left;width:1090px;padding:60px 0 80px 0;
}
.message form{float:left;width:1090px;
}
.message p{float:left;width:1090px;margin-top:15px;
}
.message span{float:left;width:340px;height:35px;line-height:35px;font-size:14px;text-align:right;margin-top:8px;
}
.message input{float:left;width:380px;height:35px;line-height:35px;margin:8px 0 0 20px;
}
.message b{float:left;width:130px;height:35px;margin:15px 0 0 20px;
}
.message textarea{float:left;width:380px;height:260px;line-height:35px;margin:8px 0 0 20px;
}
.message input.submit{letter-spacing:3px;color:#fff;background-color:#369d99;border:0;
}

.footer{float:left;width:1090px;height:90px;line-height:90px;text-align:center;background-color:#369d99;
}

......

3.js

代码如下（节选示例）：

auto=null;
timer=null;
var focus=new Function();
focus.prototype={
init:function(){

this.aTime=this.aTime || 10;

this.sTime=this.sTime || 5000;

this.oImg=document.getElementById('focus_m').getElementsByTagName("ul")[0];
this.oImgLi=this.oImg.getElementsByTagName("li");

this.oL=document.getElementById('focus_l');
this.oR=document.getElementById('focus_r');

this.createTextDom();

this.target=0;

this.autoMove();

       this.oAction();
   },
   createTextDom:function(){
       var that=this;

       this.oText=document.createElement("div");
       this.oText.className="focus_s";
       var ul=document.createElement('ul');
       var frag=document.createDocumentFragment();
       for (var i=0;i<this.oImgLi.length;i++) {
           var li=document.createElement("li");
           li.innerHTML='<b></b>';
           if (i==0) {
               li.className="active";
           };
           frag.appendChild(li);
       };
       ul.appendChild(frag);
       this.oText.appendChild(ul);
       this.o.insertBefore(this.oText,this.o.firstChild);

       this.oTextLi=this.oText.getElementsByTagName("li");
   },
   autoMove:function(){
       var that = this;
       auto=setInterval(function(){that.goNext()},that.sTime);
   },
   goNext:function() {
       this.target=this.nowIndex();
       this.target==this.oTextLi.length-1 ? this.target=0:this.target++;
       this.aStep=(this.target-this.nowIndex())*this.step;
       this.removeClassName();
       this.oTextLi[this.target].className="active";
       this.startMove();
   },
   goPrev:function() {
       this.target=this.nowIndex();
       this.target==0 ? this.target=this.oTextLi.length-1 : this.target--;
       this.aStep=(this.target-this.nowIndex())*this.step;
       this.removeClassName();
       this.oTextLi[this.target].className="active";
       this.startMove();
   },
   startMove:function (){
       var that=this;
       var t=0;
       this.timer='';
       function set(){
           if (t>100) {
               clearInterval(that.timer);
           }else {
               for (var i=0;i<that.oImgLi.length;i++) {
                   that.oImgLi[i].style.display='none';
               };
               that.oImgLi[that.target].style.display='block';
               that.setOpacity(that.oImg,t);
               t+=5;
           };

.....

四、总结

1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
2. 所有页面相互超链接，可到二级或三级页面，有5-10个页面组成；
3. 页面样式风格统一布局显示正常，不错乱，使用HTML5+CSS3+JS技术；
4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
5. 要有JS特效，如定时切换和手动切换图片新闻；
6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
7. 页面清爽、美观、大方，不雷同。
8. 网站前端程序不仅要能够把用户要求的内容呈现，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

五、交流分享

1.【关注作者|获取更多源码（2000+个网页源码）|优质文章】；
2. 您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等；更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。