html+css归纳(二)

css外边距
	//居中auto
	margin:0 auto;
	第一个0是上下边距为0,auto是左右根据窗口大小相对居中
	//上、下、左、右外边距
	margin-top:
	margin-bottom:
	margin-left:
	margin-right:
	//综合声明外边距
	-----两个值
	margin:x y;
	x:上下
	y:左右
	-----三个值
	margin:x y n;
	x:上
	y:左右
	n:下
	-----四个值
	margin:x y n z;
	x:上
	y:右
	n:下
	z:左

css内边距
	//上、下、左、右内边距
	padding-top:
	padding-bottom:
	padding-left:
	padding-right:
	//综合声明内边距
	-----两个值
	padding:x y;
	x:上下
	y:左右
	-----三个值
	padding:x y n;
	x:上
	y:左右
	n:下
	-----四个值
	padding:x y n z;
	x:上
	y:右
	n:下
	z:左

css列表属性
	//不显示li的点
	list-style:none;
	//替换li前面默认图标
	list-style-image
	//定义列表排序位置
	list-style-position:
	outside:表示列表排序标记的位置不在文本内容里面,并且文本内容不与列表排序的标记对齐
	inside:表示列表排序标记的位置在文本内容里面,并且文本内容与列表排序的标记对齐
	//定义列表排序符号样式
	list-style-type:
	//综合声明列表属性list-style
	list-style:url/样式 position属性;

css伪类和伪元素
	//未访问的链接伪类:link 
	a.选择器:link{属性:属性值} 
	<style type="text/css">
		a.ni:link{
			color:#F00;
			font-size:50px;
		}
	</style>
	</head>
	<body>
		<a class="ni" href="http://www.baidu.com">百度</a>
	</body>
	</html>
	//已访问的链接伪类:visited 
	a.选择器:visited{属性:属性值}

	//鼠标经过时的链接伪类:hover
	a.选择器:hover{属性:属性值}
	//鼠标按下时的链接伪类:active
	a.选择器:active{属性:属性值}
	
伪元素
	//首字母样式设置first-letter
	a 选择器:first-letter{属性:属性值}
	//使用伪元素只能用修饰文本的属性来对伪元素进行修饰,不能用修饰框架之类的属性来对伪元素进行修饰
	//首行样式设置first-line
	a 选择器:first-line{属性:属性值}
	//还有:before、:after

脚本
	基本写法就不用说了
	//替换文本
	<noscript>替换文本</noscript>
	noscript 元素用来定义在脚本未被执行时的替代内容(文本)。
	此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。
	//嵌入对象
	<object codetype="application/java-archive" classid="Dao.java" codebase="Dao.java">
	</object>

单击/双击事件
	//单击事件onclick
	<body>
	   <span onclick="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>
	//双击事件ondblclick
	<body>
	   <span ondblclick="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>

鼠标触发事件
	//鼠标按下事件onmousedown
	<body>
	   <span onmousedown="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>
	//鼠标释放事件onmouseup
	<body>
	   <span onmouseup="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>
	//鼠标停留事件onmousemove
	<body>
	   <span onmousemove="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>
	//鼠标经过事件onmouseover
	<body>
	   <span  onmouseover="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>
	//鼠标离开事件onmouseout
	<body>
	   <span onmouseout="name();">你好</span>
	</body>
	<script type="text/javascript">
		function name(){
			alert(0);
		}
	</script>

键盘触发事件
	//按下键盘按键事件onkeydown
	<input type="text" onkeydown="alert('键盘按下');"/>
	//按下并任意释放一个键事件onkeypress
	<input type="text" 
	onkeypress="alert('按下键盘按键并释放按键');"/>
	//释放键盘按键事件onkeyup
	<input type="text" onkeyup="alert('按下键盘按键并释放按键');"/>

页面事件
	//图片下载时被中断事件onabort
	<img src="bd_logo1.png" onabort="alert(0);"/>
			只支持img标签
	//当前页面的内容将要被改变时触发事件 如:关闭页面
	<body onbeforeunload="alert(0);">
	//页面出错事件
	<img src="image.gif" onerror="alert(0);" />
	支持<img>, <object>, <style>标签
	支持javasrcipt对象:window, image
	//页面加载完事件
	<body onload="alert(0);">
	支持<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>标签
	支持javasrcipt对象:image, layer, window
	//改变浏览器的窗口大小时触发事件
	<body onresize="alert(0);">
	支持标签.....等
	支持javasrcipt对象:window
	//拖动滚动条事件
	<body onscroll="alert(0);">
	//离开页面事件
	<body onunload="alert(0);">
	支持<body>, <frameset>标签
	支持javasrcipt对象:window

表单事件
	//选定元素失去焦点
	<input type="text" onblur="alert(0);"/>
	//选定元素发生改变事件
	<input type="text"  onchange="alert(0);"  value="0"/>
	//当元素获得焦点
	<input type="text"  onfocus="alert(0);"/>
	//表单重置事件
	<form onreset="alert(0);">
		<input type="text"  />
		<input type="reset" />
	</form>
	//表单提交事件
	<form onsubmit="alert(0);">
		<input type="text"/>
		<input type="submit"/>
	</form>

滚动字幕事件
	//字幕内容滚动至显示范围之外事件onbounce
	<marquee behavior="scroll" onbounce="alert(0);" width="300px;">滚</marquee>
	//完成需要显示的内容后事件
	<marquee behavior="scroll"  onfinish="alert(0);" width="300px;">滚</marquee>
	//开始显示内容事件
	<marquee behavior="scroll"  onstart="alert(0);" width="300px;">滚</marquee>

编辑事件
	//出现菜单事件
	<body oncontextmenu="alert(0);">
	//内容被复制后事件
	<body oncopy="alert(0);">
	//内容被剪切时事件
	<body oncut="alert(0);">
	//鼠标拖动事件
	<body ondrag="alert(0);">
	//失去鼠标移动所形成选择焦点事件
	<body onlosecapture="alert(0);">
	//内容不粘贴事件
	<body onpaste="alert(0);">
	//内容被选择时事件
	<body onselect="alert(0);">
	//内容选择将开始发生时事件
	<body onselectstart="alert(0);">

数据绑定
	//数据完成由数据源对象的传送事件
	onAfterUpdate
	//数据来源发生变化时事件
	onCellChange
	//数据接收完成时事件
	onDataAvailable
	//数据源发生变化时事件
	onDatasetChanged
	//全部有效数据读取完毕事件
	onDatasetComplete
	//取消数据传送事件
	onBeforeUpdate
	//取消数据传送时,代替onAfterUpdate事件onErrorUpdate
	取消数据传送时,代替onAfterUpdate事件是指当使用onBeforeUpdate事件触发取消了数据传送,onError事件用来代替onAfterUpdate

外部事件
	//文档被打印后事件
	onAfterPrint
	<body onAfterPrint="alert(0);">
	//文档即将被打印时事件
	onBeforePrint
	<body onBeforePrint="alert(0);">
	//滤镜效果发生变化时事件
	onFilterChange
	<开始标签 onFilterChange=""></闭合标签>
	//按下F1或者帮助选择时事件
	onHelp
	<body onHelp="alert(0);">
	//对象的属性之一发生变化时事件
	<开始标签 onPropertyChange=""></闭合标签>

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值