静态网页设计作品经验分享

此次分享的是自己设计的静态网页作品,选择了钻戒作为本次网站的主题。

由于是学校的课程设计要求,内容有点简陋,此次的界面设计也不多,共有7个页面。

首先来看首页

首页

在首页中用到了一个js代码,实现的是导航栏下方的大图进行滚动的效果,具体的代码如下:

function scroll(obj) {

var tmp = (obj.scrollLeft)++;

if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML;

if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0;

}

setInterval("scroll(document.getElementById('scrollobj'))",20);

js代码不多,但是短小而精悍,使用这段js代码只需要在html文件中,先定义一个div,然后将图片插入进去,在导入js文件就OK了,首页中的代码实现如下:

    //插入的图片

       //插入的图片

       //插入的图片

      //导入js文件,实现插入的图片滚动的效果

首页中的图片下方的“热销单品”加图片实现也很简单,定义一个div,然后插入图片,使用css控制样式大小,图片下方使用段落p来为图片加上名称,如:

传承六爪    18K金钻石戒指

这两行代码实现的就是“热销单品”下的第一个图片加文字显示的效果。

底部的导航栏实现也很简单,采用div,加上dl,dt实现,代码如下:

聊完了首页再来看看登录注册功能的实现,先上图。

注册

首先导航栏和底部栏是不用修改的,保持原样就可以,只需要在中间部分加入一个div就行,注册框放在图片上方。注册框中输入手机号,邮箱,密码,邀请码等提供input实现,代码如下:

 

一个网站的开发怎么也少不了404界面,接着来展示一下404界面怎么实现


404界面

界面采用了一段js代码,代码的功能就是实现界面不见了然后倒数5个数跳转到首页的功能,来看看这段js代码吧

其他界面的设计都大同小异,这里就不一一列举出来了。

最后,分享一下其它的界面。

登录界面
浪漫礼物界面
配饰推荐界面


新品热品界面

你可能感兴趣的:(静态网页设计作品经验分享)