自从CSS的出现 <div> 完全取代了 表格。 用表格
布局已经成为 昨天的事 今天 的网站 高级点的 正如 我现在的这个网站 。 都使用 CSS +<DIV> 布局 了。 但是 国外 一种 被 众多 WEB 提倡者 隐藏的 布局方式 今天我就给大家展示下
网页布局:
国外网站上找到的
<dl>
<dt><img src="images/e-comm_zeldman.jpg" alt="Designing with Web Standards by Jeffrey Zeldman"></dt>
<dt><a href="#">Designing with Web Standards</a>></dt>
<dt><span>Jeffrey Zeldman</span></dt>
<!-- General product information including prices -->
<dd>
<ul>
<li>Dispatched within 24 hours</li>
<li>New Riders</li>
<li>Paperback | June 2003</li>
</ul>
<ul>
<li><span>List Price</span>: �27.50</li>
<li><span>Our Price</span>: �19.25</li>
<li><span>You Save</span>: �8.25 (30%)</li>
<li><a href="#">Used and new</a> from �14.83</li>
</ul>
<ul>
<li><span><abbr title="Average">Avg</abbr> customer review: 5 stars</span></li>
<li><a href="#">Add to basket</a></li>
</ul>
</dd>
<!-- Description for the publisher's notes -->
<dt>Book description</dt>
<dd>You code. And code. And code. You build only to rebuild.
You focus on making your site compatible with almost every browser
or wireless device ever put out there.
Then along comes a new device or a new browser,
and you start all over again.
You can get off the merry-go-round.
It's time to stop.</dd>
<dd>More information on <a href="#">Designing with Web Standards</a>
by <a href="#">Jeffrey Zeldman</a></dd>
</dl>
网页布局 CSS:
dl {
width : 770px; /* width of the wrapper */
margin : 0;
padding : 0;
}
dt {
float : right;
width : 670px;
margin : 0;
padding : 0;
padding-top : 1em;
font-weight : bold;
}
dt.pr-img { /* thumbnail image */
float : left;
width : 100px
}
dt a {
font-size : 120%;
}
dt span a { /* author name */
font-weight : normal;
font-size : 100%;
}
dd {
float : right;
width : 670px; /* width of the list minus thumbnail image */
margin : 0;
margin-top : 0.5em;
padding : 0;
}
dd ul {
float : left;
width : 200px; /* width adjusted for three column example */
margin : 0 10px 0 0;
padding : 0;
list-style-type : none;
}
dd ul li {
margin : 0;
padding : 0;
list-style-type : none;
}
dd ul li span { /* neutral rather than presentational mark-up */
font-weight : bold;
}
下面将介绍 提交表单
这也是从国外找到的 ，但经过我修正的。在IE 和FIREFOX 下通过排版实验。 完全OK。
<dl class="FORM">
<dt> Email:</dt>
<dd><input type="text" name="email" /></dd>
<dt>Name:</dt>
<dd><input type="text" name="name" /></dd>
</dl>
CSS：
.FORM DT {
clear:both;
width:33%;
float:left;
text-align:right;
position:relative;
padding-top:10px
}
.FORM DD {
float:left;
width:66%;
}
下面是为什么 国际顶尖 WEB 提倡者 不暴露 定义列表 的 原因。也很好的说明了 用 定义列表 代替DIV 更好 更方便的原因；
下面是英国 国际顶尖网页设计师 WEB标准倡导者 Andy budd说的话：
这种风格使用定义列表 的理由之一是，没有其他XHTML 元数 能提供 这种 类型的关联。
但是这不完全正确，因为div元素 的用途 就是把文档分成逻辑部分 。更令人担心的是，这个理由与使用表格进行布局的理由完全一样。这使人 很担心定义列表开始被滥用。
