表格、列表相关属性及media queryv和变形与动画相关属性

最新推荐文章于 2020-02-03 23:45:37 发布

IUBKBK

最新推荐文章于 2020-02-03 23:45:37 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/IUBKBK/article/details/89932145

版权

第十一章表格、列表相关属性及media query
11.1表格相关属性
border-collapse属性seperate(边框分开，使得单元格的分割线为双线)和collapse（边框合并，使得单元格的分割线为单线）
border-spacing：设置border-collapse为seperate时，设置两个单元格边框之间的间距。
empty-cells:设置border-collapse为seperate时，该属性才有效，该属性支持show（显示）和hide（隐藏）两个属性值。
table-layout：用于设置表格宽度布局的方法。该属性支持auto和fixed两个属性值。其中auto是默认值，也就是平时常见的表格布局方式；fixed则指定使用固定布局方式。
11.2列表相关属性
list-style:none：去掉ul-li的黑点。
11.3控制光标的属性
cursor属性改变光标在目标元素上的形状

<div style="cursor:all-scroll;">代表十字箭头光标</div>
	<div style="cursor:col-resize;">代表水平拖动线光标</div>
	<div style="cursor:crosshair;">代表十字线光标</div>
	<div style="cursor:move;">代表移动十字箭头光标</div>
	<div style="cursor:help;">代表带问号的箭头光标</div>
	<div style="cursor:no-drop;">代表禁止光标</div>
	<div style="cursor:not-allowed;">代表禁止光标</div>
	<div style="cursor:pointer;">代表手型光标</div>
	<div style="cursor:progress;">代表带进度环的箭头光标</div>
	<div style="cursor:row-resize;">代表垂直拖动线光标</div>
	<div style="cursor:text;">代表文字编辑光标</div>
	<div style="cursor:vertical-text;">代表垂直拖动线光标</div>
	<div style="cursor:wait;">代表进度环光标</div>
	<div style="cursor:n-resize;">可向上拖动的光标</div>
	<div style="cursor:ne-resize;">上、右可拖动的光标</div>
	<div style="cursor:se-resize;">下、右可拖动的光标</div>

11.4media query语法
@media not|only设备类型[and设备特性]
screen计算机屏幕
@media screen and (min-width:1000px)浏览器宽度大于1000px的css样式。
@media screen and (max-width:480px)浏览器宽度小于480px时的css样式。
适应手机屏幕#
第十二章变形与动画相关属性
12.1CSS3提供的变形支持
transform：该属性用于设置变形。该属性支持一个或多个变形函数。
位移变换：translate
旋转变换：rotate
缩放变换：scale
倾斜变换：skew
transform-origin：该属性设置变形的中心点。

<div class="a" style="transform-origin:right bottom;transform:rotate(-25deg);"></div>

12.3CSS提供的Transition动画
transition属性包括：
transition-property：制定对HTML元素的哪个css属性进行平滑渐变处理。
可以指定background-color、width、height等各种标准的css属性。
ease：动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
linear：线性速度。动画开始时的速度到结束时的速度保持不变。
ease-in：动画开始时速度较慢，然后速度加快。
ease-out：动画开始时速度很快，然后速度减慢。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<style type="text/css">
		div{
			width:200px;
			height:160px;
			background-color:red;
			transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;
		}
		
	</style>
	<script type="text/javascript">
		var originWidth=200;
		var originHeight=160;
		var zoom=function(scale,bgColor)
	{
		var target=document.getElementById("target");
		target.style.width=originWidth*scale+"px";
		target.style.height=originHeight*scale+"px";
		target.style.backgroundColor=bgColor;
	}
	</script>
</head>
<body>
	<button onclick="zoom(2,'blue');">fangda</button>
	<button onclick="zoom(0.5,'green');">fandsdgda</button>
	<button onclick="zoom(1,'red');">fangxbsfda</button>
	<div id="target">
	</div>
</body>
</html>

12.4.1同时改变多个属性的动画
CSS提供的Animation动画

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<style type="text/css">
	@keyframes complex{
		0%{
		transform:rotate(0deg) scale(1);
		background-color:#f00;
		}
		40%{
		transform:rotate(720deg) scale(0.1);
		background-color:#ff0;
		}
		80%{
		transform:rotate(1080deg) scale(4);
		background-color:#f0f;
		}
		100%{
		transform:rotate(0deg) scale(1);
		background-color:#00f;
		}
	}
	div{
		background-color:gray;
		border:1px solid black;
		position:absolute;
		left:160px;
		top:120px;
		width:60px;
		height:60px;
	}
	div:hover{
		animation-name: complex;
		animation-duration: 8s;
		animation-iteration-count: 1;
	}
	</style>
</head>
<body>
	<div>dfbsobvvkdsv</div>
</body>
</html>

IUBKBK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格、列表相关属性及media queryv和变形与动画相关属性

第十一章表格、列表相关属性及media query11.1表格相关属性border-collapse属性seperate(边框分开，使得单元格的分割线为双线)和collapse（边框合并，使得单元格的分割线为单线）border-spacing：设置border-collapse为seperate时，设置两个单元格边框之间的间距。empty-cells:设置border-collapse为...
复制链接

扫一扫