请问一下,这个导航栏的那个箭头的标志,和那些图片是怎么嵌入进去的?

li中怎么加入这些元素,是用background-image吗?
有没有具体的代码参考下

4个回答

csdn的是li里面是div,div的css的background-image,然后取的坐标。实现方式有许多,你可以自己找例子然后查看元素来看。

background: url("../img/") x y no-repeat; x,y为位置坐标

//箭头是通过H5的折现标签<polyline></polyline>,拼成一个三角型,去背景,取边框得到的,下方代码直接拷贝到html中看效果
<style>
    .shape{
        position: absolute; 
        top: 0px; 
        left: 133px; 
        width: 434px; 
        height: 90px; 
        background-color: rgba(33,150,243,1);
    }
    .headline{
        position: absolute; 
        top: 9px; 
        left: 179px; 
        width: 324px; 
        height: 73px; 
        color: rgba(255,255,255,1); 
        font-size: 48px; 
        font-family: Arial, sans-serif; 
        font-style: normal; 
        font-weight: normal; 
        line-height: 57.599999999999994px; 
    }
    .d1{
        position: absolute; 
        top: 7px; 
        left: 16px; 
        width: 292px; 
        height: 59px; 
    }
    .d2{
        display: inline-block; 
        height: 100%; 
        vertical-align: middle;
    }
    .but{
        position: absolute; 
        top: 17px; 
        left: 538px; 
        width: 57px; 
        height: 57px; 
        background-color: rgba(33,150,243,1); 
        border-radius:50px;
        box-shadow:0 0 1px #333
    }
    .svg{
        position: absolute; 
        top: 26%; 
        left: 0; 
        width: 48%; 
        height: 48%; 
        margin: 0 26%; 
    }
</style>

<div data-type="shape" id="color-slot2" class="shape"></div>
<div data-type="headline" dir="ltr" id="headline" class="headline">
    <div class="d1">
        <div class="d2"></div><div class="d2"><span>jQuery MiniUI</span></div>
    </div>
</div>
<div data-type="button" id="button" class="but">
    <svg height="100%" viewBox="0 0 26 42" width="100%" class="svg">
      <polyline fill="none" points="6,3 24,21 6,39" stroke-miterlimit="10" stroke-width="5" stroke="rgba(255,255,255,1)">
      </polyline>
    </svg>
</div>

你的导航栏的图片都没有贴上去。。怎么帮你看。。。 都是回答的都是大神~

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
导航栏,左右箭头,可以点击左右箭头

由于数据多导航栏溢出,所以求个左右可以滑动的按钮。 比如有7个导航栏。页面大小只能显示5个。默认显示12345导航。点击右侧按钮显示23456导航。再点击左侧按钮显示12345导航。就这个意思。。

CSS+div网页设计,导航栏随页面上下滚动,导航栏宽度变化

最近在学习网站设计,在制作导航栏随网页上下滚动的时候,出现了一些错误,希望懂的小伙伴可以帮忙看一下。 我的错误如下: 当页面打开后导航栏是这样的: ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927175_356851.jpg) 但是页面向下拉的时候,虽然导航栏也跟着向下滑动了,但是导航栏的宽度发生了变化: ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927200_304258.jpg) 而我想他的样式不变, 相关代码如下,其中由于我想使页面在放大缩小的时候是同比例的放大缩小,所以设置了导航栏宽度为12%,内容的宽度是88%,且他们两个div外的总div宽度是1210px;这个我不想改变,不知道其他哪里出了问题,希望知道办法的小伙伴不吝赐教,实在感谢~ ![图片说明](http://img..csdn.net/upload/201708/28/1503927402_761154.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927460_937460.jpg) ![图片说明](https://img-ask.csdn.net/upload/201708/28/1503927472_130945.jpg)

iOS导航栏隐藏后出现BUG

一共有①②③三个页面,①push②,②push③。 正常左上角返回没有问题。 当加上边缘滑动返回时,③pop②,②pop①。 如果三个页面都显示导航栏也没有问题。 我这里①是隐藏导航栏的,②③是显示导航栏的。这样就会出BUG了。 当从②左侧边缘往右滑动时,如果只是稍微动一下,而没有返回到① (就是露出一点①页面之后,赶紧往往左滑,确保还停留在②页面) 这时就出问题了,②页面的导航栏没了,③的也没了。 这时只要返回到①页面重新进入就行了。如果说这个BUG影响不大。 但是还是存在一个更严重的BUG,这个着实令我着急啊。 当出现上面这个BUG后,重新从①进入②,没问题。 接着从②进入③,③的title就变成了②的title,③左上角的返回按钮也不管用了,导航栏出现严重的错乱。 有知道这个问题怎么破的吗?(这是苹果的问题,还是我哪里写的不对啊?)

这是关于HTML的两个导航栏问题

1导航栏字段间如何完成间隔 2导航栏类选择器,类+子标签选择器,类+子标签+子标签选择器对代码的影响!最好举例子说明!求大佬们解答

iOS 导航栏遮挡状态栏

我的导航栏是自定义的,布局是从顶部开始的,在ios6上显示没问题,由于ios7上状态栏 是半透明的,所以现在在iOS7上显示为状态栏与导航栏重叠了,具体显示如图: ![图片说明](https://img-ask.csdn.net/upload/201503/04/1425447628_76585.png) 用户体验相当不好,有没有什么方法解决他们的重叠问题。 注:项目中用到了自动布局! 谢谢

HTML关于导航栏布局问题

``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>碧桂园官网</title> <style type="text/css"> *{margin:0 auto;} header{ /*整个导航栏的高度设定*/ width:100%; height:90px; background: red; } header>img{ /*logo的位置*/ width:200px; height:90px; margin-left:100px; } header>div>ul>li>a{ /*导航栏超链接中字体去下划线、加粗、颜色、间隔*/ text-decoration:none; color:#999; font-weight:bold; border-right:dotted thin; padding-right:10px; padding-left:10px; font-size:15px; } .header_nav{ /*整个导航栏的位置*/ width: 100%; display:inline; position:absolute; padding-top:40px; padding-left:300px; } .header_nav ul li{ /*ul去点和横向排列*/ list-style:none; display:inline; } .header_nav>ul>li>ul{ /*二级菜单位置、隐藏*/ position:absolute; padding-top: 40px; display: none; } .header_nav>ul>li>ul>li>a{ /*二级菜单样式*/ font-weight: bold; color: black; text-decoration: none; } .header_nav>ul>li:hover>ul{ /*鼠标经过时显示二级菜单*/ display: block; } </style> <header> <img src="logo.PNG" alt="logo"/> <div class="header_nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于碧桂园</a> <ul> <li><a href="#">公司介绍</a></li> <li><a href="#">企业文化</a></li> </ul> </li> <li><a href="#">产品与服务</a></li> <li><a href="#">新闻中心</a></li> <li><a href="#">投资者关系</a></li> <li><a href="#">人力资源</a></li> <li><a href="#">社会责任</a></li> </ul> </div> </header> </head> <body> </body> </html> ``` ![图片说明](https://img-ask.csdn.net/upload/201906/04/1559625035_544891.jpg) 我模仿碧桂园官网的导航栏自己做了一个 但是在布局那里出现了一个问题,CSS样式中header nav这个样式(我注释是整个导航栏的位置) 我用了width:100%的话,浏览器窗口缩小时导航栏时不会变的,但是在全屏时他右边会有一段空白,像图①那样 但是我如果不用width:100%的话,浏览器窗口缩小后导航栏就会被挤在浏览器边缘右边那里了,像图②那样。 请问应该要怎么设置才能让浏览器全屏的时候右边不会有空白,缩小后导航栏不会被挤在一堆。 还有我想做一个鼠标经过一级导航栏时会显示二级导航栏的功能,大佬们可以上百度搜以下碧桂园的官网看那个效果,我做了出来了,但是那个黑色透明背景我不会做,能指点以下吗?

iOS隐藏系统导航栏用自定义导航栏

前提:1、navigationBarHidden = YES; 2、不要在每个ViewController中addSubView一次,继承父类的方法也不行。 就是想做一个绝对灵活的导航栏,高度不是44,样式也不是只有左右中三个部分。我听一个大神说这是iOS常识,让我查百度,可是我真的查不到,求助啊。

怎么动态的加载导航栏?

这是在SSM框架下做的,比较简单的,没有二级导航栏那种, ![图片说明](https://img-ask.csdn.net/upload/201805/25/1527232772_412974.jpg) 在controller里我已经得到 了导航信息的数据集合,下面是我要查的数据表和代码 ![图片说明](https://img-ask.csdn.net/upload/201805/25/1527232807_734485.jpg) ``` @Controller public class AdminController { //依赖注入 @Autowired private NursingQualityDataService nursingQualityDataService; @RequestMapping(value = "/admin/allData.action") public String allData(Model model){ List<Department> dep_list = nursingQualityDataService .selectAllDepartment(); //这里已经从后台得到数据了?怎么将这个集合里的信息加载到导航栏? } } ``` 能给出详细代码吗

iOS如何固定导航栏返回按钮大小

原因:系统返回按钮会随着push之前的controller.title的长度而变长,从而影响当前controller的标题位置 前提:必须使用系统导航栏自带的返回按钮,不要重新self.naigationBarItem.leftItem = XXX

Android底部导航栏颜色的问题

![图片说明](https://img-ask.csdn.net/upload/201805/18/1526635101_492767.png) 华为手机虚拟按键遮挡底部布局,设置android:fitsSystemWindows="true"属性之后不再遮挡了,但是导航栏的颜色变了,,这是怎么回事了??

百度云天工导航栏请问是怎么做的?

请问,像百度云天工,左侧可以展开回缩导航栏是怎么做的,有什么插件?![图片说明](https://img-ask.csdn.net/upload/201812/10/1544430052_224075.png)![图片说明](https://img-ask.csdn.net/upload/201812/10/1544430063_162485.png)![图片说明](https://img-ask.csdn.net/upload/201812/10/1544430081_408026.png)

这个地底部导航栏是怎么做出来的

首页,订单,我的三个按钮,主要是底部一直悬浮在那儿做导航按钮这个效果怎么弄的![图片](https://img-ask.csdn.net/upload/201510/14/1444787169_488268.jpeg)

android dialog弹出时隐藏导航栏 navigation bar

隐藏安卓底部导航栏之后 弹出dialog或者popupwindow后导航栏会再次显示出来,可以设置在dialog的onStart中再次隐藏导航栏,但是会出现一个导航栏显示出来又马上隐藏掉的一个效果,请问有什么方法能避免这个事情的发生,让弹出dialog时导航栏没有出现?还有就是同样的方法在popupwindow的show和dismiss中无效..

如何实现导航栏的响应式css?

资源: 导航栏从数据库中取,且可以从后台添加导航项目,目前已知有导航栏项目8个, 未来有几个未知. 期望:当添加导航项目时.css自动计算导航的长度去除以导航的个数获得导航项目的宽度. 使得导航栏无论添加多少(上限以内),都在一行中显示,且总长度与导航栏的长度一样. 这个可以实现吗?

Android 如何 隐藏导航栏并且禁止其滑出

最近做项目,要求隐藏底部导航栏的同时禁止其上滑出现,平常导航栏的状态是隐藏并且是上滑出现的,而我们的项目就是要求其完全不出现,但是退出我们的app的它的上滑出现功能恢复正常

请问如何使用HTML5+CSS3实现粘性导航栏效果,不通过JS

请问如何使用HTML加CCS实现下面这个功能呢 ``` <script src="jquery-1.11.1.min.js"></script> <div style="height:1900px;background:#FC0;margin-top:40px;position:relative;"> <ul id="napppv" class="yungf"> <li>导航栏项目一</li> <li>导航栏项目二</li> <li>导航栏项目三</li> <li>导航栏项目四</li> <li>导航栏项目五</li> </ul> </div> <script> $(function(){ var a = $('#napppv'), b =a.offset(); $(document).on('scroll',function(){ var c = $(document).scrollTop(); if(b.top<=c){ a.css({'position':'fixed','top':'0px'}) }else{ a.css({'position':'absolute','top':'300px'}) } }) }) </script> ```

求助!!android关于隐藏平板下方导航栏(也就是back,home,recent这三个按键)

需求说明: 当启动APP的时候,去除平板下方导航栏(也可以不去除导航栏,但是必须屏蔽back,home,recent这三个按键的功能), 当退出APP的时候,显示平板下方导航栏(如果之前是屏蔽的,这里就是恢复back,home,recent这三个按键的功能)。 我在网上看了很多这块的列子,基本都是从别人那里复制过来的答案,千篇一律的。而且和我的项目也不相符。 但是大概明白了,要实现这个功能,貌似要进入framework层修改代码,但是我从来没接触过framework,对这块两眼抹黑,最近赶项目,也没时间学习这个。 有没有不进入framework层就可以实现这个功能的?等应付完项目,再学习framework。 还有就是,我在网上找到了一种方法,可以实现去除导航栏的功能,但是当程序退出调用显示导航栏的时候,导航栏还是消失的。 新注册的账号,发了几个帖子,也没有币了。

导航栏刷新问题(导航栏不刷新,而内容刷新)

第一次做网站,用的thinkPHP ,想请教下怎么让导航栏不刷新,而内容刷新?下面这样![图片说明](https://img-ask.csdn.net/upload/201805/26/1527344307_630367.png)

frameset框架,分为左右两边,左边是导航栏,点击左边,右边显示对应的图片img

frameset框架,分为左右两边,左边是导航栏,点击左边,右边显示对应的图片img(仅仅是图片),问题是:如何让图片在右边居中? 谢谢 C币少,见谅

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐