javaweb学习笔记02

175 阅读6分钟

html页面案例:旅游网站首页

效果展示

案例分析:(纯html页面)
    1.确定使用table布局
    2.如果某一行只有一个单元格,则使用<tr><td></td><tr>
    3.如果某一行有多个单元格,则使用

        <tr>
            <td>
                <table></table>
            </td>
        </tr>
代码:
代码实现:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!-- 使用table布局 -->
	<!-- 最外层的table,用于整个页面的布局 -->
	<table width="100%">
		<!-- 第1行 -->
		<tr>
			<td>
				<img src="image/top_banner.jpg" width="100%">
			</td>
		</tr>
		<!-- 第2行 -->
		<tr>
			<td>
				<table width="100%" align="center">
					<tr>
						<td><img src="image/logo.jpg" ></td>
						<td><img src="image/search.png" ></td>
						<td><img src="image/hotel_tel.png" ></td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第3行 -->
		<tr>
			<td>
				<table width="100%" bgcolor="gold" align="center">
					<tr height="45">
						<td><a href="">首页</a></td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
						<td>门票</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第4行 -->
		<tr>
			<td>
				<img src="image/banner_3.jpg" width="100%" >
			</td>
		</tr>
		<!-- 第5行 -->
		<tr>
			<td>
				<img src="image/icon_5.jpg">
				精选
				<hr color="gold">
			</td>
		</tr>
		<!-- 第6行 -->
		<tr>
			<td>
				<table width="95%" align="center">
					<tr>
						<td>
							<img src="image/jiangxuan_1.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_1.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_1.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_1.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第7行 -->
			<tr>
			<td>
				<img src="image/icon_6.jpg">
				圈内游
				<hr color="gold">
			</td>
		</tr>
		<!-- 第8行 -->
		<tr>
			<td>
				<table align="center" width="95%">
					<tr>
						<td rowspan="2">
							<img src="image/guonei_1.jpg" >
						</td>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
					</tr>
					<tr>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_2.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第9行 -->
		<tr>
			<td>
				<img src="image/icon_7.jpg" >
				境外游
				<hr color="gold">
			</td>
		</tr>
		<!-- 第10行 -->
		<tr>
			<td>
				<table align="center" width="95%">
					<tr>
						<td rowspan="2">
							<img src="image/jiangwai_1.jpg" >
						</td>
						<td>
							<img src="image/jiangxuan_3.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
					<td>
						<img src="image/jiangxuan_3.jpg" >
						<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
						<font size="1" color="red">&yen; 899</font>
					</td>
					<td>
						<img src="image/jiangxuan_3.jpg" >
						<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
						<font size="1" color="red">&yen; 899</font>
					</td>
					</tr>
					<tr>
						<td>
							<img src="image/jiangxuan_3.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_3.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
						<td>
							<img src="image/jiangxuan_3.jpg" >
							<p><font size="1" color="">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游)</font></p>
							<font size="1" color="red">&yen; 899</font>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 第11行 -->
		<tr>
			<td>
				<img src="image/footer_service.png" width="100%" align="center">
			</td>
		</tr>
		<!-- 第11行 -->
		<tr>
			<td align="center" bgcolor="gold" height="45" width="100%">
				<font size="1" color="gray">
					版权所有&copy;
				</font>
			</td>
		</tr>
	</table>

</body>
</html>