自编SupeSite_X-Space_V5风格制做教程.好东东不断添加中.

zhanglei700 · 发表于 2006-10-16 11:56:55

原帖由 ftwfai 于 2006-10-16 11:31 发表
斑竹可以帮我该下我的风格吗
我有个风格包可不知道用

声明:我不是斑竹
不绕弯子的回答:不行.
我只与朋友们进行图文交流.[包括你].不伸手替朋友干活[做不好.为人为事比较小心].
主动交流总比被动好.我很渴望能从各位身上学到知识.

请理解我的直率

[ 本帖最后由 zhanglei700 于 2006-10-16 11:58 编辑 ]

zskj · 发表于 2006-10-17 01:51:11

我还是要来顶帖子，这是习惯了

zhanglei700 · 发表于 2006-10-17 10:43:48

今天开始慢慢做主页.脑子一片空白.随手乱做全凭兴趣.
LOGO就不按常规放到上边了.有点叛逆！
顶部做成登陆框.搜索框.一改常规的导航拦.将日志及资迅栏目分列幻灯两侧.
http://3dmax9.com/3dmax/index.php

[ 本帖最后由 zhanglei700 于 2006-10-17 11:21 编辑 ]

zhanglei700 · 发表于 2006-10-17 15:21:11

bobo7810 · 发表于 2006-10-17 16:07:20

楼主很有耐心,而且很有热心!!:) :)

zjdyx91 · 发表于 2006-10-17 17:18:42

太好了,感谢LZ

zhanglei700 · 发表于 2006-10-18 16:11:39

今儿个又做了一点.反正每天都做一些.改来改去吧.
发个效果.直逼flash的css+div+js菜单.拿去用吧.这段代码是由网上搜来的.自已改了改以适应自己的风格.

演示:http://3dmax9.com/3dmax/

<th bgcolor="#666666" class="style3" scope="col"><div class="style5" id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div class="style8"><a href="http://3dmax9.com/">G1</a></div>
<div><a href="http://3dmax9.com/"> 首页
<style>
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:225px;
height:31px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:12px;
font-family:small fonts;
color:#282828;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#404040;
position:relative;
width:100%;
height:100%;
}
</style>
</a></div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div><a href="http://3dmax9.com/3dmax/?action_news.html">G2 </a></div>
<div><a href="http://3dmax9.com/3dmax/?action_news.html">最新资迅</a></div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div class="style5"><a href="http://3dmax9.com/3dmax/?action_blog.html">G3</a></div>
<div><a href="http://3dmax9.com/3dmax/?action_blog.html">会员日志</a></div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div><a href="http://3dmax9.com/3dmax/?action_image.html">G4</a></div>
<div><a href="http://3dmax9.com/3dmax/?action_image.html">会员相册</a></div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div><a href="http://3dmax9.com/3dmax/?action_goods.html">G5</a></div>
<div><a href="http://3dmax9.com/3dmax/?action_goods.html">会员商品</a></div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div><a href="http://3dmax9.com/3dmax/?action_file.html">G6</a></div>
<div><a href="http://3dmax9.com/3dmax/?action_file.html">会员下载</a></div>
</div>
</div>
<script>
var current=null;
var t=null;
for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";
fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=fbtn_txt[num];
var m=fbtn_mask[num];
if(o.style.posTop<-60){
o.style.display="none";
var t=o.children[1].innerHTML;
o.children[1].innerHTML=o.children[0].innerHTML;
o.children[0].innerHTML=t;
o.style.posTop=-30;
o.style.display="block";
if(m.style.posTop>30)
m.style.posTop=-30;
else
m.style.posTop=0;
}
else{
m.style.posTop+=3;
o.style.posTop-=3;
setTimeout('domove('+num+')',15);
}
}
</script></th>

复制代码

[ 本帖最后由 zhanglei700 于 2006-10-18 16:15 编辑 ]

zhanglei700 · 发表于 2006-10-18 16:53:18

原--源码.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 菜单</title>
<style>
body{
background-color:#B8B8A0;
}
#fbtn{
display:none;
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding:1 1 1 1;
width:115px;
height:30px;
}
#fbtn_txt{
position:relative;
}
#fbtn_txt div{
height:30px;
padding-top:11px;
font-size:9px;
font-family:small fonts;
color:#800080;
text-align:center;
cursor:hand;
}
#fbtn_mask{
background-color:#ffffff;
position:relative;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M1</div>
<div>my name is fireyy</div>
</div>
</div>
<div id=fbtn>
<div id=fbtn_mask></div>
<div id=fbtn_txt>
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<script>
var current=null;
var t=null;
for(var i=0;i<fbtn.length;i++){
fbtn_txt[i].style.posTop=-30;
fbtn_mask[i].style.posTop=-30;
fbtn[i].index=i;
fbtn[i].style.display="block";
fbtn[i].onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn[i].onmouseout=function(){
if(event.toElement==this.parentElement&t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=fbtn_txt[num];
var m=fbtn_mask[num];
if(o.style.posTop<-60){
o.style.display="none";
var t=o.children[1].innerHTML;
o.children[1].innerHTML=o.children[0].innerHTML;
o.children[0].innerHTML=t;
o.style.posTop=-30;
o.style.display="block";
if(m.style.posTop>30)
m.style.posTop=-30;
else
m.style.posTop=0;
}
else{
m.style.posTop+=3;
o.style.posTop-=3;
setTimeout('domove('+num+')',15);
}
}
</script>
</body>
</html>

复制代码

zhanglei700 · 发表于 2006-10-18 17:02:10

新手看一下这里...........

zhanglei700 · 发表于 2006-10-18 17:05:21

这个小东东可千万别删...........

		自动登录	找回密码
密码			立即注册

[教程] 自编SupeSite_X-Space_V5风格制做教程.好东东不断添加中.