纯css 实现tab效果
2015-09-24 11:10
627 查看
原理:
1、radio 与a 重叠,
2、radio zindex属性比a大,
3、radio透明
参考 http://www.imooc.com/video/7144
html简单,css就要复杂点,
html 复杂,css就能简单点,
html 简单至上,后台人员只要看html,当然结构简单更好,
1、radio 与a 重叠,
2、radio zindex属性比a大,
3、radio透明
参考 http://www.imooc.com/video/7144
<html> <head> <style type="text/css"> .nav { position: fixed; bottom: 10px; width: 100%; height: 50px; } input, a { position: absolute; width: 20%; height: 100%; } input { z-index: 100; opacity: 0; } a { text-decoration:none; text-align: center; background: yellow; line-height: 50px; } .nav_item1, .nav_item1 + a { left: 0%; } .nav_item2, .nav_item2 + a { left: 20%; } .nav_item3, .nav_item3 + a { left: 40%; } .nav_item4, .nav_item4 + a { left: 60%; } .nav input:checked + a { background-color: #ff0000; font-size: 26px; } </style> </head> <body> <div class="nav"> <input type="radio" name="nav_radio" checked="checked" class="nav_item1"> <a href="#">aa</a> <input type="radio" name="nav_radio" class="nav_item2"> <a href="#">bb</a> <input type="radio" name="nav_radio" class="nav_item3"> <a href="#">cc</a> <input type="radio" name="nav_radio" class="nav_item4"> <a href="#">dd</a> </div> </body> </html>
<html> <head> <style type="text/css"> .nav { position: relative; } .nav-item { display: inline-block; width: 20%; height: 50px; margin-left: 10px; position: relative; } input { position: absolute; top: 0px; left: 0px; width: 100%; z-index: 100; height: 100%; opacity: 0; } a { position: absolute; top: 0px; width: 100%; height: 100%; text-align: center; background: yellow; line-height: 50px } .nav input:checked + a { background-color: #ff0000; font-size: 26px; } </style> </head> <body> <div class="nav"> <div class="nav-item"> <input type="radio" name="nav_radio" checked="checked"> <a href="#">aa</a> </div> <div class="nav-item"> <input type="radio" name="nav_radio"> <a href="#">aa</a> </div> <div class="nav-item"> <input type="radio" name="nav_radio"> <a href="#">aa</a> </div> <div class="nav-item"> <input type="radio" name="nav_radio"> <a href="#">aa</a> </div> </div> </body> </html>
html简单,css就要复杂点,
html 复杂,css就能简单点,
html 简单至上,后台人员只要看html,当然结构简单更好,
相关文章推荐
- 150924-还是起得来床的好-HTML(CSS)
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- css 文字之间空格
- CSS中常用到的清除浮动
- Django 继承模板应用CSS文件方法
- 在Visual Studio 2013顯示SCSS詳細錯誤訊息
- css3学习之旅-css的基本语法(1)
- css3学习之旅-css的基本语法(1)
- css3学习之旅-css的基本语法(1)
- css3学习之旅-css的基本语法(1)
- CSS 字体单位大小对照换算表
- SeerBar样式
- 纯CSS写带边框的三角形
- 快速记住CSS样式属性单词及输入HTML+CSS的方法
- 常见CSS属性单词及解释
- CSS样式之选择器
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
- div+css基础知识(1)
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- 60个有用CSS代码片段21-40