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

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

由于是学校的课程设计要求，内容有点简陋，此次的界面设计也不多，共有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实现，代码如下：

 

关于我们 || 产品相关 || 反馈问题 || 友情链接 || 关于合作

Copyright ©2019 - 2033 maituo.com All Rights Reserved

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

注册

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

 

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

404界面

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

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

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

登录界面

浪漫礼物界面

配饰推荐界面

新品热品界面