zoukankan      html  css  js  c++  java
  • 使用position:relative制作下边框下的小三角

    在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片。

    由于使用背景图片时会有一个问题,选项卡内容字数不同。导致使用背景图片时无法控制它始终在中间显示。



    <ul class="technical_list">
                <li class="active-tab">入门指南<div class="triangle"></div></li>
                <li>Android<div class="triangle"></div></li>
                <li>iOS<div class="triangle"></div></li>
                <li>WebIM<div class="triangle"></div></li>
                <li>REST API<div class="triangle"></div></li>
    </ul>


    样式:

    .technical_list li{
      display: block;
      position: relative;
      float: left;
      margin-left: 30px;
      color: #aaa;
      font-size: 18px;
      line-height: 25px;
      cursor:pointer;
    }

    .message_l .technical_list .technicalCur,
    .message_l .technical_list .active-tab {
      border-bottom: solid 2px #00addc;
      color: #00addc;
    }
    .message_l .technical_list .technicalCur .triangle,
    .message_l .technical_list .active-tab .triangle {
      display: block;
    }

    .triangle{ border-bottom:none;

    border-left:solid 3px #fff; 

    border-right:solid 3px #fff; 

    border-top:solid 4px #00addc; 

    0; 

    position:relative; 

    top:6px; 

    margin:0 auto; 

    display: none;}


  • 相关阅读:
    Java实现找出数组中重复次数最多的元素以及个数
    java经典小算法
    java将数组中的零放到末尾
    BP神经网络
    Centos配置Caffe详解
    JAVA面试题之实现字符串的倒序输出
    Android 发送短信与接收短信
    java 选择排序法
    java数组获取最值
    spring kafka consumer原理解析二
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5398212.html
Copyright © 2011-2022 走看看