阅读本文前，读者需要有一定的html + css的技术功底。
不说废话，先附上search输入框的成果截图：
分析：
1. 组件分解：分解为如下几个部分：
1）外层：增加一个容器，如div
2）内层：
一个input输入框
一个按钮
2. 设置样式：
1）容器样式
增加border属性，样式代码：
border: solid 1px #ddd;
增加border圆角边框，样式代码：
border-radius: 5px
2）输入框样式
去除border样式：
border: none
去除轮廓样式：
outline: 0 none;
3）按钮样式
同样，去除border样式
border: none
给按钮增加搜索背景图片样式：
background-image: url("images/ico_sear.gif");
background-repeat: no-repeat;
设置display样式为：inline
这样分解完，相信大家就很容易理解了。
并附上完整实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 自制search搜索框组件 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.searchBlock{
width: 110px;
border:solid 1px #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
}
.searchBlock span{
float: left;
}
.searchText{
border: none;
width: 80px;
margin: 2px 5px;
outline: 0 none;
}
.searchBtn{
border: none;
width: 16px;
height: 16px;
cursor: pointer;
background-image: url("images/ico_sear.gif");
background-repeat: no-repeat;
display: inline;
margin: 2px 0px;
}
</style>
</head>
<body>
<div class="searchBlock">
<span>
<input type="text" id="search" name="search" class="searchText">
</span>
<input type="button" class="searchBtn">
</div>
</body>
</html>
搜索图片如下：
通过这样的一个实例，我们也可以做出很多类似的组件了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-11-13 10:44:02