CSS格式与布局
一、position:fixed (针对主页面body进行定位，并且在下拉页面是处于原位置不动，通常为网站右下角弹窗。）
<style sype=“text/css”>
.a
{
width:100px;
height:100px;
backgroun-color:red;
border:1px solid 黑;
margin:10px;
left:20%;
position:fixed;
</style>
<body>
<div class="a"></div>
</body>
二、position:absolute 在页面上是浮动的，进行的是绝对定位
.a
{
width:100px;
height:100px;
backgroun-color:red;
border:1px solid 黑;
top:10px;
left:20%;
position:absolute;
</style>
<body>
<div class="a"></div>
</body>
三、position:relative 实际在页面上占有一定位子，相对定位，所占用的剩下空间左上角定位，只是位置的平移，而所占有的位置不变
四、分层
所有编辑的成都可以看成一摞纸进行罗列，在Z轴上进行分成，因此我们需要太高所在层需要将
z-index:2;进行设置
五、float:left 从左向右进行分布
overflow：hidden； 超出部分进行隐藏
.a:hover
overflow:visible 悬浮位子超出部分可见
例 鼠标悬浮选择显示所隐藏内容
<style>
.a
{
width:80px;
height:40px;
background-color:#0CC;
position:relative;
float:left;
margin-left:5px;
overflow:hidden;}
.a:hover
{
overflow:visible;}
.b
{
width:80px;
height:120px;
position:relative;
background-color:#C06;
top:40px;
}
.c
{
width:400px;
height:400px;
border:#909 solid 1px;
background-color:#0CC;
top:300px;
left:300px;
text-align:center;
position:absolute;}
</style>
</head>
<body>
<div class="a"><div class="b"></div></div>
<div class="a"><div class="b"></div></div>
<div class="a"><div class="b"></div></div>
<div class="a"><div class="b"></div></div>
<div class="c">
</body>
六、半透明效果
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}
<div class="box"
- 上一篇 »53个CSS不可或缺的技巧
- 下一篇 »CSS3多列布局与伸缩布局