相关文章
北京网站设计解决div列高度自适的3种常用方法
北京网站设计KS3.0新手提高教程(一)
企通互联科汛商城管理系统介绍
网站设计教程/dreamweaver/入门 Dreamweaver 4 简明教程2(初步认识 Dreamwe
网页设计dreamweaver mx教程二十八:CSS滤镜
网站制作使FrontPage与Dreamweaver亲密合作
北京网站建设Dreamweaver制作网页的图片应用技巧
网页设计用FrongPage设计网页花样
网页设计认识FrontPage 2002扩充插件之五
网站建设用好href的target属性
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网页设计北京网站设计CSS的定位属性和实例
网页设计北京网站设计CSS的定位属性和实例
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>网站设计 www.qitongnet.com
</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="bookasp20.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>