CSS 实用实例

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

关键词：
groove
perl
word
html
asp

Classification 分类

怎样显示一个元素？

运行代码框
<html> <head> <style type="text/css"> p {display: inline} div {display: none} </style> </head> <body> <p>A display property with a value of "inline" results in</p> <p>no distance between two elements.</p> <div>And this div section is not displayed!</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个简单的浮动属性使用

运行代码框
<html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> <p> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个有着边框个边距的图象浮动到一个段落的右边

运行代码框
<html> <head> <style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p> In the paragraph below, the image will float to the right. A dotted black border is added to the image. We have also added margins to the image to push the text away from the image: 0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image. </p> <p> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个带说明的图片浮动到右边

运行代码框
<html> <head> <style type="text/css"> div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption. </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

让一个段落中首个字母浮动到左边

运行代码框
<html> <head> <style type="text/css"> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian". </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

建立水平菜单

运行代码框
<html> <head> <style type="text/css"> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> In the example above, we let the ul element and the a element float to the left. The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy. </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将一个元素的相对定位到它的正常位置

运行代码框
<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"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="visible">This is a visible heading</h1> <h1 class="invisible">This is an invisible heading</h1> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

改变鼠标样子

运行代码框
<html> <body> <p>Move the mouse over the words to see the cursor change:</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"> Crosshair</span><br /> <span style="cursor:default"> Default</span><br /> <span style="cursor:pointer"> Pointer</span><br /> <span style="cursor:move"> Move</span><br /> <span style="cursor:e-resize"> e-resize</span><br /> <span style="cursor:ne-resize"> ne-resize</span><br /> <span style="cursor:nw-resize"> nw-resize</span><br /> <span style="cursor:n-resize"> n-resize</span><br /> <span style="cursor:se-resize"> se-resize</span><br /> <span style="cursor:sw-resize"> sw-resize</span><br /> <span style="cursor:s-resize"> s-resize</span><br /> <span style="cursor:w-resize"> w-resize</span><br /> <span style="cursor:text"> text</span><br /> <span style="cursor:wait"> wait</span><br /> <span style="cursor:help"> help</span> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

浏览URL http://www.qqread.com/css/p396806.html进入讨论组讨论。