python Web： CSS 显示效果

最新推荐文章于 2022-11-12 12:24:11 发布

梦寐_

最新推荐文章于 2022-11-12 12:24:11 发布

阅读量240

点赞数

分类专栏： python Web 文章标签： css

本文链接：https://blog.csdn.net/HHG20171226/article/details/94741759

版权

python Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

显示效果

属性：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>
```

梦寐_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python Web： CSS 显示效果

显示效果属性：visibility取值：visible 默认值，表示显示hidden 元素隐藏，仍然在文档中占位<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"&g...
复制链接

扫一扫

专栏目录