`
jdhh_hcm
  • 浏览: 11679 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

带小三角形的tab切换效果实现(css&background)css方法兼容性不够完善

    博客分类:
  • css
阅读更多
根据块级元素的border表现形式做的三角形,但是发现在IE系列浏览器里面兼容性不够好,后面改用背景图实现,具体相关代码如下:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>em模拟小三角</title>
<style type="text/css">
*{margin:0;padding:0}
body{font:12px/1.5 simsun;color:#000;text-align:center}
ul,li{list-style:none}
div{margin:0 auto}
.demo{overflow:hidden;margin-top:20px;width:580px;text-align:left}
.demo h3{font-size:14px}
.demo pre{clear:both}

/* css实现三角形,因为IE下的z-index问题,而不采用,归根结底还是设计的问题+IE对z-indexBUG的问题 */
.addondomaintabbox{height:24px}
.addondomaintab{margin-bottom:10px;width:579px;height:24px;font-size:14px}
.addondomaintab li{float:left;margin-right:3px;width:190px;height:24px;background:#ffe8b8;text-align:center;font-weight:bold;color:#f75500;line-height:24px;position:relative}
.addondomaintab em{width:0;height:0;line-height:0;border-width:12px;border-style:dotted dotted dotted solid;position:absolute;top:0}
.addondomaintab .leftem{border-color:transparent transparent transparent #fff9e9;left:0;z-index:1}
.addondomaintab .rightem{border-color:transparent transparent transparent #ffe8b8;left:190px;z-index:2}
.addondomaintab .on{background:#f60;color:#fff;}
.addondomaintab .on .rightem{border-color:transparent transparent transparent #f60;z-index:3}
.addondomaintab .on .leftem{border-color:transparent transparent transparent #fff9e9}

.addondomaintabbox_1{height:24px;position:relative;}
.addondomaintab_1{margin-bottom:10px;width:590px;height:24px;font-size:14px;position:relative}
.addondomaintab_1 li{float:left;width:202px;height:24px;background-image:url(imgs/zz_tab_bg.png);background-repeat:no-repeat;text-align:center;font-weight:bold;color:#f75500;line-height:24px}
.tab_li_1{background-position:0 0}
.tab_li_2{background-position:0 -34px;margin-left:-8px}
.tab_li_3{background-position:0 -68px;margin-left:-8px}
.addondomaintab_1 .tab_li_1_on{background-position:-212px 0;color:#fff}
.addondomaintab_1 .tab_li_2_on{background-position:-212px -34px;margin-left:-8px;color:#fff}
.addondomaintab_1 .tab_li_3_on{background-position:-212px -68px;margin-left:-8px;color:#fff}

</style>
</head>
<body>

<div class="demo">
	<h3>css实现</h3>
	<div class="addondomaintabbox">
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li class="on">1、填写独立域名<em class="rightem"></em></li>
			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li class="on"><em class="leftem"></em>2、审核信息<em class="rightem"></em></li>
			<li><em class="leftem"></em>3、申请提交成功

		</ul>
		<ul class="addondomaintab">
			<li>1、填写独立域名<em class="rightem"></em>

			<li><em class="leftem"></em>2、审核信息<em class="rightem"></em>

			<li class="on"><em class="leftem"></em>3、申请提交成功</li>
		</ul>
	</div>
	<pre>
IE6下有差异,IE没有测(我的IETest新建IE7就挂掉了),IE8兼容,
IE9有差异,FF3.5兼容,chremo10+兼容,Opera10.5兼容,
safari没有装
	</pre>
</div>

<div class="demo">
	<h3>背景图实现</h3>
	<div class="addondomaintabbox_1">
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1_on">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2_on">2、审核信息</li>
			<li class="tab_li_3">3、申请提交成功</li>
		</ul>
		<ul class="addondomaintab_1">
			<li class="tab_li_1">1、填写独立域名</li>
			<li class="tab_li_2">2、审核信息</li>
			<li class="tab_li_3_on">3、申请提交成功</li>
		</ul>
	</div>
	<pre>
基本上表现一致。
	</pre>
</div>

</body>
</html>


总体来说,这是一个思路,写在这里以作记录.
背景图片包含在附件中.
  • 描述: 最终效果图(IE8)
  • 大小: 75.1 KB
  • 描述: css中用到的背景图
  • 大小: 1.2 KB
0
0
分享到:
评论

相关推荐

    css实现三角形及应用示例

    通过这些示例,我们可以看到CSS实现的三角形在网页设计中的多样性和实用性。无论是简单的指示箭头还是复杂的视觉效果,掌握这个技巧都能极大地提升我们的网页设计能力。在实际工作中,不断探索和实践,我们能够创造...

    css实现三角形.zip

    这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例,这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先,我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...

    纯CSS实现多彩三角形有序变化特效动画时尚背景墙.zip

    在本文中,我们将深入探讨如何使用纯CSS技术创建一个多彩三角形有序变化的特效动画背景墙,这是一种在现代网页设计中常用来增加视觉吸引力的方法。这个主题涉及到CSS3的多个重要特性,包括选择器、边框、渐变、动画...

    纯CSS写带边框的三角形

    纯CSS写带边框的三角形

    css--实现透明三角形

    css--实现透明三角形(来自百度web前端工程师试题)

    css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果

    复制代码代码如下: &lt;style&gt; .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px;... /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/

    CSS导航条菜单之带小三角形的实现代码

    这篇文章讲解的CSS实现带有小三角形的导航条菜单代码,是非常实用的一个技巧。 首先,实现带有小三角形的导航条,需要使用HTML结构来搭建基础导航框架,并通过CSS样式来定义其视觉表现。例如,可以创建一个大的div...

    css制作带箭头的css边框

    本示例通过纯CSS技术实现了一个带有箭头的边框效果,无需使用任何背景图片,这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框属性来构建箭头形状,并通过不同宽度的线条来模拟...

    tab下面画线并有效三角

    "Tab下面画线并有效三角"的标题和描述指向的是一个关于如何在Tab组件下方添加动态下划线和切换时伴随的小三角形指示器的实现方法。这种设计通常用于指示当前选中的Tab项,提升用户体验。 Tab组件是UI设计中的一个...

    用css画三角形

    用纯css绘制三角形,不是用图片

    jquery css3三角形菜单图片切换代码

    本文将详细解析"jquery css3三角形菜单图片切换代码"这一主题,帮助你理解如何利用这两项技术实现动态效果。 首先,jQuery是一个JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它的...

    CSS3实现三角小图标

    CSS3的transform可以实现页面元素的扭转、变形等功能。...实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。参考文档: http://blog.csdn.net/u014175572/article/details/51535543

    纯css制作带三角的边框(附效果图)

    通过特殊字符,利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:&lt;!DOCTYPE HTML&gt;&lt;html lang=”en-US”&gt;&lt;head&gt; &lt;meta charset=”UTF-8″&gt; &lt;title&gt;字符...

    CSS实现逼真的三角形播放器按钮

    CSS实现逼真的三角形播放器按钮CSS实现逼真的三角形播放器按钮

    08.code css实现三角形.zip

    若要创建带有渐变效果的三角形,则需要对不同边框设置不同的颜色。 5. 使用`border-radius`来调整边框的圆角,但对创建标准的三角形来说,一般不需要这个属性。 例如,创建一个向下的红色三角形,CSS代码可能如下所...

    css实现带圆角三角型的示例代码

    在本例中,将分享如何使用CSS实现带圆角的三角形,并提供示例代码。这些圆角三角形可用于各种视觉设计元素中,如箭头、标签和界面提示。 首先,CSS中创建三角形的方法是利用边框(border)的特性。一个元素的边框...

    纯CSS打造三角形

    还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!

    css 三角形样式

    在CSS世界中,三角形样式是一种常见的视觉效果,用于创建箭头、指示器或装饰元素。这个主题主要涉及如何利用CSS的基本属性和技巧来构造出看似复杂的几何形状,特别是三角形。下面我们将深入探讨CSS创建三角形的原理...

Global site tag (gtag.js) - Google Analytics