搜索框demo

最新推荐文章于 2024-05-27 20:46:13 发布

weixin_30795127

最新推荐文章于 2024-05-27 20:46:13 发布

阅读量192

点赞数

原文链接：http://www.cnblogs.com/YbchengXumin/p/10942354.html

版权

注意事项：主要用到定位和浮动知识点，demo如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>搜索例子</title>
<style type="text/css">
@font-face{font-family: iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);}
body{
font: 12px/1.5 tahoma,arial,sans-serif;
}
a{text-decoration: none;}
.search-container{position: relative;}
.search-tips{float: right;paddding:3px 0 0 15px;}
.search-tips a{color: #6c6c6c}
.search-button{float: right;}
.btn-search{
background-color: #f50;
width: 100px;
height: 45px;
background-position: 0 -200px;
border:0;
cursor: pointer;
}
.search-common-panel{
height: 39px;
background-color: #f50;
overflow: hidden;
padding: 2px 0 4px 77px;
}
.search-common-panel input{
height: 39px;
line-height: 39px;
width: 100%;
border:0 none;
outline: 0;
background-color: #fff;
}
.search-common-panel img{
position: absolute;
top: 16px;
left: 86px;
z-index: 2;
color: #ccc;
}
.iconfont{
font-family: iconfont;
font-size: 12px;
font-style: normal;
}
</style>
</head>
<body>
<div class="search-container">
<div class="search-list"></div>
<div class="search-pannel">
<form>
<div class="search-tips">
<a href="#">
高级<br>搜索
</a>
</div>
<div class="search-button">
<button class="btn-search" type="submit" style="color: white;font-size: 20px">搜索</button>
</div>

<div class="search-common-panel">
<input type="text">
<img src="images/Search_Icon.png" width="16px" height="16px">
</div>

</form>
</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/YbchengXumin/p/10942354.html

weixin_30795127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索框demo

注意事项：主要用到定位和浮动知识点，demo如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> <title>搜索例子</title> <style type="te...
复制链接

扫一扫