头部搜索栏

我会带着你远行 2022-03-01 03:20 257阅读 0赞

效果：

![2019032116080598.png][]

源码：

<template>
      <div>
        <headers title="学生管理"></headers>
        <div class="search-box">
          <div>
            <img src="../assets/images/magnifyingGlass.png" alt="">
            <input type="text" placeholder="搜索">
          </div>
    
        </div>
    
      </div>
    </template>
    
    <script>
      import headers from '../components/headers.vue'
      export default{
        data(){
          return {}
        },
        methods: {},
        components: {
          headers
        }
      }
    </script>
    
    <style scoped>
      .search-box {
        border: 1rem solid #f2f2f2;
        background-color: #f2f2f2;
      }
    
      .search-box div{
        display: flex;
        width: 100%;
        border-radius:1rem;
        padding:.4rem;
        background-color:white;
      }
    
      .search-box div img {
        padding-right: 0.25rem;
      }
    
      .search-box div input {
        width: 100%;
        border: none;
        outline: none;
      }
    </style>

[2019032116080598.png]: /images/20220301/b10e7492996c48529a69e239e4c88365.png

发表评论取消回复

表情：

评论列表（有 0 条评论，257人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app去除页面头部的标题栏

我们只需要在pages.json中指定page的 style中加入。配置在我们项目根目录的 pages.json中。uniapp项目每个界面都会有一个标题栏。对应...

朴灿烈づ我的快乐病毒、/ 2024年04月22日 07:43/ 0 赞/ 57 阅读

相关 3D 动画搜索栏

3D 动画搜索栏 ![在这里插入图片描述][2355bba3cf604953b88db94d53912cd9.gif_pic_center] HTML 代码 <d

逃离我推掉我的手/ 2023年10月14日 14:30/ 0 赞/ 28 阅读

相关淘宝-静态页面编写（4）--头部搜索/导航栏

头部搜索分块 ![在这里插入图片描述][2020121908233766.png] 首先我们观察这部分，可清晰的将它分成三个模块，左边的淘宝网，中间的搜索栏以

怼烎@/ 2022年12月29日 01:56/ 0 赞/ 142 阅读

相关 uni-app自定义头部栏

<uni-search-bar :radius="100" bgColor='fff' placeholder="搜索" @confirm="search"></uni

落日映苍穹つ/ 2022年12月26日 08:20/ 0 赞/ 119 阅读

相关【PC搜索栏】and design pro搜索栏

> `前言` and design pro 搜索栏地址：[https://preview.pro.ant.design/list/search/articles][ht

àì夳堔傛蜴生んèń/ 2022年12月23日 06:48/ 0 赞/ 125 阅读

相关前端插件之头部tab栏左右滑动

效果图： ![20170901133831094][] 1.css部分 <meta name="viewport" content="width=devic

Love The Way You Lie/ 2022年06月08日 20:45/ 0 赞/ 412 阅读

相关头部菜单栏（选项卡）demo

又来写demo了，一个点击头部菜单栏的选项卡demo，对于初学者来说还是可以参考的。在目前的web（或者webapp）开发中，很少会用这种来写多页面选项卡的，毕竟如果页面内

冷不防/ 2022年04月13日 08:27/ 0 赞/ 209 阅读

相关头部搜索栏

效果： ![2019032116080598.png][] 源码： <template> <div> <headers title="

我会带着你远行/ 2022年03月01日 03:20/ 0 赞/ 258 阅读

相关微信小程序自定义头部导航栏 navigationStyle

![735803-20181009165734626-1757202850.png][] 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： ![73580

深藏阁楼爱情的钟/ 2021年12月14日 13:49/ 0 赞/ 1063 阅读

相关 uni-app 搜索栏

uni-app 搜索栏 1 <template> 2 <view> 3 <view class="content1">

清疚/ 2021年11月16日 06:58/ 0 赞/ 269 阅读