显示效果
- 属性:
visibility
- 取值:
visible
默认值,表示显示
hidden
元素隐藏,仍然在文档中占位
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#d1,#d2{
width: 200px;
height: 200px;
}
#d1{
background-color: red;
visibility: hidden;
}
#d2{
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
- 属性:
opacity
设置元素透明度 - 取值:0(透明)~1(不透明)
注意:- 元素设置opacity属性,所有内容(背景颜色,文本颜色)都会实现半透明效果
- 子元素会继承父元素中半透明效果
- 如果父子元素都设置了opacity,子元素最终的效果是在父元素半透明的基础上再进行半透明
子元素的最终效果 = 父元素opacity * 本身opacity
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#d1{
width: 300px;
height: 300px;
background-color: red;
color: blue;
font-size: 40px;
opacity: 0.5;
}
#d1 h1{
font-weight: normal;
opacity: .5;
cursor: crosshair;
}
img{
width: 300px;
/*vertical-align: top;*/
}
</style>
</head>
<body>
<div id="d1">
元素设置了透明度
<h1>子元素</h1>
<img src="cat.jpg">
</div>
</body>
</html>
列表属性
- 列表本身是块级元素,自带内外边距,带有项目符号
- 属性
- 属性:
list-style-type
设置项目符号
取值:
none
(取消项目符号)
disc
实心原点
circle
空心原点
square
实心方块
… - 设置项目符号为图片
属性:list-style-image
取值:url(‘图片路径’) - 设置项目符号的位置
属性:list-style-position
取值:inside / outsine(默认)
设置项目符号出现在内容框的外部还是内部 - 必须掌握
属性简写
list-style:none;
常用来取消列表项目符号<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> ul{ background-color: pink; /*list-style: circle;*/ /*list-style: square;*/ list-style-image: url('web.ico'); list-style-position: inside; } </style> </head> <body> <ul> <li>麻辣烫</li> <li>凉皮</li> <li>饭</li> </ul> </body> </html>
- 属性: