CSS — 导航栏篇（二）

最新推荐文章于 2024-05-06 13:10:01 发布

畅谈、

最新推荐文章于 2024-05-06 13:10:01 发布

阅读量2.3k

点赞数 16

分类专栏：前端 CSS3 文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/qq_52174675/article/details/122321276

版权

前端同时被 2 个专栏收录

17 篇文章 10 订阅

订阅专栏

CSS3

4 篇文章 1 订阅

订阅专栏

搜索框

在上文 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;		/* 字体样式 */
}

搜索框展示：

搜索框1

在上文我提到，我们还可以添加一些小玩意，例如 🔍（其实这个本质上是一张很小的图片），我们实操一下吧

从 Google 上借的矢量图（.svg 后缀的就是矢量图）：

<!-- 添加图片，代码扔到 search-bar 内 -->
<div class="search-bar-left-image">
    <img class="search" src="../resource/image/search.png" alt="nothing">
</div>

/* 设置图片样式以及定位，可以看到外面先设置 div 属性，再设置 img 标签样式 */

/* 还是采用绝对定位的方式（因为要显示在输入框上方，只能采用定位，如果想要显示在按钮上，可以不采用定位！） */
#header .search-bar .search-bar-left-image{
    position: absolute;
    padding-top:8px;
    left:35px;
    z-index:999;				/* 设置优先级，即重叠时候显示的顺序，值越大越优先显示 */
}

/* 设置图片宽高，我们推荐利用 CSS 进行设置，而不是直接改动图片的大小 */
#header .search-bar .search-bar-left-image img{
    width:24px;
    height:24px;
}