使用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;
width:0;
position:relative;
top:6px;
margin:0 auto;
display: none;}
使用position:relative制作下边框下的小三角的更多相关文章
- 火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题
消失示例: td{ width:40px; height:28px; position:relative; background:#ccc; } 出现问题 问题原因: 我的理解是各个浏览器之间对于ba ...
- IE7下position:relative的问题
如果在IE7中使用position:relative属性,需要在该元素的容器上,同时给予position:relative属性.
- position relative top失效的问题,温习下常用两种的居中方式
因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} <!DOCTYPE h ...
- jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
- css制作三角形,下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- layer-list实现只有左、右和下边框的圆角矩形
项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现, ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
随机推荐
- 如何得到Slave应用relay-log的时间
官方社区版MySQL 5.7.19 基于Row+Position搭建的一主一从异步复制结构:Master->{Slave} ROLE HOSTNAME BASEDIR DATADIR IP PO ...
- Python常见面试(习题)——水仙花数
今天,给大家分享一个习题. 用python输出100到1000以内的水仙花数. 相信很多小伙伴都听到过,或者遇到过这个题目. 那么今天就来带大家做一做这道题. 首先,我们要知道什么是水仙花数, (@_ ...
- laravel 5.1 Model 属性详解
<?php namespace Illuminate\Database\Eloquent; /** * 下面提到某些词的含义: * 1.覆盖: 在继承该类 \Illuminate\Databas ...
- Codeforces 463D Gargari and Permutations(求k个序列的LCS)
题目链接:http://codeforces.com/problemset/problem/463/D 题目大意:给你k个序列(2=<k<=5),每个序列的长度为n(1<=n< ...
- SOA并不能解决高并发事务
传统SOA架构其实无法面对高并发事务. 这种方式不适合热点资源,也就是高并发场合. 虽然乐观锁短,但是容易产生脏数据. SOA是以服务这个方式对外提供功能,我们很显然喜欢在Service中加上JTA等 ...
- hdu 5011 nim博弈 (2014西安网赛E题)
n堆石子,每次可以选一堆取走至少一个,之后你可以不操作或者把该堆石子分成两堆,每堆至少一个,和还是原来(取完石子后)的石子个数. Sample Input1121 131 2 3 Sample Out ...
- RocketMQ 部署
1. 下载 下载RocketMQwget https://github.com/alibaba/RocketMQ/releases/download/v3.2.6/alibaba-rocketmq-3 ...
- Android Studio 3.0正式版填坑之路
原文:https://www.jianshu.com/p/9b25087a5d7d Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...
- 【LOJ】#2508. 「AHOI / HNOI2018」游戏
题解 把没有门的点缩成一个点 如果\(i->i + 1\)的钥匙大于\(i\),那么\(i\)不可以到\(i + 1\),连一条\(i\)到\(i + 1\)的边 如果\(i->i + 1 ...
- 【LOJ】 #2308. 「APIO2017」商旅
题解 分数题可以想到分数规划,我们预处理出从i到j卖什么货物赚的最多,然后把每条边的边权改成"利润 - 效率 × 时间" 用spfa找正环即可 代码 #include <bi ...