JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JavaEE学习日志（三十八）
商城前端案例
代码实现：使用基本的表格标签进行页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.menu a:link{color: #FFFFFF;}
</style>
</head>
<body>
<!--
头部，黑马logo，正品保证，登陆注册
表格：1行 3列
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<!--黑马logo-->
<td>
<img src="img/logo2.png"/>
</td>
<!--正品保障图片-->
<td>
<img src="img/header.jpg" />
</td>
<!--登陆注册超链接-->
<td>
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
<!--
导航菜单
1*1
-->
<table class="menu" width="1200" height="30" cellpadding="0" cellspacing="0" align="center" bgcolor="black">
<tr>
<td>
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
<a href="#">实用家具</a>
<a href="#">户外用品</a>
</td>
</tr>
</table>
<br />
<!--
广告轮播图
1*1
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="img/1.jpg" width="1200">
</td>
</tr>
</table>
<!--
热门商品文字
图片 1*1
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<h3>热门商品 <img src="img/title2.jpg"></h3>
</td>
</tr>
</table>
<!--
热门商品的展示区域
2*7表格 2行7列
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<!--
跨行操作，2行
-->
<td rowspan="2">
<img src="img/big01.jpg" height="414"/>
</td>
<!--
跨列操作，3列
-->
<td colspan="3">
<img src="img/middle01.jpg" />
</td>
<!--<td></td>
<td></td>-->
<!--冬瓜，图片，文本-->
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
</tr>
<tr>
<!--<td></td>-->
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
</tr>
</table>
<!--
宠物粮食广告
1*1
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="img/ad.jpg" />
</td>
</tr>
</table>
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<h3>热门商品 <img src="img/title2.jpg"></h3>
</td>
</tr>
</table>
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<!--
跨行操作，2行
-->
<td rowspan="2">
<img src="img/big01.jpg" height="414"/>
</td>
<!--
跨列操作，3列
-->
<td colspan="3">
<img src="img/middle01.jpg" />
</td>
<!--<td></td>
<td></td>-->
<!--冬瓜，图片，文本-->
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
</tr>
<tr>
<!--<td></td>-->
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
<td align="center">
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">￥299</font>
</td>
</tr>
</table>
<!--
页面底部：广告图片，超链接
2*1
-->
<table width="1200" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="img/footer.jpg" width="1200" />
</td>
</tr>
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
<br />
Copyright ©2005-2016隔夜听风版权所有
</td>
</tr>
</table>
<br />
<br />
</body>
</html>
frameset框架集
例如：需要实现以下页面布局
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
具体页面代码：注意！需要去掉body标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--把页面进行分割，
rows:按照行切 80,*
上面部分80，下面全满
-->
<frameset rows="80,*">
<!--切割后的上面部分,a.html-->
<frame name="top" src="a.html">
<!--
页面分割，按照列分
cols：按照列分，左边150，右边全满
-->
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
</html>
此时页面
若在b.html文件中加入以下超链接，则可以实现点击后右边进行页面跳转到d.html的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是b.html<br />
<!--target 默认值是"_self"-->
<a href="d.html" target="lower_right">点我是连接</a>
</body>
</html>
