2023-12-25 01:09来源:m.sf1369.com作者:宇宇
<html>这是网页的头部标记 <\html>这是网页 的尾部标记
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>table</title>
<style type=text/css>
*{
margin: 0 auto;
}
tr{
height: 30px;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table border=1 cellspacing=0 cellpadding=0 width=960>
<tr><th height=120 colspan=2>网站横幅</th></tr>
<tr><td height=40 colspan=2>网站导航</td></tr>
<tr>
<td height=500></td>
<td></td>
</tr>
<tr><td height=40 colspan=2>版权信息</td></tr>
</table>
</body>
</html>
<div>
<span>
<font>
<input>
<form>
<lable>
<p>
<dl>
<dt>
<dd>
<ul>
<li>
<h1>
熟能生巧,多制作一些网页,一些常用的标记想忘都忘不了……
HTML全称是超文本标记语言,即(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
在WWW上的一个超媒体文档称之为一个页面(page)。作为一个组织或个人在万维网上放置开始点的页面称为主页Homepage,或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。 网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。所以你的说法是对的,不去死抠字眼没有错误。如果死抠,把设计换成英文Design也没有任何问题。。。:)
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。
先看看xhtml的结构:
很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似
下来是css:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {
}
解释:
1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
2.border-collapse:separate;边框独立,就像表格没有合并单元格以前
3.display:table-row;将.row作为表格行tr显示
4.display:table-cell;将.row的下级div作为表格单元格td显示
5.然后定义宽度
这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.