DW大学生网页作业制作设计 ——旅游门户网站（21页）HTML+CSS+JavaScript

最新推荐文章于 2023-12-16 10:51:51 发布

我的大学生活

最新推荐文章于 2023-12-16 10:51:51 发布

阅读量449

点赞数

分类专栏： web前端期末大作业文章标签： html javascript css 课程设计

本文链接：https://blog.csdn.net/qq_38512570/article/details/129890686

版权

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<link href="style/public.css" rel="stylesheet" type="text/css" />
<link href="style/index.css" rel="stylesheet" type="text/css" />
<meta name="toTop" content="true">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/toTop.js"></script>
</head>
<body>
<!----top---->
<div class="top">
<div class="top-ner">
<div class="t-left">
<ul>
<li><span class="kfspan"></span><a href="#">在线客服</a></li>
<li><span class="wxspan"></span><a href="#">关注我们</a></li>
</ul></div>
<div class="t-right">
<ul>
<li><a href="denglu.html">登陆</a></li>
<li><a href="zhuce.html">注册</a></li>
</ul>
</div>
</div>
</div>
<div class="top2">
<div class="logo">
<a href="index.html"><img src="images/logo.jpg"></a>
</div>
<select name="" class="diqu"> 
<option value="0">成都</option> 
<option value="1">北京</option> 
<option value="1">上海</option> 
<option value="1">南京</option> 
<option value="1">深圳</option> 
</select> 
<div class="top-center">
<div class="sousuo">
<form id="form1" name="form1" method="POST" action="/Search/companyname.html" onsubmit="return myCheck()">
			
        <input type="text" id="companyName" name="companyName" placeholder="大家都在搜：潜水员被鲸鱼吞入" class="myCheckMainName fl">
              <button type="submit" class="btnCheck">搜索</button>
    	</form>
</div>

</div>
<div class="tel">400-888-8888</div>
</div>
<!----nav---->
<div id="nav">
				<ul>
					<li><a href="index.html">网站首页</a></li>
                    <li><a href="lvyou.html">旅游</a></li>
					<li><a href="jingdian.html">景点攻略</a></li>
					<li><a href="dingzhi.html">定制旅行</a></li>
					<li><a href="qianzheng.html">全球签证</a></li>
					<li><a href="VR.html">VR体验</a></li>
			    </ul>
			</div>
<!----banner---->
<div class="box" id="box">
    <div class="inner">
        <!--轮播图-->
        <ul>
            <li><a href="#"><img  src="images/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img  src="images/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img  src="images/banner3.jpg" alt=""></a></li>
            <li><a href="#"><img  src="images/banner4.jpg" alt=""></a></li>

        </ul>
 
        <ol class="bar">
 
        </ol>
        <!--左右焦点-->
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>

<script>
    /**
     *
     * @param id  传入元素的id
     * @returns {HTMLElement | null}  返回标签对象，方便获取元素
     */
    function my$(id) {
     
        return document.getElementById(id);
    }
 
    //获取各元素，方便操作
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    //根据li个数，创建小按钮
    for(var i=0;i<list.length;i++){
     
        var liObj=document.createElement("li");
 
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
 
        //为按钮注册mouseover事件
        liObj.onmouseover=function () {
     
            //先清除所有按钮的样式
 
            for (var j=0;j<olObj.children.length;j++){
     
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";

最低0.47元/天解锁文章

我的大学生活

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DW大学生网页作业制作设计 ——旅游门户网站（21页）HTML+CSS+JavaScript

🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
复制链接

扫一扫