网页设计与制作-日职网络教学平台

网页设计与制作
唐海和

1

2

3

4

5

6

7

8

9

10

11

任务5.1 表格布局

发布时间：2017-09-23 16:13 发布人：唐海和浏览次数：3075

【任务5-1】使用表格布局页面

【任务描述】

（1）创建外部样式文件0501global.css，在该样式文件中定义必要的CSS样式。

（2）创建外部样式文件05user.css，在该样式文件中定义必要的CSS样式。

（3）创建网页文档0501.html，该网页主体结构主要应用Div CSS进行布局，局部结构应用了表格和段落进行布局。网页0501.html还应用了CSS样式对表格、单元格、表单控件和超链接进行美化。

【任务实施】

1．创建外部样式文件0501global.css

创建外部样式文件0501global.css，保存在文件夹“5-1css”中，在该样式文件中定义必要的CSS样式。

源代码如下：

body {

font-family: "Trebuchet MS", Arial, Helvetica, "sans-serif，宋体";

font-size: 12px;

}

a {

text-decoration: none;

color:#333;

}

a:hover {

text-decoration: underline;

color:#c00;

}

img { border: none; }

2．创建外部样式文件05user.css

创建外部样式文件05user.css，保存在文件夹“5-1css”中，在该样式文件中定义必要的CSS样式。

源代码如下：

#user_wrapper {

margin:10px auto;

width:990px;

overflow:hidden;

}

#steptitle {

background:url("../images/bg_sl.gif");

height:41px;

line-height:41px;

padding-left:10px;

font-size:18px;

font-family:"微软雅黑", "microsoft yahei", "microsoft jhenghei";

font-weight:normal;

text-align: center;

}

#stepcontent1column {

margin:0px auto;

width:990px;

}

#stepcontent1column table {

*border-collapse:collapse;

border-spacing:0;

line-height:1.8;

}

#stepcontent1column .table_b {

width:100%;

margin-bottom:0px;

border-left:1px solid #ccc;

border-bottom:1px solid #ccc;

}

#stepcontent1column .table_b td, #stepcontent1column .table_b th {

border-top:1px solid #ccc;

border-right:1px solid #ccc;

padding:5px;

font-size:12px;

background:#f2f2f2;

}

#stepcontent1column .table_b td {

height:21px;

line-height:150%;

}

#stepcontent1column .fred {

color:#f00;

}

#stepcontent1column .table_b td .btn1 {

background:url("../images/05bt.gif") no-repeat;

width:62px;

height:23px;

display:block;

color:#000;

white-space:nowrap;

margin:0 0 0 1px;

}

#stepcontent1column .shopbtn {

text-align:center;

clear:both;

}

#shopmsg {

background:url("../images/bg_sl.gif");

padding: 10px 20px;

}

3．创建网页文档0501.html

创建网页文档0501.html，保存在文件夹“5-1”中，该网页主体结构主要应用了Div CSS进行布局，局部结构应用了表格和段落进行布局，该网页主体布局结构的HTML代码如下所示。还应用了CSS样式对表格、单元格、表单控件和超链接进行美化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>易购网－我的购物车</title>

</head>

<body>

<div id="steptitle"><strong>我的购物车</strong></div>

<tbody>

<tr>

</tr>

<tr>

<a href="#" target="_blank"><img src="images/20100501.jpg" alt="商品图片"

width="80" height="60" /></a>

</td>

<td>

<a href="#" target="_blank">惠普（hp）10.1英寸led屏笔记本电脑</a>

</td>

</td>

</td>

</tr>

<tr>

<a href="#" target="_blank"><img src="images/20100502.jpg" alt="商品图片"

width="80" height="60" /></a>

</td>

<td>

<a href="#" target="_blank">苹果apple ipod nano 五代 8gb 2.0英寸紫色带摄像头</a></td>

</td>

</td>

</tr>

<tr>

<a href="#" target="_blank"><img src="images/20100503.jpg" alt="商品图片"

width="80" height="60" /></a>

</td>

<td>

<a href="#" target="_blank">全新行货惠普hp deskjet f2288 彩色打印复印扫描一体机</a></td>

</td>

</td>

</tr>

</tbody>

</table>

<p>商品总计:<span class="fred">3</span>件  

商品总金额:<span class="fred">4876.00</span>元  

税后金额：<span class="fred">4930.00</span>元

</p>

<input id="clearbtn" style="border-width:0px;"

type="image" src="images/05shopbtn1.gif" name="clearbtn" />

<input id="updatebtn" style="border-width:0px;"

type="image" src="images/05shopbtn2.gif" name="updatebtn" />

</p>

<input id="nextbtn" style="border-width:0px; "

type="image" src="images/05check_out.png" name="nextbtn" />

</p>

</div>

</body>

</html>

4．保存网页与浏览网页效果
保存网页0501.html，然后按快捷键F12浏览该网页，其浏览效果如下图所示。

图片.png

+添加讨论

秦申洋 2017-09-28 10:00:43
老师讲的太好了，学会了好多！
魏玉娜 2017-09-28 10:14:56
老师讲的很好，简单易懂
刘佳 2017-09-28 10:16:55
条理清晰，很好
李培 2017-09-28 10:17:07
老师讲得简单易懂，学习了很多东西。
杨子龙 2017-09-28 10:21:18
这枯燥的课程能让老师讲解的如此生动，代码如此好记，给老师点个赞。
徐勤翰 2017-09-28 10:21:55
老师讲课很细致
杨永吉 2017-09-28 10:23:51
讲课生动形象，容易理解，棒棒哒
付志芳 2017-09-28 10:23:56
老师讲的声情并茂，我收获很多
陈艺丹 2017-09-28 10:24:05
学到了很多东西，谢谢老师
韩治政 2017-09-28 10:25:22
非常好
邵璐璐 2017-09-28 10:25:55
老师棒棒哒
丁杨 2017-09-28 10:26:32
代码虽然很枯燥，但老师讲课很生动

网页设计与制作唐海和

任务5.1 表格布局

网页设计与制作
唐海和