搜索框

在上文 CSS — 导航栏篇（一），我们已经介绍了导航栏组成要素，以及其中两大元素（LOGO 和选项列表）的书写思路，现在开始介绍第三大元素 —— 搜索框

搜索框的作用，就是让你输入你想要搜索的东西（亏我还一本正经的解释，这玩意有人不懂？？），一般由输入框、按钮两部分拼合而成，你也可以在里面放一些小图案增加美观程度。关于搜索框的介绍就这么多吧，咱还是得撸代码（HTML 相关就不介绍了哈）！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>导航栏（二）</title><!-- 还是遵循代码分离原则 --><link href="CSS/style.css" type="text/css" rel="stylesheet">
</head><body><div id="header"><div class="search-bar"><form method="post" action="#"><!-- 输入框，placeholder 就是占位字符 --><input type="text" name="search_value" maxlength="32" placeholder="请输入搜索内容，例如：畅谈、"><!-- 你可以直接写 <input type="submit">，但是不推荐，还是自己写按钮好 --><button type="submit">Search</button></form></div>
</div></body>
</html>

不添加 CSS 样式的原装搜索框：

那么就这样用吧，谢谢大家看到这里，我们下次再见！

好了，不开玩笑了，我们开始美化操作吧

/* 首先是全局设置，注意我们将 box-szing 的属性设为 border-box，这是为了方便后续的定位 */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置 header 的宽高，这里有一个小技巧，当 height 和 line-height 的值一样时，可以实现垂直居中（但还是别乱用） */
#header {background-color: #008080;height: 100px;line-height: 100px;width: 100%;
}/* 设置搜素框的最大宽度和内边距 */
#header .search-bar {max-width: 500px;padding:0 20px;
}/* 从这里开始，我们正式开始设置搜索框的样式，前面主要负责设置宽高以及内外边距 */
#header .search-bar form {position: relative;                   /* 重点※，我们希望输入框或者按钮的绝对定位以 form 为参照物，而不是默认的浏览器 */
}/* 设置输入框样式，还记得吗？这是属性选择器，CSS 中很常用的选择器之一 */
#header .search-bar form [type=text] {border-radius: 5px;                  /* 圆角 */border: 2px solid #2cb4b4;          /* 边框属性（鼠标不点击也会显示） */outline: none;                       /* 这个是取消鼠标点击时，显示出来的边框，和上边的不一样，注意区分 */background-color: #fff;               /* 背景颜色 */height: 50px;                     /* 高度 */width: 100%;                        /* 宽度，这里设置 100% 的原因是为了让输入框贴合 form 表单 */color: #000;                      /* 字体颜色 */text-align: left;                 /* 文本左对齐 */text-indent: 1em;                    /* 首行缩进一个字符 */font: normal normal 13px Dosis;       /* 字体属性 */
}/* 设置按钮样式 */
#header .search-bar form [type=submit] {border-radius: 0 5px 5px 0;            /* 圆角 */border: none;                       /* 边框属性 */outline: none;                        /* 同上边输入框的设置 */height: 46px;                        /* 高度 */width: 60px;                        /* 宽度 */background-color: #2cb4b4;          /* 背景颜色 */cursor: pointer;                  /* 这是新出现的属性，代表鼠标移动到上面的时候，变成小手的样子 *//* 开始我们的绝对定位，其实在实际书写网页的时候，个人不推荐使用定位，因为可能会导致错版，最好的写法是让元素自动适配页面 */position: absolute;                    /* 由于我们之前设置了 form 的 position 为 relative，所以我们此时的参照物就是 form */top: 28px;                           /* 距离上边框 28 像素，具体的你们自己用 Google 开发者工具试就行 */right: 0;                          /* 距离右边框 0 像素。还记得我们将输入框的宽度设置为 100% 吗，所以右边很容易对齐 */color: #fff;                        /* 字体颜色 */font: normal normal 14px Dosis;       /* 字体样式 */
}

搜索框展示：

在上文我提到，我们还可以添加一些小玩意，例如

CSS — 导航栏篇（二）相关推荐

html 导航右侧弹出层,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
教你玩转CSS 导航栏
目录 CSS 导航栏导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框
html导航栏文字怎么平均,对齐HTML/CSS导航栏中的文本？
好吧,很明显我做错了什么.基本上我试图在我的页面顶部创建一个垂直导航栏,在图片的右侧.对齐HTML/CSS导航栏中的文本? 它应该是这样的: 首页简历联系我不知怎的,它不断结束了这样的: 主页简历 ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
php网页设计导航栏代码,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
css导航栏_CSS：创建导航栏
css导航栏 Every website needs a navgation bar to help visitors navigate around the website. This is gen ...
菜鸟教程html左侧菜单栏,CSS 导航栏
CSS 导航栏导航栏熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接列表作为标准的HTML基础一个导航栏是必须的 .在我们的例 ...
CSS 导航栏选中框背景高亮显示
CSS 导航栏选中框背景高亮显示效果显示以下为实现代码代码片. <!DOCTYPE html> <html lang="en"> <head&g ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...

CSS — 导航栏篇（二）

搜索框

CSS — 导航栏篇（二）相关推荐

最新文章

热门文章