打开网站 输入内容存在危险字符,网站开发转移合同,建设教育工程网站,做网站v1认证是什么意思CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好#xff0c;今天我要带领大家开发一个纯CSS的图片分类显示的网址导航#xff0c;单纯看标题大家可能有些困惑#xff0c;依照以往惯例#xff0c;我先给大家演… CSS3实战开发: 纯CSS实现图片过滤分类显示特效 原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好今天我要带领大家开发一个纯CSS的图片分类显示的网址导航单纯看标题大家可能有些困惑依照以往惯例我先给大家演示一下实际运行效果 从上面的运行效果大家不难发现当我点击某一菜单时导航区域会相应高亮显示此分类的图标而其他图标则会变暗。 很多人可能会说这个这么简单直接使用javascript或jQuery等前端框架再配合一些CSS就可以很快实现同样的效果了。如果你是这一部分人我也希望你停下脚步看看这篇教程。因为在今天这篇教程中我会用另一个思维方式来思考问题我会带领大家完全脱离js怎么来实现切换效果以及实现图片分类旨在传授给大家一个思想。 好了废话不多说了直接开始今天的实战开发教程吧。 首先我们先定义html页面代码如下(为了方便演示我直接导入了styles.css文件此时文件没任何样式内容) !DOCTYPE html
htmlheadmeta charsetutf-8link relstylesheet hrefstyles.csstitleCSS3实战开发:图片过滤分类特效/title/headbodydiv classcontainerdiv classhot_navsdiv classhot_titleinput idselector-type-all typeradio nametitle_set classselector-type-all checkedchecked /label forselector-type-all classlabel-type-all全部类别/labelinput idselector-type-1 typeradio nametitle_set classselector-type-1 /label forselector-type-1 classlabel-type-1电子商务/labelinput idselector-type-2 typeradio nametitle_set classselector-type-2 /label forselector-type-2 classlabel-type-2旅游/labelinput idselector-type-3 typeradio nametitle_set classselector-type-3 /label forselector-type-3 classlabel-type-3社交/labelinput idselector-type-4 typeradio nametitle_set classselector-type-4 /label forselector-type-4 classlabel-type-4视频/labelinput idselector-type-5 typeradio nametitle_set classselector-type-5 /label forselector-type-5 classlabel-type-5新闻/labelinput idselector-type-6 typeradio nametitle_set classselector-type-6 /label forselector-type-6 classlabel-type-6信息门户/labelinput idselector-type-7 typeradio nametitle_set classselector-type-7 /label forselector-type-7 classlabel-type-7票务/labeldiv classsplitline/diva classitem-type-1 hrefhttp://www.itdriver.cnimg srcimgs/101.png / /aa classitem-type-1 hrefhttp://www.itdriver.cnimg srcimgs/102.png / /aa classitem-type-7 hrefhttp://www.itdriver.cn i/iimg srcimgs/103.png / /aa classitem-type-6 hrefhttp://www.itdriver.cn img srcimgs/104.png / /aa classitem-type-5 hrefhttp://www.itdriver.cn img srcimgs/105.png / /aa classitem-type-4 hrefhttp://www.itdriver.cnimg srcimgs/106.png / /aa classitem-type-3 hrefhttp://www.itdriver.cn i/iimg srcimgs/107.png / /aa classitem-type-4 hrefhttp://www.itdriver.cni/i img srcimgs/108.png / /aa classitem-type-3 hrefhttp://www.itdriver.cni/i img srcimgs/109.png / /aa classitem-type-3 hrefhttp://www.itdriver.cn i/iimg srcimgs/110.png / /aa classitem-type-6 hrefhttp://www.itdriver.cn i/iimg srcimgs/111.png / /aa classitem-type-6 hrefhttp://www.itdriver.cni/i img srcimgs/112.png / /aa classitem-type-6 hrefhttp://www.itdriver.cni/i img srcimgs/113.png / /aa classitem-type-6 hrefhttp://www.itdriver.cni/i img srcimgs/114.png / /aa classitem-type-1 hrefhttp://www.itdriver.cn i/iimg srcimgs/115.png / /aa classitem-type-5 hrefhttp://www.itdriver.cni/i img srcimgs/116.png / /aa classitem-type-6 hrefhttp://www.itdriver.cni/i img srcimgs/117.png / /aa classitem-type-2 hrefhttp://www.itdriver.cni/i img srcimgs/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;
} 此时页面效果如下 区域范围大小已经定下来了现在我们要给导航菜单设置样式隐藏单选按钮同时设置菜单与图表之间的分割线 /*分割线*/
.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*设置导航item的基本样式*/text-decoration:none;display:inline-block;height:70px;line-height:70px;position:relative;background:#FFE500;-webkit-transition:all 0.6s; /*当item属性发生变化时执行过度动画*/-moz-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s;
}.hot_navs input{display:none;}.hot_navs .label-type-all,
.hot_navs .label-type-1,
.hot_navs .label-type-2,
.hot_navs .label-type-3,
.hot_navs .label-type-4,
.hot_navs .label-type-5,
.hot_navs .label-type-6,
.hot_navs .label-type-7 { /*设置区域头部导航菜单的基本样式*/display:inline-block;margin-top:10px;padding:10px 10px;cursor:pointer;
} 此时效果如下 细心的网友会发现我在上面的CSS样式中添加了transition属性此属性主要是说当菜单的任何一个属性发生变化时执行过渡动画。 接着我们给导航按钮添加选中时的样式同时设置当选择某一菜单时设置此分类的图标不透明度为1其它分类的不透明度为0.2样式代码如下 .hot_navs input.selector-type-all:checked ~ .label-type-all,
.hot_navs input.selector-type-1:checked ~ .label-type-1,
.hot_navs input.selector-type-2:checked ~ .label-type-2,
.hot_navs input.selector-type-3:checked ~ .label-type-3,
.hot_navs input.selector-type-4:checked ~ .label-type-4,
.hot_navs input.selector-type-5:checked ~ .label-type-5,
.hot_navs input.selector-type-6:checked ~ .label-type-6,
.hot_navs input.selector-type-7:checked ~ .label-type-7 { /*设置选择某一菜单时当前菜单的基本样式*/font-weight:bold;border-bottom:2px solid #FF9900;
}.hot_navs input.selector-type-all:checked ~ a,
.hot_navs input.selector-type-1:checked ~ a.item-type-1,
.hot_navs input.selector-type-2:checked ~ a.item-type-2,
.hot_navs input.selector-type-3:checked ~ a.item-type-3,
.hot_navs input.selector-type-4:checked ~ a.item-type-4,
.hot_navs input.selector-type-5:checked ~ a.item-type-5,
.hot_navs input.selector-type-6:checked ~ a.item-type-6,
.hot_navs input.selector-type-7:checked ~ a.item-type-7 {opacity: 1;/*当选择某一类别菜单时设置当前类别item的不透明度*/
}.hot_navs input.selector-type-1:checked ~ a:not(.item-type-1),
.hot_navs input.selector-type-2:checked ~ a:not(.item-type-2),
.hot_navs input.selector-type-3:checked ~ a:not(.item-type-3),
.hot_navs input.selector-type-4:checked ~ a:not(.item-type-4),
.hot_navs input.selector-type-5:checked ~ a:not(.item-type-5),
.hot_navs input.selector-type-6:checked ~ a:not(.item-type-6),
.hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) {opacity: 0.2;/*当选择某一类别菜单时设置其余类别item的不透明度*/
} 至此此页面特效的所有样式代码都编写完了真心希望大家能受到启发同时也希望大家喜欢我的教程。 谢谢大家咱们下个实战开发案例再会。 posted on 2014-09-06 11:24 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/3959249.html
