合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

CSS的相对定位及偏移量做精美界面

2010-06-09 12:56:07建站知识 165

标题栏图片有向上的偏移量。利用样式:top:-10px;position:relative; 可以让图片脱离容器,定位于容器之外(本例子中图片的容器是class="main"的div)。但有一点需要注意的是,图片位置虽然脱离容器了,但它依旧在容器里占有一定空间,该例子中,无论怎么设置.main选择器的height属性,绿色条纹的高度总不会小于20px(图片的高度)。 sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
标题栏的文字我同样用了top,bottom,left,right这些偏移量属性,一开始想只利用vertical-align:middle; 属性让文字垂直居中,但失败了,文字一直和底线对齐,无奈又用了偏移量。 sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
绿色条纹使用了CSS滤镜产生渐变效果,可惜据说只有IE支持:-( sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
末端“确定”按钮也是用了相对定位及偏移量的技术。sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
CSS代码:sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

a:link,a:active,a:visited{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color: #2D4D97;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-decoration: none;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a:hover {}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-decoration: none;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color: #FF9900;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.title{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
color:#006600;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:20px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:65%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border:none;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.title span{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:inline;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:relative;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
top:-4px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.title img{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:relative;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
top: -10px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
left: 5px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:inline;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:0px 10px 0px 0px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:0px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
height:20px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.main{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:10px 20px 30px 20px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding: 10px 20px 10px 20px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:100%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border:#CCCCCC 1px solid;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.main .item{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
vertical-align:middle;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
margin:5px 0 5px 0;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.main .foot{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
position:relative;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
bottom:-10px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
left:80%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
display:block;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border:#CCCCCC 1px solid;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
border-bottom:none;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:15%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
text-align:center;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.main .foot a{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background-color:#F3FCE0;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:2px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:100%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
.main .foot a:hover{}{sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
background-color:#D8EBFE;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
padding:2px;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
width:100%;sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
}sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
html代码:sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<div class="title">sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<img src="/uploadfile/2010/0406/20100406075717790.gif"> <span>请填写角色基本信息</span>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="main">sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="item">角色名称:sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<input name="textfield" type="text" size="20" />sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="item">角色描述:sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<textarea name="textfield2" cols="50" rows="5"></textarea>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div class="foot">sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<a href="#nogo">确定</a></div>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>sjZ合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
CSS相对定位,css定位