CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

讨论组：http://group.qqread.com

Positioning 定位

相对定位

运行代码框
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>This is a heading in normal position</h2> <h2 class="pos_left">This heading is moved left to its normal position</h2> <h2 class="pos_right">This heading is moved right to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

绝对定位

运行代码框
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置元素的大小

运行代码框
<html> <head> <style type="text/css"> img { position:absolute; clip:rect(0px 50px 200px 0px) } </style> </head> <body> <p>The clip property is here cutting an image:</p> <p><img border="0" src="/articleimg/2006/07/3744/bookasp20.gif" width="120" height="151"></p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

当元素的内容超过一个指定的范围时会发生什么

运行代码框
<html> <head> <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } </style> </head> <body> <p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p> <div> You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible. </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个图片的垂直对齐

运行代码框
<html> <head> <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> </head> <body> <p> This is an <img class="top" border="0" src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> image inside a paragraph. </p> <p> This is an <img class="bottom" border="0" src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> image inside a paragraph. </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将一个元素放到另一个元素的后面

运行代码框
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="/articleimg/2006/07/3744/bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将一个元素放到另一个元素的后面2

运行代码框
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="/articleimg/2006/07/3744/bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index 1 has higher priority.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

进入讨论组讨论。