兼做美工-首页新闻tab转换
最近有个项目，我负责网站部分模块，因此，需要设计页面也要写页面，也要写后台。于是就挺杯具的，没有美工细胞的我，兼做了美工
下面是我制作首页新闻部分的设计：
任务如下：
1.用ps制作如下三个图片：
2. 利用上面三个图片，实现如下效果：
首先要先设置body的css属性（字体大小，背景等等）：
body{
margin:0;
font-family:"宋体",Arial,Verdana,Helvetica,sans-serif;
width:100%;
font-size:12px;
color: #3E3E3E;
background:#ffffff;
}
然后编写骨架部分（也就是html部分）：
<div id="right">
<div id="news">
<div class="news_div" style=" ">
<div class="news_ul" style="">
<ul id="main_0"><li id="menu_0" onclick="setTab(0,0)" class="news_li_1" >
<a class="news_a" >最新新闻</a></li>
<li id="menu_1" onclick="setTab(0,1)" class="news_li_2" ><a class="news_a">最新报价</a></li></ul>
</div>
<div>
<p>
<ul id="n0" class="new_contant" style="display:block">
<li>某某某最新票讯</li>
<li>某某某最新票讯</li>
<li>某某某最新票讯</li>
</ul>
</p>
<p>
<ul id="n1" class="new_contant">
<li>某工程站最新票讯</li>
<li>某工程站最新票讯</li>
<li>某工程站最新票讯</li>
</ul>
</p>
</div>
</div>
</div>
<div id="bussiny">
<div class="news_div" >
<div class="news_ul" style=" border-bottom:2px solid #cca655; " >
<ul id="main_1">
<li class="buss_li_1" id="bmenu_0" onclick="setTab(1,0)" ><a class="news_a" >最近报价</a></li>
<li id="bmenu_1" onclick="setTab(1,1)" class="news_li_2" ><a class="news_a" >最新优惠</a></li>
<li id="bmenu_2" onclick="setTab(1,2)" class="news_li_2" ><a class="news_a">最新消息</a></li>
</ul>
</div>
<div id="buss_contant">
<p>
<ul id="b0" class="new_contant" style="display:block">
<li>某某某最新票讯</li>
<li>某某某最新票讯</li>
<li>某某某最新票讯</li>
</ul>
</p>
<p>
<ul id="b1" class="new_contant">
<li>某某某最新爆料</li>
<li>某某某最新爆料</li>
<li>某某某最新爆料</li>
</ul>
</p>
<p>
<ul id="b2" class="new_contant">
<li>某工程站最新票讯</li>
<li>某工程站最新票讯</li>
<li>某工程站最新票讯</li>
</ul>
</p>
</div>
</div>
</div>
</div>
然后写皮肤（css）：
#right{ position:relative; left:500px}
#news{
width:235px;
height:225px;
background: url(images/news_bg.jpg) left top no-repeat;
margin-bottom:10px;
}
#bussiny{
width:235px;
height:234px;
background: url(images/bussiny.jpg) left top no-repeat;
margin-bottom:10px;
}
.news_div{position:relative;top:30px; height:24px; width:230px; left:1px; }
.news_ul { width:100%; border-style: none ; border-bottom:2px solid #acbe82;height:24px; }
.news_ul ul{ list-style-type:none}
.news_ul li{ display:block; float:left;}
.news_ul_1 a:link{ color:#00F; text-decoration:none;}
.news_ul_1 a:visited { color: #00F; text-decoration:none;}
.news_ul_1 a:hover { color: #c00; text-decoration:underline;}
.news_li_1 {width:62px; position:relative; left:-30px; top:2px; height:24px;background-image:url(images/news_bander.gif); background-position:top}
.news_li_2 {width:62px; position:relative; left:-30px; height:24px; background-image:url(images/news_bander.gif); background-position:0px 52px; }
.buss_li_1 {width:62px; position:relative; left:-30px; top:2px; height:24px;background-image:url(images/news_bander.gif); background-position:0px 104px}
.news_a { left:7px; position:relative; top:7px; display:block; cursor:pointer;}
.new_contant{position:absolute; top:44px; left:-10px; list-style-type:circle; display:none}
整个过程其实蛮简单的，但是，实际操作过程，却郁闷死我，div的位置和背景的位置非常难调，还有就是浏览器的兼容性问题，差点没把握累死。自己看来真的不是美工的料
现在骨架和皮肤做好了···我们接下来就是要让他动起来···这个对于我们程序员来说，就是小菜一碟了：
<script type="text/javascript">
//m=0为news，m=1为buss
function setTab(m,n){
var tli;
var mli;
if(m==0)
{
tli=document.getElementById("menu_"+n)
mli=document.getElementById("main_"+m).getElementsByTagName("li");
for(i=0;i<mli.length;i++){
if(n==i)
{
mli[i].className="news_li_1";
document.getElementById("n"+i).style.display="block";
}
else
{
mli[i].className="news_li_2";
document.getElementById("n"+i).style.display="none";
}
}
}
else
{
tli=document.getElementById("bmenu_"+n)
mli=document.getElementById("main_"+m).getElementsByTagName("li");
for(i=0;i<mli.length;i++){
if(n==i)
{
mli[i].className="buss_li_1";
document.getElementById("b"+i).style.display="block";
}
else
{
mli[i].className="news_li_2";
document.getElementById("b"+i).style.display="none";
}
}
}
}
</script>
到这里，tab终于搞定了···
