1. 确定使用table来完成布局
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
<tr>
<td>
<table></table>
</td>
</tr>
4.IDEA的补全代码的快捷键是alt+/
输入table然后alt+/，选择table+，可以生成布局。
5.写完一行代码之后，可以用旁边的三角形，进行缩进，把代码缩起来。
6.一般先用table。最外层的table，table+alt+/。用于整个页面的布局。
然后在对每一行进行操作。tr+alt+/。
7.第二行里面有3个单元格，做法不是1个tr弄3个td，
而是tr里面弄1个talbe然后加3个td。
8.超链接是a命令。
9.idea 查找与替换
ctrl+F
ctrl+R
在以后都是结合CSS来用的。
UI给一个设计图。
然后 前端 把这个设计图转变为html。
然后 后端 把html里面的数据，利用代码的形式填充上去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table，用于整个页面的布局-->
<table width="100%" align="center">
<!--第1行-->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!--第2行-->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td><img src="image/logo.jpg" alt=""></td>
<td><img src="image/search.png" alt=""></td>
<td><img src="image/hotel_tel.png" alt=""></td>
</tr>
</table>
</td>
</tr>
<!--第3行-->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ff8c00" align="center" 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" alt="" width="100%" >
</td>
</tr>
<!--第5行 黑马精选-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑马精选
<hr color="ffd700">
</td>
</tr>
<!--第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第7行 国内游-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="ffd700">
</td>
</tr>
<!--第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚5天3晚自由行</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
