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

最新推荐文章于 2024-04-19 05:19:48 发布

飞舞的锄头

最新推荐文章于 2024-04-19 05:19:48 发布

阅读量3k

点赞数 1

分类专栏： HTML5 文章标签： html5 css3 实例 div自动收缩

本文链接：https://blog.csdn.net/bailin0007/article/details/17160679

版权

HTML5 专栏收录该内容

3 篇文章 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>

运行效果：