写一个导航栏遇到的问题

字节鎏金师
• 阅读 1979

整体效果
写一个导航栏遇到的问题
导航栏样式
写一个导航栏遇到的问题

期望效果
写一个导航栏遇到的问题
1.左右红色区域宽度能够一致
①②在html里要设定 style="float:left;"
③④在html里要设定 style="float:right;"

css里定义

       ① {margin-left:8%;}
       ④ {margin-right:8%;}

2.搜索框③里的搜索icon能够和搜索框重合

html里设定,搜索框和搜索按钮重合,两个元素都要声position:absoulute,缺一不可。
如下:

<div class="top-header-search" style="float:right; position:relative">

                        <li class="right" style="position:absolute;left:0;top:0">
                            <object class="header-search-img" data="assets/img/home-page/Search.svg" type="image/svg+xml" style="">
                            </object>
                        </li>
                        <li class="right" style="position:absolute;left:0;top:0">
                            <input id="header-search-input" class="ui-autocomplete-input" autocomplete="off">
                        </li>
                    </div>

再去css里设定搜索icon距离搜索框的距离

3.当窗口缩小至一定区域,导航栏无法显示全部内容,有一部分能够被隐藏
@media and screen(写上范围)
.想要溢出隐藏的class{overflow:hidden;}

4.响应式导航栏
导航栏中的每一个class直接的左右padding margin 用百分比来描述

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
Canal+Otter
数据库同步中间件CanalOtter前日篇(2)MySQLInnoDB架构体系!这里写图片描述(https://static.oschina.net/uploads/img/201712/13102527_0Qct.jpg)MySQL体系前
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
Android侧滑菜单(DrawerLayout)的学习
侧滑菜单的简单使用;DrawerLayoutandroid提供的侧滑菜单,能够实现目录推出,就是大家常见的效果,效果图如下;!这里写图片描述(https://static.oschina.net/uploads/img/201706/29113317_a1lf.jpg)DrawerLayout的使用非常简单;只要你提供布局就好;一个左
Stella981 Stella981
3年前
Postman自动登录,请求带token
!这里写图片描述(http://img.blog.csdn.net/20180323182705200?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb2J1ZGluZzAwNw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA/dissolve/70/gra
Wesley13 Wesley13
3年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Stella981 Stella981
3年前
Flutter必备开源项目
首页动态的展示导航栏的显示和隐藏!(https://imgblog.csdnimg.cn/img_convert/3ea448a38224f9eb7f3ec302d4f23163.png)日历模块展示日历的记录,每日记录生成图片和保存图片!(https://imgblog.csdnimg.cn/img_con
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(