用表格和表单制作如下网页。完整html代码

html-css09

用表格和表单制作如下网页。完整html代码,第1张

1、使用标签<table></table>定义网页的表格,使用style赋值类型将显示在网页。

2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。

3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。

4、使用<caption></caption>定义表格的标题。

5、表格分为三个部分,表头部,表主体,表尾部。

6、表头部和主体分别放标题和表格的内容,而表的尾部通常放的是页数。

从结构上看,你的代码少了个结束div的标记。从样式上看,这兼容性定有问题。

样式的思路应该是,li左浮动,定大小。a只定颜色,字体大小等样式。a的class可以去掉。

哦,忘了说,最重要的是,你的文档没有声明,这样的做法是不好的,以后别人调试你代码的兼容性也是有问题的。

em这个单位,不同浏览貌似有不同的解释,建议用绝对的px

颜色也是尽量用数值。

综合上述,我重写了一下你的代码。

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style>

*{ margin:0padding:0},ul,li{list-style:none}<!--这行是简单的重置样式,去除了所有浏览的默认设置。 -->

#head{height:20pxwidth:100%background:#999overflow:hidden}

#head ul{width:800pxmargin:0 auto}

#head li{display:inlinefloat:left height:20pxoverflow:hiddenwidth:200pxborder-left:#fff 1px solidmargin-left:-1px}

#head a{ display:blockwidth:200pxheight:20pxbackground:#999color:#ffftext-align:centertext-decoration:none}

#head a:hover{background:#000}

</style>

</head>

<body>

<div id="head">

<ul>

<li><a href="index.php" class="dya STYLE4">首页</a></li>

<li><a href="#" class="dya STYLE4">收藏夹</a></li>

<li><a href="#" class="dya STYLE4">黑匣子</a></li>

<li><a href="#" class="dya STYLE4">联系方式</a></li>

</ul>

</div>

</body>

</html>