很多人可能会说，这个这么简单，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快实现同样的效果了。如果你是这一部分人，我也希望你停下脚步，看看这篇教程。因为在今天这篇教程中，我会用另一个思维方式来思考问题，我会带领大家，完全脱离js，怎么来实现切换效果以及实现图片分类，旨在传授给大家一个思想。
好了，废话不多说了，直接开始今天的实战开发教程吧。
首先，我们先定义html页面，代码如下(为了方便演示，我直接导入了styles.css文件，此时文件没任何样式内容)：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发:图片过滤分类特效</title>
</head>
<body>
<p class="container">
<p class="hot_navs">
<p 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>
<p class="splitline"></p>
<a class="item-type-1" href="https://www.itdriver.cn">
<img src="imgs/101.png" /> </a>
<a class="item-type-1" href="https://www.itdriver.cn">
<img src="imgs/102.png" /> </a>
<a class="item-type-7" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/103.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<img src="imgs/104.png" /> </a>
<a class="item-type-5" href="https://www.itdriver.cn">
<img src="imgs/105.png" /> </a>
<a class="item-type-4" href="https://www.itdriver.cn">
<img src="imgs/106.png" /> </a>
<a class="item-type-3" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/107.png" /> </a>
<a class="item-type-4" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/108.png" /> </a>
<a class="item-type-3" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/109.png" /> </a>
<a class="item-type-3" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/110.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/111.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/112.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/113.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/114.png" /> </a>
<a class="item-type-1" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/115.png" /> </a>
<a class="item-type-5" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/116.png" /> </a>
<a class="item-type-6" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/117.png" /> </a>
<a class="item-type-2" href="https://www.itdriver.cn">
<i></i>
<img src="imgs/118.png" /> </a> </p>
</p>
</p>
</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;
}
