谷哥的小弟

谷哥的小弟

关注
发信
关注(28)粉丝(399)

HTML5前端开发实战07-归途车票

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

HTML5前端开发实战07-归途车票-LMLPHP

页面源码

HMTL源码

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>归途车票</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/gohome.js"></script>
	</head>
	<body onload="changeColor()">
		<!--header-->
		<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>
		<!--nav-->
		<div id="nav_bg">
			<div class="nav">
				<h2><img src="img/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>
		<!--banner-->
		<div id="banner"><img src="img/banner.jpg" /></div>
		<!--week-->
		<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="tbl" class="table" border="1">
			<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>
		<!--footer-->
		<div id="footer">归途车票版权所有&nbsp;&nbsp;2018-2028京ICP备08001421号&nbsp;&nbsp;京公网安备110108007702</div>
	</body>
</html>

CSS源码

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

body {
	color: #6C6C6C;
	font-size: 12px;
	font-family: "微软雅黑";
}

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: 5px solid #d3d3d3;
}

.nav {
	width: 980px;
	margin: 5px auto 0;
	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: 95px;
	font-size: 14px;
	border-bottom: 5px solid #d3d3d3;
}

.nav ul li a:hover {
	color: #e67616;
	border-bottom: 5px solid #e67616;
}

/*banner*/
#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-size: 14px;
}

.table tr {
	height: 90px;
	text-align: center;
	background-color: #ffe8c8;
}

.table .title {
	background-color: #f8f8f8;
	height: 30px;
	color: #999;
	font-size: 16px;
}

.table .even {
	background-color: #fff5e6;
}

.txt1,
.colors {
	font-size: 24px;
	color: #ff7000;
}

.table .txt2 {
	width: 120px;
	text-align: left
}

.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:link,
.buy:visited {
	color: #fff;
}

.buy:hover {
	background: #ff9942;
}

#footer {
	width: 100%;
	height: 80px;
	background: url(../img/footer_bg.png) repeat-x;
	color: #555;
	text-align: center;
	line-height: 80px;
	margin-top: 50px;
	font-size: 14px;
}

JavaScript源码

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 = "";
	}
}
/*table*/
function changeColor() {
	//获取所有行
	var trs = document.getElementById("tbl").getElementsByTagName("tr");
	//为偶数行添加class属性，且不包括标题行
	for (var i = 2; i < trs.length; i = i + 2) {
		trs[i].className = "even";
	}
}
08-29 20:37
Powered by LMLPHP ©2024 谷哥的小弟 0.042922