2 neqrhk NeQrhk 于 2017.01.08 22:35 提问

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

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

4个回答

LD0807
LD0807   2017.01.09 09:53

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

Admin_yi
Admin_yi   2017.01.18 17:04

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

u014074697
u014074697   2017.07.18 15:02
//箭头是通过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>
sunny_desmond
sunny_desmond   2017.09.07 13:38

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!