大家好,欢迎来到IT知识分享网。
<!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备0号 京公网安备2 </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"; } }
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/104354.html

