此次分享的是自己设计的静态网页作品，选择了钻戒作为本次网站的主题。
由于是学校的课程设计要求，内容有点简陋，此次的界面设计也不多，共有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了，首页中的代码实现如下：
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:1879px;">
<span><img src="images/b.jpg" height="730"> //插入的图片
<img src="images/a.jpg" height="730"> //插入的图片
<img src="images/c.jpg" height="730"> //插入的图片
</span>
</DIV>
<script src="js/untitled.js"></script> //导入js文件，实现插入的图片滚动的效果
首页中的图片下方的“热销单品”加图片实现也很简单，定义一个div，然后插入图片，使用css控制样式大小，图片下方使用段落p来为图片加上名称，如：
<a href=" "><div class="card1"><img src="images/4.jpg" style="margin-top:18px; margin-left:10px;"></a>
<p style="text-align:center;">传承六爪 18K金钻石戒指</p></div>
这两行代码实现的就是“热销单品”下的第一个图片加文字显示的效果。
底部的导航栏实现也很简单，采用div，加上dl，dt实现，代码如下：
<div id="footer">
<dl>
<dt><a href="#">关于我们</a> || <a href="#">产品相关</a> || <a href="#">反馈问题</a> || <a href="#">友情链接</a> || <a href="#">关于合作</a> </dt>
<dd>Copyright ©2019 - 2033 maituo.com All Rights Reserved
</dd>
</dl>
</div>
聊完了首页再来看看登录注册功能的实现，先上图。
首先导航栏和底部栏是不用修改的，保持原样就可以，只需要在中间部分加入一个div就行，注册框放在图片上方。注册框中输入手机号，邮箱，密码，邀请码等提供input实现，代码如下：
<input name="" type="text" class="kuang_txt phone" placeholder="手机号">
<input name="" type="text" class="kuang_txt email" placeholder="邮箱">
<input name="" type="text" class="kuang_txt possword" placeholder="密码">
<input name="" type="text" class="kuang_txt possword" placeholder="邀请码">
一个网站的开发怎么也少不了404界面，接着来展示一下404界面怎么实现
界面采用了一段js代码，代码的功能就是实现界面不见了然后倒数5个数跳转到首页的功能，来看看这段js代码吧
<script>
var demo = document.getElementById("demo");
var count = 6;
var speed = 1000;
setTimeout(goIndexPage,speed); //1秒钟之后执行goIndexPage函数
function goIndexPage(){
count--;
demo.innerHTML="<span id='second'>"+count+"秒后自动跳转首页</span>";
if(count <=0){
window.location.href = "../首页/index.html"; //js页面跳转
}else{
setTimeout(goIndexPage,speed); //递归调用,自己调用自己
}
}
</script>
其他界面的设计都大同小异，这里就不一一列举出来了。
最后，分享一下其它的界面。
