CSS3实战开发: 纯CSS实现图片过滤分类显示特效-自学php网

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

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 从上面的运行效果，大家不难发现，当我点击某一菜单时，导航区域会相应高亮显示此分类的图标，而其他图标则会变暗。很多人可能会说，这个这么简单，直接使用javascript或jQuery等前...

从上面的运行效果，大家不难发现，当我点击某一菜单时，导航区域会相应高亮显示此分类的图标，而其他图标则会变暗。

很多人可能会说，这个这么简单，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快实现同样的效果了。如果你是这一部分人，我也希望你停下脚步，看看这篇教程。因为在今天这篇教程中，我会用另一个思维方式来思考问题，我会带领大家，完全脱离js，怎么来实现切换效果以及实现图片分类，旨在传授给大家一个思想。

好了，废话不多说了，直接开始今天的实战开发教程吧。

首先，我们先定义html页面，代码如下(为了方便演示，我直接导入了styles.css文件，此时文件没任何样式内容)：

复制代码

<!DOCTYPE html>

<html>

<head>

<title>CSS3实战开发:图片过滤分类特效</title>

</head>

<body>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

</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;

}

浏览器的CSS Hacks - html/css语言栏目：html.css - 自学

纯CSS3实现支持自定义设定的图标 - html/css语言栏

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论