用DIV+CSS技术设计的凤阳旅游网站（web前端网页制作课作业）HTML+CSS+JavaScript
时间：2022-11-19 08:00:01
????学生HTML静态网页基础水平制作???，页面布局干净简洁。使用HTML CSS页面布局设计，web大学生网页设计作业源代码，这是一个很好的旅游网页制作，画面精美，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用， 这个例子更全面，有助于学生学习。本文将介绍如何从零开始设计个人网站并将其转换为代码。
?? 精彩专栏推荐
?? 【作者主页-获取更多优质源码】
?? 【web前端期末大作业-毕业项目精品实战案例(1000套)
文章目录
- 一、网站题目。
- 二、网站描述
- 三、网站介绍
- 四、网站效果
- 五、网站代码制作部分 ??
-
- HTML结构代码
- CSS样式代码
- 六、遇到问题及如何解决
- 七、实训总结
- 八、更多干货
一、网站题目。
?? 设计制作旅游景点介绍、旅游景点、家乡介绍等网站。
二、网站描述
旅游景点介绍、旅游景点介绍、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。本网站主要展示当地的风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站的每一个网页都采用了统一的设计风格，以增强城市整体面貌的统一宣传效果。最重要的是制作独特的旅游网站风格，更能吸引游客的注意。
三、网站介绍
网站布局：该计划采用目前主流的浮动网页布局结构，可与主要主流浏览器兼容，显示效果稳定。
网站程序：该计划采用最新的网页编程语言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>凤阳县旅游局title> <meta name="keywords" content="凤阳县旅游局 " /> <meta name="description" content="凤阳县旅游局 " /> <link href="css/whir_css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="script/jquery.js">script> <script type="text/javascript" src="script/superslide.2.1.js">script> <script type="text/javascript" src="script/column.js">script> <script type="text/javascript" src="script/min_contentslider.js">script> head> <body> <div id="header"> <div class="top"> <div class="time"> <script language=JavaScript> script> div> <div class="weather"> <iframe width="450" scrolling="no" height="18" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=1&color=%23555555&icon=3&py=fengyang&wind=0&num=1">iframe> div> <div class="tnav"><a href="#">政务网a>|<a href="#">官方旗舰店a>div> div> <div class="nav"> <div class="navmenu"> <div class="logo"><a href="index.html"><img src="images/logo.jpg" width="190" height="70" />a>div> <ul> <li><a href="凤阳概况.html">凤阳概况a>li> <li><a href="资讯信息.html" class="on">资讯信息a>li> <li><a href="人文凤阳.html">人文凤阳a>li> <li><a href="畅游服务.html">畅游凤阳a>li> <li><a href="玩转凤阳.html">玩转凤阳a>li> <li><a href="主题线路.html">主题线路a>li> <li><a href="旅游攻略.html">旅游攻略a>li> <li><a href="出行服务.html">出行服务a>li> <li><a href="#">视频欣赏a>li> ul> div> div> div> <div class="clear">div> <div class="fullSlide"> <div class="bd"> <ul> <li _src="url(images/banner.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="#">a>li> <li _src="url(images/banner.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="#">a>li> <li _src="url(images/banner.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="#">a>li> <li _src="url(images/banner.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="#">a>li> <li _src="url(images/banner.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="#">a>li> ul> div> <div class="hd"> <ul> ul> div> <span class="prev">span> <span class="next">span> div> <script type="text/javascript"> jQuery(".fullSlide").hover(function() { jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5) }, function() { jQuery(this).find(".prev,.next").fadeOut() }); jQuery(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay: true, autoPage: true, trigger: "click", startFun: function(i) { var curLi = jQuery(".fullSlide .bd li").eq(i); if ( !! curLi.attr("_src")) { curLi.css("background-image", curLi.attr("_src")).removeAttr("_src") } } }); script> <div id="container"> <div class="con"> <div class="active"> <div class="title"> <h1>精彩活动h1> div> <div class="picshow"> <DIV class=syFocusThumb> <DIV id=syFocusThumb class=sliderwrapper> <DIV class=contentdiv> <DIV class=dPic><A href="#" target=_blank><IMG src="images/2_1.jpg" width=419 height=319>A>DIV> DIV> <DIV class=contentdiv> <DIV class=dPic><A href="#" target=_blank><IMG src="images/60x200.jpg" width=419 height=319>A>DIV> DIV> <DIV class=contentdiv> <DIV class=dPic><A href="#" target=_blank><IMG src="images/2_1.jpg" width=419 height=319>A>DIV> DIV> <DIV class=contentdiv> <DIV class=dPic><A href="#" target=_blank><IMG src="images/350-200_2.jpg" width=419 height=319>A>DIV> DIV> <DIV class=contentdiv> <DIV class=dPic><A href="#" target=_blank><IMG src="images/emnb350.jpg" width=419 height=319>A>DIV> DIV> DIV> <DIV id=paginate-syFocusThumb class=pagination><I id=prev class=prev title=上一幅>I> <DIV class=thumbWrap> <DIV class=holder><I class=toc><A href="#元器件数据手册、IC替代型号，打造电子元器件IC百科大全！
