格式与布局

position:

1、fixed——position:fixed; /*根据显示窗口的第一显示界面进行定位，直接定死在页面上，跟着滚动条更换位置*/

2、absolute——position:absolute; /*固定显示，一直悬着，不随着滚动条更换位置 */

3、relative——position:relative;/*相对的定位，相对的是上一句代码，使用relati时要先看上一句代码结束的位置*/

<style>
#a
{
    border:3px solid blue;
    height:100px;
    width:100px;
    background-color:#0F0;
    right:100px;
    bottom:100px;
    position:fixed; 
}
.b
{
    border:3px solid blue;
    height:100px;
    width:100px;
    background-color:#0F0;
    right:100px;
    bottom:100px;
    position:absolute;  
}
.c
{
    border:2px solid red;
    height:200px;
    width:400px;
}
.d
{
    border:2px solid red;
    height:200px;
    width:400px;
    position:absolute;
}



</style>
</head>

<body><br />


<div class="c">c<div class="b">b</div></div><!--b在c里边，但b不是相对c定的位 -->
<div class="d">d<div class="b">bb</div></div>

<div id="a">a</div>
</body>

View Code

<style>
#a{
    background-color:#0F0;
    border:2px solid blue;
    height:100px;
    width:100px;
    top:30px;
    left:30px;
    position:fixed;
    /*z-index:2;/*写上z-index:2后，默认情况下，只要比1大，都是第一层*/
    /*overflow:hidden;超出的隐藏*/
    overflow:scroll;/*滚动条,aa还是在a里边，把外层边框撑大，加着滚动条，背景颜色都是绿色*/
}
#aa{
    background-color:#0F0;
    border:2px solid blue;
    height:100px;
    width:100px;
    top:80px;
    left:80px;
    position:relative;/*相对的定位，相对的是上一句代码，使用relati时要先看上一句代码结束的位置*/
}

</style>



</head>

<body>


<div id="a">a<div id="aa">aa</div></div>

</body>
</html>

View Code

z-index:2;写上z-index:2后，默认情况下，只要比1大，都是第一层
/*overflow:hidden;超出的隐藏*/

overflow:scroll;/*滚动条,aa还是在a里边，把外层边框撑大，加着滚动条，背景颜色都是绿色*/

float:right;/*float流式布局，不占用文字的空，两侧广告，照片。占用左右两边空白，在一行上。针对于最后一行代码执行。

title>无标题文档</title>
<style>
#a{
    border:2px solid green;
    height:300px;
    width:100px;
    float:left;}
#b{
    border:2px solid green;
    height:300px;
    width:100px;
    float:right;}/*float流式布局，不占用文字的空，两侧广告，照片。占用左右两边空白，在一行上。针对于最后一行代码执行。*/
/*半透明效果：
　　<div class="box">透明区域<div>
在样式表中的代码为：*/
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
</style>

</head>

<body>123

<div id="b">b</div><div id="a">a</div><!--先有的b，后有的a，区域留白 -->
<div id="b">d</div><div id="a">c</div>
</body>
</html>

View Code

半透明效果：

在样式表中的代码为：

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)——背过、、、

}

360导航的布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360导航</title>
<style>
*
{
    margin:0px; padding:0px;}
#a
{
    border:1px solid #999;
    width:1000px;
    height:100px;
    margin-top:75px;
    left:200px;
    position:absolute;}
#b
{
    border:1px solid #999;
    width:1000px;
    height:60px;
    left:200px;
    top:185px;
    position:relative;}
#c
{
    border:1px solid #999;
    width:200px;
    height:250px;
    margin-top:195px;
    left:200px;
    position:relative}
#d
{
    border:1px solid #999;
    width:790px;
    height:300px;
    margin-top:-252px;
    left:410px;
    position:relative}    
#e
{
    border:1px solid #999;
    width:200px;
    height:100px;
    margin-top:-40px;
    left:200px;
    position:relative}    
#f
{
    border:1px solid #999;
    width:790px;
    height:250px;
    margin-top:-50px;
    left:410px;
    position:relative}
#g
{
    border:1px solid #999;
    width:200px;
    height:1200px;
    margin-top:-190px;
    left:200px;
    position:relative}    
#h
{
    border:1px solid #999;
    width:790px;
    height:800px;
    margin-top:-980px;
    left:410px;
    position:relative}    
#i
{
    border:1px solid #999;
    width:790px;
    height:166px;
    margin-top:10px;
    left:410px;
    position:relative}    
#j
{
    border:1px solid #999;
    width:333px;
    height:300px;
    margin-top:10px;
    left:200px;
    position:relative}    
#k
{
    border:1px solid #999;
    width:333px;
    height:300px;
    margin-top:-302px;
    left:534px;
    position:relative}    
#l
{
    border:1px solid #999;
    width:332px;
    height:300px;
    margin-top:-302px;
    left:868px;
    position:relative}    
    
    
    
</style>
</head>

<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<br />
<br />
<br />
</body>
</html>

View Code