web学习记录7

按钮

btn：link　　：hover　　：active

第一次切换图片时，图片会闪烁，

每次加载一个外部资源需发送一次请求，浏览器在资源被使用时才会加载资源

解决办法，把按钮的各种形态放一张图片上（CSS-Sprite雪碧图），切换状态时设置偏移量即可

background-position设置偏移量

简写属性

background可设置背景相关的所有属性　　无顺序要求　　没数量要求　　不写的属性是用默认值

制作雪碧图

调整画布大小　　ctrl选中图片拖入即可

表格

table标签　　th表头　　tr行　　td列　　border边框　　　块元素

合并单元格　　colspan横向合并单元格　　rowspan纵向合并单元格

border-spacing　　边框距离属性设置

border-collapse　　设置表格边框合并　　collapse　　设置后border-spacing会失效

th 表头　　默认加粗，居中

tr:nth-child（）　　odd偶数行　　even奇数行　　IE8以及以下浏览器不支持

tr：hover{　　}　　指向变格式

当表格很长时  表格分为　　表头thead　　表格主题tbody　　表格底部tfoot

tr td需要写在这些标签当中

tr都是tbody的子元素，不是table的

表格也可以进行网页布局，

表格嵌套　　

外边距传递

clearfix:before{content:"";　　display:table;}

高度塌陷

clearfix:after{content:"";　　display:table;clear:both}

最终版clearfix

.clearfix:before,clearfix:after{content:"";　　display:table;　　clear:both;}

.clearfix{zoom:1;}(支持IE6)

表单

from标签　　必要属性action指向的是服务器地址

input

文本框<input type=“text” name="名称"/>

多行文本域<textarea mame="属性值"></textarea>

提交查询<input type="submit">按钮

url地址？查询字符串　　格式：属性名=属性值&属性名=属性值

value　　指定按钮上的文字　　文本框中即作为默认值显示

密码框<input　type="password" name="名称"/>

单选按钮<input type=“radio” name="名称" value=“属性值”/>　　通过name属性分组　　相同才构成单选　　必须指定value属性来用于提交服务器的值

多选框<input type=“checkbox” name="名称" value=“属性值”/>　通过name属性分组　　相同才构成单选　　必须指定value属性来用于提交服务器的值

重置按钮<input　type="reset" />

单纯按钮<input　type="button" vaule=“按钮”/>　　常与JS合用

 

设置默认值　　加checked=“checked”

下拉列表

select标签　　option来创建列表项　　name属性指定给select　　value属性指定给option

设置默认值　　加selected=“selected”

展开可多选　　加multiple=“multiple”

optgroup分组　　label 组名

buttom标签，也可做按钮　　<buttom >可以使用图片</buttom>

<lable for="配对input的ID">文本</lable>　选择文字即选中输入框

fieldset　　为表单项进行分组

legend　　来指定组名

框架集　　frameset　　与body排斥　　可以嵌套自己　　不会被搜索引擎检索

rows 指定框架集中的所有框架一行一行排列 　　cols一列一列拍 　　二选一 　　需指定每个框占比量 

frame　　指定要引入的页面　　

<frame src=“页面地址”>

条件Hack　　IE10以上不支持

<!--[if IE 6]>

　　相应IE才显示的内容

<![endif]-->

 lt　　gt 　　lte　　gte