HTML/CSS实现的搜索框
谷歌和百度首页的搜索框都是<input>+<button>模式的，bing的搜索框感觉要好点儿。简言之，就是将提交按钮放到<input>中，其实这是做不到的，只能伪装。
1. [代码]主要源代码
<html>
<head>
<title>掬一捧|搜索框的实现</title>
<meta charset="UTF-8">
<style type="text/css">
<!--
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:14px;
}
h1 {
margin-top:0px;
margin-bottom:8px;
}
/* 链接 */
a {
text-decoration:none;
color:#1c00ff;
}
a:hover {
color:#5f00e4;
}
fieldset.search {
padding: 0px;
border: none;
width: 232px;
background:#e0e0e0;
}
fieldset.search:hover {
background: #a8a8a8;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
height: 28px;
width: 200;
margin-right: 0px;
padding-right: 0px;
background: #e0e0e0;
margin: 1px;
}
.search input.box:focus {
background: #e8e8e8 ;
outline: none;
}
.search button.btn {
border: none;
width: 28px;
height: 28px;
margin: 0px auto;
margin: 1px;
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
}http://www.huiyi8.com/hunsha/chuangyi/
.search button.btn:hover {创意婚纱照片
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
}
/* 文章样式 */
.article {
}
-->
</style>
</head>
<body>
<div>
<h2>搜索框</h2>
<form method="get" id="searchform" action="http://blog.iliyang.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="掬一捧" x-webkit-speech>
<button class="btn" title="SEARCH"> </button>
</fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>
HTML/CSS实现的搜索框的更多相关文章
- 图片轮播（bootstrap）与 圆角搜索框(纯css)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- css实现可伸缩的搜索框
效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- 好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...
- weui 搜索框
点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 使用jquery实现搜索框的位置变换
现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...
- bootstrap制作搜索框及添加回车搜索事件
下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...
随机推荐
- Linux 的计划任务(运维基础|可用于提权)
Linux操作系统定时任务系统 Cron 入门 先写笔记: crontab -u //设定某个用户的cron服务,一般root用户在执行这个命令的时候需要此参数 crontab -l //列出某个用户 ...
- socket 、 udp 和 tcp
强调一点: socket . udp . tcp之间的区别. socket只是一种套接字,就是两台电脑两端的东西,中间传输以流的格式进行. IBEO好像是TCP/IP , 无论对于TCP和UDP, ...
- 关于 html 中 table 表格 tr,td 的高度和宽度
http://wenku.baidu.com/link?url=76BZcBS3YyA1QJwE7pCPJKERPex4uSQEQ1LI5ZkwTCtunw2cBTaLI8E71dxUhFW0CH4h ...
- 获取URL的name值 getUrl(url,name) 传入url和key 得到key对应的value
<body> <script type="text/javascript"> var url = "http://192.168.1.82:802 ...
- 并发错误：事务（进程 ID ）与另一个进程已被死锁在 lock 资源上，且该事务已被选作死锁牺牲品
这个是并发情况下导致的数据库事务错误,先介绍下背景. 背景 springboot+springmvc+sqlserver+mybatis 一个controller里有五六个接口,这些接口都用到了spr ...
- [Java] 实验4參考代码
题目.提示.代码.解释都已公布. 提供这些的目的不是要求大家要写得像我写得这样,而是希望大家在实验后看看别人写的代码: 1. 提升理解代码的能力. 2. 不要自满于完毕题目.要明确你的 ...
- 关于cocos2d-x 和安卓之间的相互调用
近期在研究cocos2d游戏移植安卓须要调用非常多方法.所以在研究之中写下它们之间相互调用 首先,cocos2d调用安卓 在一个.h文件里加入头文件 #include <jni.h> #i ...
- DataTable去除空行
protected void removeEmpty(DataTable dt) { List<DataRow> removelist = new List<DataRow>( ...
- 有一个投篮游戏。球场有p个篮筐，编号为0，1...，p-1。每个篮筐下有个袋子，每个袋子最多装一个篮球。有n个篮球，每个球编号xi 。规则是将数字为xi 的篮球投到xi 除p的余数为编号的袋里。若袋里已有篮球则球弹出游戏结束输出i，否则重复至所有球都投完。输出-1。问游戏最终的输出是什么？
// ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<vector> ...
- TP 框架 如果去掉表前缀
#jd_admin_abc 去掉前缀 C('DB_PREFIX')=获取前缀 结果为admin_abc $table_Name=str_replace(C('DB_PREFIX'), '', $tab ...