发布于 2015-04-20 14:57:53 | 207 次阅读 | 评论: 0 | 来源: 网友投递
CSS层叠样式表
CSS（层叠样式表） 即 级联样式表 。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
本文为大家讲解的是有关css图片背景定位技术使用讲解，感兴趣的同学参考下。
示例讲解
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
button.cc{
background-image:url(xl.png);
background-position:left bottom;/*用背景图片定位的时候一定要写宽高*/
width:150px;
height:40px;
outline:none;
}
button.cc:hover{
color:#fff;
}
.aa input{
border:none; /*去掉默认的灰色边框*/
height:27px;
width:145px;
background-image:url(xl.png);
background-position:left -140px;/*-40一定是一个图片从上到下面的距离*/
outline:none; /*去掉默认的橙色边框*/
display:block;
float:left;
padding-left:5px;
}
.bb input{
border:none;
height:28px;
width:30px;
background-image:url(xl.png);
background-position:-145px -140px;
display:block;
float:left; /*控制哪个就让那个左对齐，如果没有效果试试把他改成盒子模型*/
outline:none;
}
</style>
</head>
<body>
<button class="cc">用户注册</button>
<button class="cc">提交</button>
<br><br><br>
<form action="save.php" method="post">
<div class="ab">
<div class="aa">
<input type="text" name="seach" placeholder="搜索关键字">
</div>
<div class="bb">
<input type="submit" name="seach" value="">
</div>
</div>
</form>
<br><br><br><br><hr>
<img src="xl.png">
</body>
</html>