博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML--CSS样式表--格式与布局
阅读量:5073 次
发布时间:2019-06-12

本文共 1348 字,大约阅读时间需要 4 分钟。

一:position:fixed

    锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗

例如:

网页标题
练习
View Code

 

二:position:absolute(绝对的)

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

 2)外层有position:absolute(或relative),那么div相对于外层边框定位。

例如如下代码:

页面标题
View Code

三.position:relative

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

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

网页标题
a
aa
View Code

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

四.分层(z-index)

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

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

网页标题
a
aa
View Code

五.float:left、 rigth (float:流式布局流式布局常用值:left、rigth)

Leftright时不用给他规定位置(lefttop),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

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

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

 

网页标题
练习hi安居诶安居卡死的房价房价房价房价是打开v网号安居佛得角覅及覅手机覅工会卡少女夏萨

 

超链接样式:

View Code

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

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

 

半透明效果

透明区域
//样式表中的代码:.box{
opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50) background-color:red; width:200px; heigth:200px;}

 

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

 

转载于:https://www.cnblogs.com/supermeimei/p/5074327.html

你可能感兴趣的文章