家乡旅游页面设计

最新推荐文章于 2024-01-02 02:14:10 发布

沁染—未来可期

最新推荐文章于 2024-01-02 02:14:10 发布

阅读量2k

点赞数 6

分类专栏：前端文章标签：旅游 css html

本文链接：https://blog.csdn.net/m0_61174920/article/details/128303466

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网页作品介绍

（一）网页作品简介

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)
        }