<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS美化的漂亮搜索框</title>
<style type="text/css">
body{
font: normal 100% 'Arial','Helvetica','Verdana',sans-serif;
color: #333;
}
p {
padding: 12px 0;
margin: 0;
font-size: .8em;
line-height: 1.5;
}
form {
margin: 0;
}
#search_box {
width: 201px;
height: 31px;
background: url(http://files.jb51.net/demoimg/200912/bg_search_box.gif);
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
width: 159px;
background: none;
font-size: .8em;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
}
</style>
</head>
<body>
<div id="search_box">
<form id="search_form" method="post" action="#">
<input type="text" id="s" value="Search" class="swap_value" />
<input type="image" src="http://files.jb51.net/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
</form>
</div>
</body>
</html>
效果见附件图片
- 大小: 403 Bytes
- 大小: 137 Bytes
- 大小: 3.2 KB
分享到：
相关推荐
本主题聚焦于使用CSS美化网页搜索框，帮助提升用户界面的吸引力和用户体验。我们将探讨几种不同的设计方法，以实现美观且功能完备的搜索框。 1. **基础样式设定** - 设置搜索框宽度：通过`width`属性调整搜索框...
"CSS和图片做漂亮搜索框"这个主题，就是关于如何利用这两种工具提升网站搜索框的视觉吸引力和用户体验。 首先，CSS是用于控制网页布局和样式的语言，它可以用来定义搜索框的外观，包括边框、背景色、字体样式、尺寸...
总之，使用CSS美化搜索框是提升网站专业性和用户体验的重要步骤。通过精心设计的样式，我们可以使搜索框既实用又美观，从而吸引用户进行更频繁的搜索操作。在实践中，不断尝试和调整CSS属性，可以创造出满足项目需求...
内容索引:脚本资源,CSS特效,CSS,搜索框 CSS美化几款漂亮的网页搜索框，四种风格，都非常漂亮，请根据您的网页风格选择使用，学习CSS美化的朋友，也可以参考参考，这些美化框基本都是纯CSS实现的，很有学习价值哦。
纯CSS实现的导航条意味着不依赖JavaScript，这通常有利于提高页面加载速度，同时对搜索引擎优化（SEO）友好。 【描述】中提到的“纯css打造漂亮蓝白色横向导航条代码”进一步确认了这个项目的目标，即创建一个视觉...
3个不同风格的Calendar日历日期选择js插件I4个CSS3炫酷文字动画特效 4个jQuery手机移动端...7款CSS3制作美化的搜索框样式代码 7款非常漂亮的CSS3鼠标hover图片动画特效 7款酷炫HTML5+Canvas全屏网页背景动画特效18款
标题 "6种非常精美的Web前端搜索框展示（附源码）（二）" 提示我们，这是一个关于Web前端设计的教程，特别是聚焦于搜索框的美化和实现。在这个部分，我们将探讨六个不同的搜索框设计实例，每个都具有独特的美学和...
本资源"漂亮彩色的企业CSS模板_漂亮 彩色 企业 蓝色 橙色 单栏 大图.zip"提供了一套适用于企业网站的色彩丰富、设计美观的CSS模板，旨在帮助开发者快速搭建具有专业感和吸引力的网页界面。 首先，让我们深入理解CSS...
【描述】"防搜搜首页官网搜索框样式，javascript+css，非常漂亮"意味着这个项目主要依赖于JavaScript和CSS来构建一个美观且功能齐全的搜索框。JavaScript是一种客户端脚本语言，常用于处理网页的动态效果和用户交互...
本主题聚焦于如何利用CSS来美化并增强网页中的SELECT元素，这是一个常见的表单组件，通常用于用户选择一个或多个选项。"用CSS定义的漂亮菜单"意味着我们将探讨如何通过CSS实现既实用又美观的下拉菜单效果。 首先，`...
这个压缩包文件“婚恋交友类型网页CSS模板10_婚恋 交友 红色 企业 黑色 漂亮 大气.zip”包含了用于构建婚恋交友类网站的前端资源，主要关注CSS（层叠样式表）设计。在网页设计中，CSS是用于控制网页元素样式和布局的...
1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...
它通常包含导航菜单、logo、搜索框、联系方式等，是用户获取网站信息和操作的主要入口。此模板的头部设计很可能兼顾了美观与实用性，使得用户能够方便快捷地找到所需信息。 “软件”和“企业”标签暗示这个模板特别...
3. **search.gif** - 这可能是一个搜索框的图形，用于用户在网站上查找特定内容。 4. **submit.gif** - 这可能是提交按钮的图像，用户点击后可以执行搜索或其他操作。 5. **test_1.gif 和 test_2.gif** - 这些可能...
为了使搜索菜单看起来更漂亮，我们需要使用CSS来调整其外观。可以设置背景色、边框、字体样式、布局等。同时，还可以为高亮的匹配项添加特定的样式，如改变背景色或加粗文字，以突出当前最匹配的选项。 **4. jQuery...
1. **CSS美化表格**： - **边框与间距**：CSS可以用来定义表格的边框样式、宽度和颜色，调整单元格之间的间距，使得表格看起来更整洁。 - **背景色和文本样式**：为表头、行或列设置不同的背景色，可以增加对比度...
Tablecloth利用CSS3的特性，如选择器、过渡效果、动画等，实现了表格的美化。它可以轻松地调整单元格的背景色、边框、字体样式，甚至可以创建响应式布局，适应不同的设备屏幕。此外，Tablecloth还支持自定义主题，...