一、网页作品介绍
(一)网页作品简介
1、 主要有网站首页、历史沿革、地理环境、地方特产、旅游胜地、关于我们、登录、注册,8个html页面
2、网页作品技术:Div+CSS、Table、导航栏效果、表单、二级三级页面、视频、音频元素、超链接实现网页跳转。
(二)网页作品编辑
家乡旅游网页设计,编译软件为HBuilder X 3.6.4
二、设计说明
(一)导航栏、系统时间
导航栏是由列表,超链接组成的,划过每个列表会有颜色变化,首页的最下面是一个系统时间设置,如图2所示。
(二)网站首页
首页分为上下两部分,下面是一个轮番图(有关邯郸的一些景区),再往下是一些文字介绍,介绍旅游景点,最后是一些图片欣赏,利用div使其分为四小部分,并且将光标放在上边还会有放大功能,如图1,图2所示。背景是邯郸的街道的夜景,灯火通明,一种祥和的景象,所以选为背景图,网站首页还插入了背景音乐自动播放。
图1 导航栏、轮番图
图2 div设计、系统时间
(三)历史沿革
利用<div class="clear"></div>, 这里的clear是样式名。 样式写在CSS文件中 作用:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除。
调用一个外部的CSS样式文件。他是通过<link/>这个标签来调用的。然后, href="css/index.css" 表示外部样式文件的路径,rel="stylesheet"表示调用的是一种样式。最后,type="text/css" 就具体说明调用样式的文件类型为CSS样式,如图3所示。
图3 历史沿革
(四)地理环境
(五)地方特产
(六)旅游胜地
(七)关于我们
(八)注册登录
(九) 注册
-
系统时间设计
function itime() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var currentTime = + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
return(currentTime)
}