HTML--CSS样式表--格式与布局

一：position:fixed

锁定位置（相对于浏览器的位置），例如有些网站的右下角弹窗

例如：

<head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid blue;     /*设置边框粗细，样式，颜色*/

width:100px;     /*设置宽*/

heigth:100px;    /*设置高*/

margin:10px;       /*设置边距*/

background-color:red;     /*设置背景色*/

left:30px;           /*距离左侧*/

bottom:20px;     /*距离底部*/

position:fixed;     /*锁定此位置*/

}

</style>

</head>

<body>

<div id="a">练习</div>

</body>

二：position:absolute(绝对的)

1）外层没有positon:absolute(或relative),那么div相对于浏览器定位。

2）外层有position：absolute（或relative），那么div相对于外层边框定位。

例如如下代码：

<head>

<title>页面标题</title>

<style type="text/css">

.b

{

border:5px solid blue;  /*设置边框线样式 颜色*/

width:100px;   /*设置宽*/

heigth:100px;   /*设置高*/

margin:10px;     /*设置边距*/

background-color:red;   /*设置背景色*/

right:50px;          /*距离右侧*/

bottom:20px;        /*距离底部*/

position:absolute;    /*设置定位，锁定此位置*/

}

.c

{

border:2px solid red;

width:400px;

heigth:200px;

}

</style>

<style type="text/css“>

.d

{

border:2px solid red;

width:400px;

heigth:200px;

position:absolute;

}

</style>

</head>

<body>

<div class="c">c

  <div class="b">b

  </div>

</div>

<div class="d">d

  <div class="bb">bb

   </div>

<div>

</body>

三.position:relative

（相对于把此div包含住的div的某个位置进行固定，如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。）

相对于默认位置的移动。根据如下代码，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。

<head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid red;

width:100px;

heigth:100px;

margin:10px;

background-color:#0F3;

position:fixed;

}

#aa

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

left:20px;

top:50px;

position:relative;

}

</style>

</head>

<body>

<div id="a">a

</div>

<div id="aa">aa

<div>

</body>

(上述代码中，如果aa不包含在a里面，则a是停留在上层，不随着滚动条滚动，会锁定位置；如果aa包含在a里面，则aa会随着a定位的位置移动）

四.分层（z-index）

在z 轴方向分层，可以理解为凤城一摞纸，层数越高越靠上。

在上面relative的示例中，我们看到了aa盖住了a，这是因为后写的代码会盖住前面的代码，那么在不改变代码顺序的情况下，如何让a盖住aa呢，代码示例如下：

<head>

<title>网页标题</title>

<style type="text/css">

.a

{

border:5px solid red;

width:100px;

heigth:100px;

margin:10px;

background-color:blue;

position:fixed;

z-index:;   /*修改这里，默认情况下的index值是1，也就是都是第一层*/

}

.aa

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

left:20px;

top:50px;

position:relative;

}

</style>

</head>

<body>

<div class="a">a

</div>

<div class="aa">aa

</div>

</body>

五.float:left、 rigth （float：流式布局流式布局常用值：left、rigth）

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

overflow:hidden; //超出部分隐藏；scroll，超出范围时出滚动条；

<div style="clear:both"></div> 截断流

 <head>

<title>网页标题</title>

<style type="text/css">

#a

{

border:5px solid blue;

width:100px;

heigth:100px;

margin:10px;

background-color:red;

overflow:scroll;

float:rigth;

}

</style>

</head>

<body>

<div id="a">练习hi安居诶安居卡死的房价房价房价房价是打开v网号安居佛得角覅及覅手机覅工会卡少女夏萨</div>

</body>

超链接样式：

<style type="text/css">

a:link    /*一般链接*/

{

color:blue;

a:visited  /*被访问过的链接的格式*/

{

color:green；

}

a:hover /*设置鼠标指向链接时候的形式*/

{

color:red;

}

</style>

(以上链接，在定义这些状态时有个顺序 l v h a (必须按照这个顺序)，其中a:active：点击超链接时候的状态，可以省略不写，代表点击的时候没有任何状态)

cursor:pointer 表示鼠标指到上面时的形状。这里是小手形状的

半透明效果

<div class="box">透明区域</div>

//样式表中的代码：

.box

{

opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
background-color:red;
width:200px;
heigth:200px;

}

opacity:填充效果 -moz-opacity:透明度

巴特西

HTML--CSS样式表--格式与布局

最新文章

热门文章