NeQrhk
NeQrhk
采纳率30.6%
2017-01-08 14:35

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • Admin_yi Zhany9 4年前

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

    点赞 评论 复制链接分享
  • LD0807 海之沐 4年前

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

    点赞 评论 复制链接分享
  • sunny_desmond carrykingdow 4年前

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

    点赞 评论 复制链接分享
  • u014074697 张大教主 4年前
    //箭头是通过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>
    
    点赞 评论 复制链接分享

相关推荐