XHTML,CSS 秘密技术 定义列表代替实现页面的布局,表单提交 操作 附原代码。

本文介绍了使用CSS结合定义列表(<dl>)进行网页布局的方法,并探讨了其相较于<div>的优势。通过实际案例展示了定义列表如何应用于产品信息展示及表单设计中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自从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元素 的用途 就是把文档分成逻辑部分 。更令人担心的是,这个理由与使用表格进行布局的理由完全一样。这使人 很担心定义列表开始被滥用。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值