CSS高级教程之CSS的定位属性和实例

时间:2008-10-06 10:48:21  来源:第二电脑网上收集  作者:

  第二电脑网导读:/><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"...
  正文: Css定位属性允许你对元素进行定位。


CSS 定位 (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>

定位:绝对定位

本例演示如何使用绝对值来定位元素。

<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>

设置元素的形状

本例演示如何设置元素的形状。此元素被剪入这个形状中,然后被显示出来。

<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="bookASP/ target=_blank class=infotextkey>asp20.gif" width="120" height="151"></p>
</body>
</html>

溢出

本例演示当元素内容太大而超出规定区域时,如何设置溢出属性来规定相应的动作。

<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>

垂直排列图象

本例演示如何在文本中垂直排列图象。

<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="/i/example_moving.gif" />
image inside a paragraph.
</p>
<p>
This is an
<img class="bottom" border="0"
src="/i/example_moving.gif" />
image inside a paragraph.
</p>
</body>
</html> 《CSS高级教程之CSS的定位属性和实例》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2017.html


关键字:

关于《CSS高级教程之CSS的定位属性和实例》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td