网页设计中的改变角色

改变元素显示

第1章曾简单地提到,网页设计中可以为属性display设置一个值来影响用户代理显示的方式。既然我们已经深入地了解了视觉格式化,下面再使用本章的概念复习display属性,并讨论它的另外两个值,

display 值:

none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

初始值:  inline

应用于:所有元素

继承性:无

计算值:对于浮动、定位和根元素,计算值可变(见CSS2.1第9.7节),否则,根据指定确定

说明:网站建设CSS2中还有值compact和marker,不过由于缺乏广泛的支持,在 网站建设CSS2.1中已经去掉

我们将忽略与表有关的值,它们将在第11章讨论;在此还忽略了值list-item,因为这个值将在第12章详细介绍。我们已经花了很大篇幅讨论块元素和行内元素,下面介绍inline-block和run-in元素,不过之前先花点时间介绍改变元素显示角色将如何改变布局。

改变角色

设置一个文档的样式时,如果能改变元素的显示角色显然很方便。例如,假设一个div 中有一系列链接,你想把这个div布局为一个垂直边栏:

<div id="navigation ">

<a href ="index. html ">WidgetCo Home</a><a href =""products. html ">Products</a>

<a href="services.htm">Services</a><a href ="fun.html">Widgety Fun!</a>

<a href="support.html">Support</a><a href="about.html" id=""current">About Us</a>

<a href="contact.html ">Contact</a>

</div>

可以把所有链接都放在表单元格中,或者每个链接都包在其自己的div中,或者还可以让它们都是块级元素,如下:

div#navigation a {display: block;}

这会让导航栏div中的每个a元素都是一个块级元素。如果再增加一些样式,可以得到图7-49所示的结果。

对于不支持网站建设CSS的浏览器,尽管导航链接作为行内元素,但网站建设人员希望浏览器能把它们作为块级元素摆放,在这些情况下,改变显示角色就很有用。将链接作为块级元素,就可以像处理div元素一样设置样式,这有一个好处,即整个元素框会成为链接的一部分。因此,如果用户的鼠标指针停留在元素框的某处,他就能点击这个链接。

你可能还想让元素作为行内元素。假设有一个无序的人名列表:

<ul id="rollcall">

<li>Bob c.</li>

<li>Marcio G.</li>

<li>Eric M.</li>

<li>Kat M.</li>

<li>Tristan N.</li>

<li>Arun R.</li>

<li>Doron R.</li>

<li>Susie W.</li>

</ul>

对于以上标记,假设你想让这些名字成为一系列行内名,其间用竖线间隔(另外在列表的左右两端也有竖线)。为此,唯一的办法就是修改其显示角色,以下规则将得到如图7-50所示的效果:

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}

#rollcall li:first-child {border-left: 1px solid;}

还可以采用很多其他方法来在设计中充分利用display。开动脑筋,看看你能有哪些创造!

不过有一点要注意,你改变的只是元素的显示角色,而不是其本质。换句话说,让一个段落生成行内框并不会把这个段落真正变成一个行内元素。例如,在XHTML中,有些元素是块元素,另外一些是行内元素(还有一些是“流”元素,不过暂时不考虑这些元素),行内元素可能是一个块元素的后代,但是反过来则不行。因此,尽管链接可以放在一个段落中,但是链接却不能包围段落,不论如何设计元素的样式,都是如此。考虑以下标记:

<a href="http://www.example.net" style="display: block;">

<p style=" display: inline;">this is wrong!</p>

</a>

这个标记将是无效的,因为块元素(p)嵌套在一个行内元素(a)中。改变显示角色也不会使以上标记变得合法。display之所以得名就是因为它影响的是元素如何显示,而不影响它是何种元素。

网站建设、网络营销咨询专线:0871-63535511(点击可一键拨号)