此次分享的是自己设计的静态网页作品,选择了钻戒作为本次网站的主题。
由于是学校的课程设计要求,内容有点简陋,此次的界面设计也不多,共有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来为图片加上名称,如:
这两行代码实现的就是“热销单品”下的第一个图片加文字显示的效果。
底部的导航栏实现也很简单,采用div,加上dl,dt实现,代码如下:
聊完了首页再来看看登录注册功能的实现,先上图。
首先导航栏和底部栏是不用修改的,保持原样就可以,只需要在中间部分加入一个div就行,注册框放在图片上方。注册框中输入手机号,邮箱,密码,邀请码等提供input实现,代码如下:
一个网站的开发怎么也少不了404界面,接着来展示一下404界面怎么实现
界面采用了一段js代码,代码的功能就是实现界面不见了然后倒数5个数跳转到首页的功能,来看看这段js代码吧
var demo = document.getElementById("demo");
var count = 6;
var speed = 1000;
setTimeout(goIndexPage,speed); //1秒钟之后执行goIndexPage函数
function goIndexPage(){
count--;
demo.innerHTML=""+count+"秒后自动跳转首页";
if(count <=0){
window.location.href = "../首页/index.html"; //js页面跳转
}else{
setTimeout(goIndexPage,speed); //递归调用,自己调用自己
}
}
其他界面的设计都大同小异,这里就不一一列举出来了。
最后,分享一下其它的界面。