CSS3实战开发: 纯CSS实现图片过滤分类显示特效

当前位置 : 首页 > 网页制作 > CSS > CSS3实战开发: 纯CSS实现图片过滤分类显示特效

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

来源: 作者: 时间:2016-01-23 10:51
从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗。很多人可能会说,这个这么简单,直接使用javascript或jQuery等前
从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗。
 
很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了。如果你是这一部分人,我也希望你停下脚步,看看这篇教程。因为在今天这篇教程中,我会用另一个思维方式来思考问题,我会带领大家,完全脱离js,怎么来实现切换效果以及实现图片分类,旨在传授给大家一个思想。
 
好了,废话不多说了,直接开始今天的实战开发教程吧。
 
首先,我们先定义页面,代码如下(为了方便演示,我直接导入了styles.css文件,此时文件没任何样式内容):
 
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>3实战开发:图片过滤分类特效</title>
    </head>
    <body>
    
    <div class="container">
        <div class="hot_navs">
            <div class="hot_title">
                <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" />
                <label for="selector-type-all" class="label-type-all">全部类别</label>
                
                <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" />
                <label for="selector-type-1" class="label-type-1">电子商务</label>
                
                <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" />
                <label for="selector-type-2" class="label-type-2">旅游</label>
                
                <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" />
                <label for="selector-type-3" class="label-type-3">社交</label>
                
                <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" />
                <label for="selector-type-4" class="label-type-4">视频</label>
                
                <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" />
                <label for="selector-type-5" class="label-type-5">新闻</label>
                
                <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" />
                <label for="selector-type-6" class="label-type-6">信息门户</label>
                
                <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" />
                <label for="selector-type-7" class="label-type-7">票务</label>
                <div class="splitline"></div>
                <a class="item-type-1" href="http://www.itdriver.cn">
                    <img src="imgs/101.png"  />                </a>
                <a class="item-type-1" href="http://www.itdriver.cn">
                    <img src="imgs/102.png"  />                </a>
                <a class="item-type-7" href="http://www.itdriver.cn">    
                    <i></i>
                    <img src="imgs/103.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">    
                    <img src="imgs/104.png"  />                </a>
                <a class="item-type-5" href="http://www.itdriver.cn">    
                    <img src="imgs/105.png"  />                </a>
                <a class="item-type-4" href="http://www.itdriver.cn">
                    <img src="imgs/106.png"  />                </a>
                <a class="item-type-3" href="http://www.itdriver.cn">    
                    <i></i>
                    <img src="imgs/107.png"  />                </a>
                <a class="item-type-4" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/108.png"  />                </a>
                <a class="item-type-3" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/109.png"  />                </a>
                <a class="item-type-3" href="http://www.itdriver.cn">    
                    <i></i>
                    <img src="imgs/110.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">    
                    <i></i>
                    <img src="imgs/111.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/112.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/113.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/114.png"  />                </a>
                <a class="item-type-1" href="http://www.itdriver.cn">    
                    <i></i>
                    <img src="imgs/115.png"  />                </a>
                <a class="item-type-5" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/116.png"  />                </a>
                <a class="item-type-6" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/117.png"  />                </a>
                <a class="item-type-2" href="http://www.itdriver.cn">
                    <i></i>    
                    <img src="imgs/118.png"  />                </a>            </div>
        </div>
    </div>
    
    </body>
</html>
复制代码
大家从上面的html代码中会发现,我的导航菜单使用了label或radio标签,我为什么要定义它们呢,因为我想知道我当前点击了哪一个菜单,因为单凭CSS,我们貌似没法得到当前点击谁,所以当我点击Label时,会自动的选中某一radio了。
 
此时我们运行一下页面,看看在未添加任何样式时页面的运行效果:
 
 
首先,我们先调整导航区域的大小,以及给导航区域添加边框,样式代码如下:
 
复制代码
*{ /*设置页面基本属性*/
    margin:0;
    padding:0;
    font-size:14px;
}
 
.container{ /*调整外围容器布局*/
    margin:200px auto;
    width:1024px;
}
 
.hot_navs{ /*设置分类导航样式*/
    border:1px solid #CCCCCC;
    padding:.5em;
    width:725px;
}
 
 
Tag:
网友评论

<