09/11/05。 cathayan.org版权所有,保留一切权利。转载请保留此说明。谢绝商业转载。
<div>
, <p>
, <h1>
, <form>
, <ul>
和 <li>
是块元素的例子。相反地,inline元素的特点是:<span>
, <a>
, <label>
, <input>
, <img>
, <strong>
和<em>
是inline元素的例子。display: block
命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
<div>
放到 <body>
标签下,然后为div指定一个类:
<body>
<div class="container“>
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
text-transform
命令很有用,它有3个值:text-transform: uppercase
, text-transform: lowercase
和 text-transform: capitalize
。第1个会把文字变成全大写,第2个变成全小写,第3个变成首字母大写。这对拼音文字非常有用,即使输入时有大小写错误,在网页上也看不到。position: relative
,如果不行,再考虑为这些元素指定一个宽度试试。display: none
。这非常简单,但有时对某些人这有点没用,他们能去掉这个控制,这时就要用到: position: absolute; left: -9000px
。<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
<body id="contact">
。
#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}