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"

 

posted @ 2016-08-21 15:20  熊猫卡洛斯  阅读(183)  评论(0编辑  收藏  举报