关闭

CSS3让div自动收缩及属性选择器

标签: html5css3实例div自动收缩
1279人阅读 评论(0) 收藏 举报
分类:

定义div大小后,当里面的内容超过的div的大小,css2中内容后溢出来,在css3中div可以随着内容的大小改变而改变。 实例的图片用css3不能显示,原因未知! 但把文档类型由“XHTML 1.0 Transitional”改为web页面也就是“XHTML Mobile 1.0”后在谷歌浏览器中能显示,用手机访问也不能显示图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#image_css3{
width:450px;
padding-top:20px;
padding-left:14px;
border-image:url(test3.png) 3 stretch stretch;
-moz-border-image:url(test3.png) 3 stretch stretch;
}

#image_css2{
margin:3px;
width:450px;
height:104px;
padding-left:14px;
padding-top:20px;
background:url(test3.png);
background-repeat:no-repeat;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="image_css3">
	.css3示例1<br/>
	.经测试在IE、火狐和谷歌浏览器中背景图片不能显示<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
</div>

<div id="image_css2">
	.css2示例1<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
</div>


</body>
</html>
效果图:

css3属性选择器,让我们能像使用正则表达式一样判断该改变哪个元素的属性,具体内容见代码。经过测试主流浏览器都能支持。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.divcss2{background:yellow}
</style>

<style type="text/css">
[id="3"]{background-color: #0000FF}
</style>
<style type="text/css">
[id*="4"]{background-color:#CCFFFF}
</style>
<style type="text/css">
[id^="5"]{background-color:#00FFFF}
</style>
<style type="text/css">
[id$="6"]{background-color:#CCCCCC}
</style>
<style type="text/css">
a[href="use"]:after{
	content:"可以方便的根据不同需要改变css";
	color:#00FF66;
}
</style>
</head>

<body>
<div id="1" class="divcss2">div1 用css2来改变背景颜色</div>
<div id="2">div2</div>
<div id="3">div3 用css3的选择器来改变背景颜色</div>
<div id="4">div4 用[att*=val]的方式改变颜色---<font color="red">只要包含value就改变</font></div>
<div id="4_ss">div4 用[att*=val]的方式改变颜色</div>
<div id="ss_4ss">div4 用[att*=val]的方式改变颜色</div>
<div id="s47k">div4 用[att*=val]的方式改变颜色</div>
<div id="5">div5 用[att^=val]的方式改变颜色----<font color="red">以val开头</font></div>
<div id="5_xxoo">div5 用[att^=val]的方式改变颜色</div>
<div id="xxoo_5">div5 用[att^=val]的方式改变颜色</div>
<div id="5dd">div5 用[att^=val]的方式改变颜色</div>
<div id="dd5">div5 用[att^=val]的方式改变颜色</div>
<div id="6">div6 用[att$=val]的方式改变颜色----<font color="red">以val结尾</font></div>
<div id="xxo6o">div6 用[att$=val]的方式改变颜色</div>
<div id="xxoo_6">div5 用[att$=val]的方式改变颜色</div>
<div id="6dd">div5 用[att$=val]的方式改变颜色</div></br></br>
<a href="use">作用</a>
</body>
</html>
运行效果:




1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78483次
    • 积分:1286
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:14篇
    • 译文:0篇
    • 评论:13条
    文章分类
    最新评论