CSS 实用实例 - 蓝色理想

　CSS 实用实例

作者：Linyupark　时间： 2006-07-12　文档类型：翻译　来自：网络维他命

第 1 页 CSS 实用实例 [1]
第 2 页 CSS 实用实例 [2]
第 3 页 CSS 实用实例 [3]
第 4 页 CSS 实用实例 [4]
第 5 页 CSS 实用实例 [5]
第 6 页 CSS 实用实例 [6]
第 7 页 CSS 实用实例 [7]
第 8 页 CSS 实用实例 [8]
第 9 页 CSS 实用实例 [9]

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 全部选择提示：你可先修改部分代码，再按运行]

出处：网络维他命
责任编辑：moby

上一页 CSS 实用实例 [6] 下一页 CSS 实用实例 [8]

◎进入论坛网站综合、网页制作版块参加讨论

相关文章

组合CLASS来完成网页布局风格

作者文章

设计上的精挑细选会削弱网站

浏览器发展/CSS布局/怎样运用?


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule