导航
导航
文章目录
  1. 一、CSS滤镜
    1. 1. 文字与背景半透明
    2. 2. 仅背景半透明
    3. 3. IE6显示PNG-24图片
  2. 二、Tab选项卡
    1. 1. 方法一
    2. 2. 方法二
    3. 3. 方法三

《CSS那些事儿》应用篇

本文是 《CSS 那些事儿》阅读笔记 第二篇(应用篇)。本篇中主要介绍CSS滤镜以及Tab选项卡各自实现方式..

一、CSS滤镜

1. 文字与背景半透明

.list_box{
    background:#DCDCDC;
    filter:alpha(opacity=50); // IE 私有CSS滤镜
    opacity:0.5; // FF 私有CSS滤镜
}
<div class="list_box">
    <div class="content">
        <ul><li>小志</li></ul>
    </div>
    <div class="bg"></div> // 仅背景半透明时使用
</div>

2. 仅背景半透明

.list_box{position:relative;}
.list_box li{position:relative;z-index:2;}
.list_box .bg{position:absolute;top:0;left:0;width:200px;height:284px;background:#dcdcdc;filter:alpha(opacity=10);opacity:0.1;}

3. IE6显示PNG-24图片

主要是通过IE的PNG-24转换滤镜实现,PNG-24即24位色彩模式支持8位透明度。

div{
    background:#ff0000 url(png_24.png) no-repeat 0 0;
    _background:#ff0000 none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod='crop')
}

sizingMethod的值:1.image(容器适应图片尺寸)、2.crop(裁剪图片适应容器)、3.(拉伸图片适应容器)

二、Tab选项卡

1. 方法一

这是早期通过iframe框架标签实现的选项卡模式。

<ul>
    <li><a href="#" target="open_url">标签一</a>
    <li><a href="#" target="open_url">标签二</a>
    <iframe scrolling="no" src="#" frameborder="0" name="open_url"></iframe>
</ul>

2. 方法二

这是主流的Tab选项卡实现模式,采取的是标题float浮动布局,选项卡区position绝对定位布局。

<div id="tab">
    <h3 class="up" onclick="go_to(1);">标题一
    <div class="block">文本一</div>
    <h3 onclick="go_to(2);">标题二
    <div>文本二</div>
</div>
#tab{position:relative;width:226px;}
#tab .up{background:#ccc}
#tab h3{float:left;width:114px;height:26px;background:#eee;margin:0 -1px 0 0;}
#tab div{display:none;position:absolute;top:26px;left:0;width:226px;border:1px solid #d4d3d3;border:0 1px 1px;}
#tab .block{display:block;padding-bottom:10px;}
<script type="text/javascript">
    var h=document.getElementById("tab").getElementsByTagName("h3");
    var d=document.getElementById("tab").getElementsByTagName("div");
    function go_to(ao){
        for(var i=0;i<h.length;i++){
            if(ao-1==i){
            h[i].className+=" up";
            d[i].className+=" block";
            }
            else {
            h[i].className=" ";
            d[i].className=" ";
            }
        }
    }
</script>

3. 方法三

该方法采取的是标题和选项卡区均float浮动布局,缺点是缺乏XHTML语义化。

<div id="tab">
    <h3 class="up" onclick="go_to(1);">标题一
    <h3 onclick="go_to(2);">标题二
    <div class="block">文本一</div>
    <div>文本二</div>
</div>

CSS基本不变,将内容区(#tab div)绝对定位改为浮动即可。

支持一下
扫一扫,支持一下