本文共 3193 字，大约阅读时间需要 10 分钟。

欢迎来到我的博客

我是大一的新生，这是我的第二篇博客。这个网页是我参加学校网页设计大赛的参赛作品，发布这篇博客，是希望能够让和我一样的初学者有所参考，并且接受各位大佬的建议。

前言

先说本人对html，css，js的理解：

html：文字图画等内容。

css：动画，排版（即样式）。

js：按钮等控制。

简要来说就是html负责内容，css负责样式，js负责控制。

效果

其余的形式类似就暂不展示了

设计

设计理念：

本小组网页设计主题为“画见中国”，希望借此能够简单地了解中国画，通过中国画加深对中国优秀传统文化的认识。

主要选择了起源、流派、代表画家、代表画作这几个方面进行简要介绍。为了更好地契合主题，网页中的字体主要为毛笔字体，而且也选择了毛笔边框，另外，我们还在网页上加入了古风纯音乐，都是为了让整个页面展现古风的风格。

我们大赛的主题是传统文化，因此我选择了国画作为主要呈现的内容，因为国画更有表现力，设计难度也相对容易。

本人没有什么艺术细胞，所以就提了个别建议（如背景是经典画作《清明上河图》),设计的样式由同组同学负责。最初用PPT设计图案如下:

简要介绍制作流程

由于该作品要参与比赛，所以就不发源代码了，在这里简要介绍下制作的方法

第一步——html内容

首先当然是把需要的内容（如：背景图片，按钮图片…)放入css中。如下：

可以看到我们把需要的图片都放入了html里。

第二步——css排版

现在我们已经向html塞了内容，接下来我们就要通过css对文章进行排版。这里我会进行一些演示。

先看向我们的设计图,我们可以把网页分为以下几个部分。

在这我们用< div >< /div >制作几个盒子，将这些图片存放在里面并给这些盒子定义类或ID。 如：

然后在css里定义盒子的大、位置，图片的大小、位置。（为使网页能在不同分辨率可运行，我们的大小用百分比来表示） 如:

.buttondiv1{
   	width: 65%;	position: absolute;	top: 0px;	left: 0px;	z-index:10;	height:15%;}.buttondiv1 img{
   	width: 20%;	height:90%;	opacity:0.6;}

这里有三个知识点:

1. 绝对定位中top/bottom和left/right两个中必须有一个这样才能确定定位的位置
2. width，height属性中百分比指的是在自己所在盒子里的相对宽高。（body也算是一个盒子）
3. z-index的作用是设置所在层，保证其不被覆盖。

安排完位置后，就得开始做一些动画效果。

这里我们希望清明上河图作为背景在后方滚动。所以我们用关键帧数的方式，做了循环的动画。

.div1 .img1{
    	float: left;	opacity:0.7;	/*动画名称*/	animation-name: move;	/*动画时间*/	animation-duration: 700s;	/*动画次数*/	animation-iteration-count: infinite;	/*匀速*/	animation-timing-function: linear;	}   @keyframes move {
   	 /*动画起始位置*/	 0%{
   	 transform: translateX(0px);	 }	/*动画结束状态*/	50%{
   	 transform: translateX(-88%);	 }	100%{
   	 transform: translateX(0px);	 }	}

这样就可以实现清明上河图作为背景滚动的效果。(应设置好图像的大小）

设置按钮的效果

.buttondiv1 img:hover{
   	opacity:1;	cursor:pointer;}

这里实现了鼠标放在按钮上的时候，按钮颜色变深。（通过改变透明度）当然先前要设置好较低的透明度。

做好这些后我们的网页的雏形就有了，之后就是用js实现按钮的效果。

第三步——js控制

首先要提的就是，html加载js的时候，我将js放在了最后< /html >前，这是为了让网页先加载好页面的效果，然后再加载js，防止网页迟迟没加载好的情况出现。

先定义在js中定义一个函数

function showcontent(i) {
   	var titleobj=document.getElementsByClassName("title")[0];	var contentobj=document.getElementById("contentimg");	var contentdiv=document.getElementsByClassName("contents")[0];	var move=document.getElementsByClassName("move")[0];	switch (i)	{
   		case 0:			move.style.display="none";			contentdiv.style.display="none";			titleobj.style.display="block";			break;	}

这里switch中我只演示一个，其中的意思是如果i是0的话，左右方向键move不显示，存放图片内容的div不显示，主题的title显示。

再配合html中

就可以实现主页按钮的作用。

1. js中调用类，应该用：

var titleobj=document.getElementsByClassName("title")[0];

(类不唯一，用数组的形式)

2. js中调用ID，应该用：

var contentobj=document.getElementById("contentimg");

(ID是唯一的)

3. html调用js的方式

(方式不唯一)

第四步——润色网页

到现在大致的网页已经做完了，为保证网页的精美，我们可以适当添加一些功能（如音乐）。

这里我们添加了音乐：

html：

js：

function Play(){
      	var myAuto = document.getElementById('myaudio');   	if (myAuto.paused)   	{
      	  		            myAuto.play();            document.getElementById('sound').src="img/sound.png";   	}    else    {
               myAuto.pause();            document.getElementById('sound').src="img/nosound.png";    }}

（再用css进行排版即可）

心得

通过这次网页设计，我对于绝对定位的使用更加熟悉，js的应用也有所感悟，心里对网页的设计的思路更加清晰。

转载地址：https://blog.csdn.net/YYYYYYYYZ8/article/details/109496411 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！