在制作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;

width:0;

position:relative;

top:6px;

margin:0 auto;

display: none;}

使用position:relative制作下边框下的小三角的更多相关文章

  1. 火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题

    消失示例: td{ width:40px; height:28px; position:relative; background:#ccc; } 出现问题 问题原因: 我的理解是各个浏览器之间对于ba ...

  2. IE7下position:relative的问题

    如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.

  3. position relative top失效的问题,温习下常用两种的居中方式

    因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} <!DOCTYPE h ...

  4. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  5. css制作三角形,下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  6. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  7. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. layer-list实现只有左、右和下边框的圆角矩形

    项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现, ...

  9. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

随机推荐

  1. 如何得到Slave应用relay-log的时间

    官方社区版MySQL 5.7.19 基于Row+Position搭建的一主一从异步复制结构:Master->{Slave} ROLE HOSTNAME BASEDIR DATADIR IP PO ...

  2. Python常见面试(习题)——水仙花数

    今天,给大家分享一个习题. 用python输出100到1000以内的水仙花数. 相信很多小伙伴都听到过,或者遇到过这个题目. 那么今天就来带大家做一做这道题. 首先,我们要知道什么是水仙花数, (@_ ...

  3. laravel 5.1 Model 属性详解

    <?php namespace Illuminate\Database\Eloquent; /** * 下面提到某些词的含义: * 1.覆盖: 在继承该类 \Illuminate\Databas ...

  4. Codeforces 463D Gargari and Permutations(求k个序列的LCS)

    题目链接:http://codeforces.com/problemset/problem/463/D 题目大意:给你k个序列(2=<k<=5),每个序列的长度为n(1<=n< ...

  5. SOA并不能解决高并发事务

    传统SOA架构其实无法面对高并发事务. 这种方式不适合热点资源,也就是高并发场合. 虽然乐观锁短,但是容易产生脏数据. SOA是以服务这个方式对外提供功能,我们很显然喜欢在Service中加上JTA等 ...

  6. hdu 5011 nim博弈 (2014西安网赛E题)

    n堆石子,每次可以选一堆取走至少一个,之后你可以不操作或者把该堆石子分成两堆,每堆至少一个,和还是原来(取完石子后)的石子个数. Sample Input1121 131 2 3 Sample Out ...

  7. RocketMQ 部署

    1. 下载 下载RocketMQwget https://github.com/alibaba/RocketMQ/releases/download/v3.2.6/alibaba-rocketmq-3 ...

  8. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  9. 【LOJ】#2508. 「AHOI / HNOI2018」游戏

    题解 把没有门的点缩成一个点 如果\(i->i + 1\)的钥匙大于\(i\),那么\(i\)不可以到\(i + 1\),连一条\(i\)到\(i + 1\)的边 如果\(i->i + 1 ...

  10. 【LOJ】 #2308. 「APIO2017」商旅

    题解 分数题可以想到分数规划,我们预处理出从i到j卖什么货物赚的最多,然后把每条边的边权改成"利润 - 效率 × 时间" 用spfa找正环即可 代码 #include <bi ...