元素透明背景
opacity属性用来设置元素背景的透明,它需要一个0-1之间的值:
0:完全透明
1:完全不透明
0.5:半透明但这个属性在IE8及以下的浏览器中不支持,需要使用以下属性代替:
filter: alpha(opacity=透明度);
透明度需要一个0-100之间的值
0:完全透明
50:半透明
100:完全不透明IE6中支持该特性,但在IE Test中测试不出效果,属于软件的一个bug。
背景图片的位置
背景图片默认贴着元素的左上角显示,通过background-position可以调整背景图片在元素中的位置,可选值:
top、right、left、bottom、center中的两个值,来指定一个背景图片的位置。
top left 左上
bottom right 右下
center center 居中
如果只给出一个值,则另一个默认为center。也可以直接指定两个偏移量,第一个为水平偏移量,第二个是垂直偏移量。
background-attachment
设置背景图片是都随页面一起滚动,可选值:
scroll:默认值,背景图片随着窗口一起滚动。
fixed:背景图片固定到某个位置,不随页面滚动,定位永远相对于浏览器窗口。图片整合技术
优点:
将多个图片整合为一张图片里,浏览器只需发送一次请求,可以同时加载多个图片,提高请求速度,提高访问效率和用户体验。table边框
table与td边框之间默认有一个距离,通过border-spacing设置这个距离,但会使边框重叠。
使用border-collapse可以设置表格的边框合并,并且这个属性会使border-spacing属性失效。tr:nth-child(even) 隔行变色,但在IE8及以下浏览器中不支持。
clearfix的最终版本
经过修改后的clearfix是一个多功能的,既可以解决高度塌陷,又可以确保父元素和子元素的垂直外边距不会重叠。
.clearfix:before,
.clearfix:after{
content:”“;
display: table;
clear : both;
}
.clearfix{
zoom:1;
}select
在select中可以使用optgroup对选项进行分组,同一个optgroup中的选项是一组,可以通过optgroup中的lable属性指定分组的名字。
在select中添加一个multiple=”multiple”,则下拉列表变为一个多选的下拉列表。fieldset
使用fileldset定义表单项进行分组,可以将表单项中的同一组放到一个filedset中,使用legend子标签指定组名。框架集
框架集和内联框架作用类似,都是用于在一个页面中引入其他的外部的页面,框架集可以同时引入多个页面,而内联框架只能引入一个,在H5标准中,推荐使用框架集,而不使用内联框架。
使用frameset创建框架集时注意不能和body出现在同一个页面中,使用frame子标签引入页面。
使用frameset布局时使用属性:
rows:指定框架集中的所有页面一行一行的排列。
cols:指定框架集中的所有页面一列一列的排列。
必须选择其中一个属性,并且在属性中指定每一部分所占的大小,在frameset中也可以再嵌套一个frameset。IE6中的png图片问题
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24则会导致透明效果无法正常显示,解决方法:
1.可以使用png8代替png24,但是使用png8代替png24以后图片的清晰度就会有所下降。
2.使用javascript来解决该问题,引入一个外部的JS文件,然后再写一个简单的JS代码。
<script type="text/javascript" src="../DD_belatedPNG_0.0.8a-min.js>"</script>
<script type="text/javascript">
DD_belatedPNG.fix("div,img");
</script>hack
有一些特殊的代码我们只需在某些浏览器中执行,而在其他的浏览器中不需要执行,这时就可以使用CSS hack来解决该问题,不到万不得已的时候尽量不要使用。1.条件hack
条件hack只对IE浏览器有效,其他的浏览器都会将它识别为注释,但IE10及以上的浏览器已经不支持这种方式了。
<!--[if IE 版本]>
content
<![endif]-->2.属性hack
在样式前面添加_则该样式只有IE6及以下的浏览器才可以识别。
在样式前面添加*只有IE7及以下的浏览器认识。
在样式前面添加\0则只有IE8及以上的浏览器才能识别。
前端H5初学笔记(五)
最新推荐文章于 2023-06-29 17:03:48 发布