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


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

Android多分辨率适配框架

HTML5前端开发实战系列教程

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

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

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

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


版权声明

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

页面效果

HTML5前端开发实战07-归途车票_第1张图片

页面源码

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()">
		
		<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="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>
		
		<div id="banner"><img src="img/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="tbl" class="table" border="1">
			<tr class="title">
				<th>出发时间th>
				<th>始发站/首发站th>
				<th>计划车型th>
				<th>票价th>
				<th>购票th>
			tr>
			<tr>
				<td class="txt1">06:30td>
				<td class="txt2"><span class="red">span>省汽车客运站<br /><span class="blue">span>阳江td>
				<td>空调坐席td>
				<td><span class="colors">100span>td>
				<td><a href="#" class="buy">购票a>td>
			tr>
			<tr>
				<td class="txt1">07:30td>
				<td class="txt2"><span class="red">span>省汽车客运站<br /><span class="blue">span>阳江td>
				<td>空调坐席td>
				<td><span class="colors">100span>td>
				<td><a href="#" class="buy">购票a>td>
			tr>
			<tr>
				<td class="txt1">08:30td>
				<td class="txt2"><span class="red">span>省汽车客运站<br /><span class="blue">span>阳江td>
				<td>空调坐席td>
				<td><span class="colors">100span>td>
				<td><a href="#" class="buy">购票a>td>
			tr>
			<tr>
				<td class="txt1">09:30td>
				<td class="txt2"><span class="red">span>省汽车客运站<br /><span class="blue">span>阳江td>
				<td>空调坐席td>
				<td><span class="colors">100span>td>
				<td><a href="#" class="buy">购票a>td>
			tr>
		table>
		
		<div id="footer">归途车票版权所有  2018-2028京ICP备08001421号  京公网安备110108007702div>
	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";
	}
}

你可能感兴趣的:(HTML5前端开发实战)