<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset = utf-8"/>
<title>回家网</title>
<link rel="stylesheet" href="css/style07.css" type="text/css"/>
<script type="text/javascript" src="js/js07.js"></script>
</head>
<body onload="changeColor()">
<div id="top_bg">
<div id="top">
<ul class="left">
<li><a href="#">登录</a></li>
<li><a href="#">免费注册</a></li>
</ul>
<ul class="right">
<li class="list" onmouseover="change('list_cur','block')" onmouseout="change ('list_cur','none')">
<span>个人中心</span>
<div id="list_cur">
<a href="#">已完成订单</a>
<a href="#">未完成订单</a>
<a href="#">我的保险</a>
<a href="#">账户安全</a>
<a href="#">个人信息</a>
<a href="#">常用联系人</a>
</div>
</li>
<li class="line">|</li>
<li><span>使用须知</span></li>
<li class="line">|</li>
<li><span>收藏夹</span></li>
<li class="line">|</li>
<li><span>货物快运</span></li>
<li class="line">|</li>
<li><span>联系我们</span></li>
</ul>
</div>
</div>
<div id="nav_bg">
<div class="nav">
<h2><img src="images/LOGO.jpg"/></h2>
<ul>
<li><a href="#">汽车票</a></li>
<li><a href="#">时刻表</a></li>
<li><a href="#">汽车站</a></li>
<li><a href="#">酒店预订</a></li>
<li><a href="#">旅客问答</a></li>
</ul>
</div>
</div>
<div id="banner">
<img src="images/banner.jpg"/>
</div>
<ul id="week">
<li><a href="#">01月27日</br>周三</a></li>
<li><a href="#" class="next">01月28日</br>周四</a></li>
<li><a href="#" class="next">01月29日</br>周五</a></li>
<li><a href="#" class="next">01月30日</br>周六</a></li>
<li><a href="#" class="next">01月31日</br>周日</a></li>
<li><a href="#" class="next">02月01日</br>周一</a></li>
<li><a href="#" class="next">02月02日</br>周二</a></li>
</ul>
<table id="tb1" class="table">
<tr class="title">
<th>出发时间</th>
<th>始发站/首发站</th>
<th>计划车型</th>
<th>票价</th>
<th>购票</th>
</tr>
<tr>
<td class="txt1">06:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td>
<td>¥<span class="colors">100</span></td>
<td><a href="#" class="buy">购票</a></td>
</tr>
<tr>
<td class="txt1">07:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td>
<td>¥<span class="colors">100</span></td>
<td><a href="#" class="buy">购票</a></td>
</tr>
<tr>
<td class="txt1">08:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td>
<td>¥<span class="colors">100</span></td>
<td><a href="#" class="buy">购票</a></td>
</tr>
<tr>
<td class="txt1">09:30</td>
<td class="txt2"><span class="red">始</span>省汽车客运站<br/><span class="blue">终</span>阳江</td>
<td>空调坐席</td>
<td>¥<span class="colors">100</span></td>
<td><a href="#" class="buy">购票</a></td>
</tr>
</table>
<div id="footer">
赶快回家版权所有2000-2016京ICP备08001421号 京公网安备110108007702
</div>
</body>
</html>
body,ul,p,dl,dt,dd,h1,table,tr,td,th,h2,li{margin:0;padding:0;list-style:none;outline:none;border:0;}
body{color:#6C6C6C;font-family:"微软雅黑";font-size:12px;}
a:link,a:visited{text-decoration:none;color:#6C6C6C;}
a:hover{text-decoration:none;}
#top_bg{width:100%;height:30px;background:#F7F7F7;}
#top{width:980px;height:30px;line-height:30px;margin:0 auto;}
.left{float:left;}
.right{float:right;}
#top li{float:left;padding:0px 10px 0px 0px;}
#top .line{color:#CCC;}
.right li{cursor:pointer;border:1px solid #f7f7f7;}
.right li span{padding:0px 9px;}
.right .list{position:relative;}
.right #list_cur{width:95px;display:none;position:absolute;left:-1px;top:30px;background-color:#FFF;border:1px solid #EEE;}
.right #list_cur a{display:block;padding:0 10px;line-height:28px;color:#6C6C6C;}
.right #list_cur a:hover{background:#F5F5F5;}
#nav_bg{width:100%;height:95px;background:#fff;border-bottom:d3d3d3;}
.nav{width:980px;margin:0 auto;height:100px;}
.nav h2{height:70px;padding-top:25px;float:left;}
.nav ul{float:left;}
.nav ul li{float:left;}
.nav ul li a{display:block;padding:0 40px;height:95px;line-height:96px;font-size:14px;border-bottom:5px solid #d3d3d3;}
.nav ul li a:hover{color:#e67616;border-bottom:5px solid #e67616;}
#banner{width:980px;height:519px;margin:0 auto;}
#week{width:980px;height:80px;margin:30px auto;}
#week li{float:left;}
#week a{display:inline-block;width:137px;height:50px;border:2px solid #ffc393;text-align:center;padding-top:28px;background:#fff8f2;}
#week .next{border-left:0;}
#week a:hover{background:#fff;border-bottom:2px solid #fff;}
.table{width:980px;border-collapse:collapse;margin:0 auto;border:1px solid #e8e8e8;font-siz3:14px;}
.table tr{height:90px;text-align:center;background-color:#ffe8c8;}
.table .title{background-color:#f8f8f8;height:30px;color:#999;font-size:16px;}
.txt1,.colors{font-size:24px;color:#ff7000;}
.table .txt2{width:120px;text-align:center;}
.red,.blue{display:inline-block;width:18px;height:18px;background:#ff7600;color:#fff;line-height:18px;text-align:center;}
.blue{background:#06F;}
.buy{width:100px;height:30px;background:#ff7600;display:inline-block;line-height:30px;color:#fff;}
.buy:line,.buy:visited{color:#fff;}
.buy:hover{background:#ff9942;}
.table .even{background-color:#fff5e6;}
#footer{width:100%;height:80px;background:url(../images/footer_bg.png) repeat-x;color:#555;text-align:center;line-height:80px;margin-top:50px;font-size:14px;}
function change(myid,mode)
{
document.getElementById(myid).style.display=mode;
if(mode=='block')
{
//设置下拉菜单所在的div
document.getElementById(myid).style.border="1px solid #eee";
document.getElementById(myid).style.borderTop="none";
//设置鼠标滑过的li
document.getElementById(myid).parentNode.style.backgroundColor="#fff";
document.getElementById(myid).parentNode.style.border="1px solid #eee";
document.getElementById(myid).parentNode.style.borderBottom="none";
}
else
{
//当不显示下拉菜单时，鼠标滑过的li
document.getElementById(myid).parentNode.style.backgroundColor="";
document.getElementById(myid).parentNode.style.border="";
}
}
function changeColor()
{
//获取所有行
var trs=document.getElementById('tb1').getElementsByTagName("tr");
//为偶数行添加class属性，且不包括行标题
for(var i=2;i<trs.length;i=i+2)
{
trs[i].className="even";
}
}
5663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
