归档文章 (2011-2017) | 《CSS那些事儿》应用篇

date

2011/01/04

本文是《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）绝对定位改为浮动即可。