css 教学实例 漂亮的搜索框
css 教学实例 漂亮的搜索框
发布时间:2016-12-27 来源:查字典编辑
摘要:如图:我就身教一回,代码如下:css教学(学生:Dream·Sky).search{background:url(img/se...

如图:

css 教学实例 漂亮的搜索框1

我就身教一回,代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>css教学(学生:Dream·Sky)</title>

<style type="text/css">

.search{background:url(img/searchbg.jpg);width:250px;height:37px;}

/*这里之所以用两个div是为了解决float:left的时候,margin-left在ie与ff下的不同解析*/

.s_1{float:left;width:12px;}

.s_3{float:left;width:2px;}

.s_2{float:left;width:185px;}

.s_4{float:left;width:25px;}

.txt{width:170px;border:0;margin-top:8px;color:#CCCCCC;}

.btn{margin-top:5px;}

</style>

<script type="text/javascript">

function f(){

alert(document.getElementById("Text1").value);

}

</script>

</head>

<body>

<div>

<div>&nbsp;</div><>

<div>

<input id="Text1" type="text" value='搜索我们的产品..' />

</div>

<div>&nbsp;</div>

<div><input type="image" src="img/btnbg.jpg" /></div>

</div>

</body>

</html>

打包下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类