CSS基本使用,五分钟回顾版

	定义一个标签的动画

	首先给这个标签设定animation属性,例如:

	animation: wh_rotate 8s linear infinite;

	动画:动画名称    动画时间   动画方式(这里是线性)  动画结束(这里一直循环)

	然后要单独给动画设置动作 使用

	@keyframes wh_rotate{
		from{transform: rotate(0deg)}
		to{transform: rotate(-360deg)}
	}
	可以定义一个旋转的动画

	那个标签使用了animation属性,名称为wh_rotate 的话就开始旋转
	
	
	
	
	
	<!DOCTYPE html>
	<html>
	<head>
	<style> 
	div
	{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
	}

	@keyframes myfirst
	{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
	}

	@-moz-keyframes myfirst /* Firefox */
	{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
	}

	@-webkit-keyframes myfirst /* Safari and Chrome */
	{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
	}

	@-o-keyframes myfirst /* Opera */
	{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
	}
	</style>
	</head>
	<body>

	<div></div>


	</body>
	</html>
	
	ps:这里的几个animation是针对不同浏览器的,使得一下几个浏览器都适用
    animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Safari and Chrome */

@keyframes 规定动画。
animation 动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态。

alt=“文件被破坏了哦” 是搭配image标签一起使用,当找不到图片时,就显示文字”文件被破坏了”
z-index 显示优先级比如給z-index=-1 这个标签就不会优先显示出来容易被遮挡 给它赋值为10,就很难被覆盖,距离用户更近
transform: rotate(45deg); 元素移动方式有多种,这里的rotate是旋转,还有平移等例如 translate(5px, 5px)就是把这个元素向下向左都移动5px
transform-origin:20% 40%; 这个中心是这个标签得位置,比如100%,0,就是右上角,100%,100%,就是右下角
动画参考地址 https://www.runoob.com/cssref/css-animatable.html .

“< a href=“www.baidu.com” target=“_blank” name=”#three">" target是选择哪个窗口打开这个超链接,_blank在新建窗口name是跳转到这个name,其他标签name如果等于three,这里就可以直接跳到这个那个标签 表示空格br/ 换行符

标签,表示保留预设格式,里面写空格就不需要用空格符,直接打空格 

< dl>声明定义列表
< dt>声明列表项
< dd>定义列表内容
< /dl>

有序列表,出来之后,每个li前面有序号1,2,3
< ol>
< li>
< li>
< /ol>

无序列表,出来之后,每个li前面是一个" · "
< ul>
< li>
< li>
< /ul>

ps:有序列表里面全部是< li>标签,列表嵌套的话,嵌套列表的ul或则ol也是写在li里面
斜体标签 加粗 图片标签可以加上title属性,指着图片可以显示信息

~

块集元素独立占一行

行级元素不支持设置长宽高,内容撑开高度 < a> < strong> < em>
但是行级元素可以设置行高line-height。
ps:span是一个特殊的行级标签,和div(块级标签)一样,没有任何语义(样式)。
通常用来着重显示某行文字中的某个单词
< img>其他属性和行级元素相似,但是可以设置宽高,所以他不属于行级元素也不属于其他元素,不设置的话也是内容撑开高度

< input> size属性是定义输入框长短 maxlength是定义可接受字符长度
<input type=“radio” name=“gender” value=“boy”/ checked>男 checked标记属性,默认选择 男 在h5之前应该写成checked=“checked”

用表格的时候 colspan:单元格占用表格列数
rowspan 单元格占用表格行数
border-collapse: collapse;这个属性是给table的,表明每个项可以合在一起

< video src="" autoplay controls> 自动播放和控制条
< audio src="" autoplay controls> 播放音频
< embed src="" > 播放flash

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值