web网页弄一个

1  需求设计

据了解，早在2000年，国外就刮起了新建宠物类网站的狂潮，尤其是社区类宠物网站。

随着国内社会经济的发展和城市化进程的加速，城市居民家庭的独立性、个性化和人口老龄化的问题日益突出。宠物饲养已经成为城市居民消费的新亮点，国内的宠物类网站也如雨后春笋般地涌现出来。

宠物类网站建设的种类繁多，关键还是要找到宠物类网站的目标用户，然后进行有针对性的功能开发和服务介绍，这样建设出来的宠物类网站才更加符合国内宠物市场的发展。

现在，我们以拉布拉多为例，为大家介绍一下可爱的狗狗。

2  总体设计方案概述

为了让大家清楚认识拉布拉多，我们从生活习性、历史文化、分布范围、形态特征、驯养方式、主要行为六个方面详细展开描写拉布拉多。在导航栏中通过超链接实现各页面的跳转，同时，在首页“狗狗咨询”中，让人们可以根据自己的喜好，快速找到相应内容。整个网站利用文字，图片，视频，音频以及温馨的色彩搭配与干净治愈的排版，让大家心情愉悦，增加对狗狗的喜爱与兴趣。

2.1页面内容

首先，一个狗狗界面登录，如果没有账号，点击下方注册。进入页面后，首页通过一个视频让我们对可爱的拉布拉多有一个小小的认识，然后一段文字简单介绍后，可以通过导航栏直接进入自己感兴趣的版块，如果还不太了解，也可以在“狗狗咨讯”中先了解一下，然后跳转页面充分了解。

生活习性页面的蓝色与土色搭配，历史文化与分布范围页面的橘黄搭配，形态特征的浅蓝白搭配，以及驯养方式，主要行为的浅蓝浅绿搭配，带给人们一种简单爽约的感觉，每个页面对狗狗的描述都有文字加图片，形态特征中加入一个轮播图的技术，最后主要行为以一个感人的音频结束，简单不单调。

2.2技术实现

通过Vscode制作网站页面，css与js超链接，轮播图等技术来丰富实现。

3  技术难点与亮点

3.1技术难点

3.1.1 表格的制作设计

3.1.2轮播图的设计

3.2技术亮点

3.2.1背景渐变

3.2.2超链接

可通过超链接进入另一个界面，非常方便

3.2.3轮播图

通过点击两侧的切换按钮进行照片的切换。并且加入了定时器，在鼠标光标不在图片上时，可进行自由切换图片

4  详细设计与源代码

4.1图片文字视频与音频

4.2超链接

4.3表格

4.4背景渐变

4.5层定位与布局

4.6轮播图

这篇好文章是转载于：学新通技术网