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>
