CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码。
style.css:
.song-info {
position: absolute;
background: #fff;
} #song-info:target, #song-lyricCN:target, #song-lyricEN:target {
z-index:;
}
html代码:
<div class="song-nav">
<ul class="song-menu">
<li><a href="#song-info">基本信息</a></li>
<li><a href="#song-lyricCN">中文歌词</a></li>
<li><a href="#song-lyricEN">英文歌词</a></li>
</ul>
</div>
<div id="song-lyricCN" class="song-info">...3...</div>
<div id="song-lyricEN" class="song-info">...2...</div>
<div id="song-info" class="song-info">...1...</div>
仅仅使用position:absolute;(对切换内容应用)和:target伪类将被指向对象(target object)显示层级提升(z-index:1)来实现的。
当然了,你可能觉得代码虽然可行,但是显示效果太丑陋了,没关系,给样式就OK了。
1. 给内容添加好看的边框效果
/* 要有边框、圆角效果和边框阴影效果 */
border: 1px solid #91a7b4;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
2. 导航菜单选项单行显示
.song-menu > li {
display: inline-block;
}
3. 菜单选项也要有好看的边框,而且链接的默认下划线太丑了,我要去掉!
.song-menu > li > a {
text-decoration: none;
border: 1px solid #91a7b4;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
注意:打开页面,首先看到的是最后一个内容框内容(也就是<div id="song-info">),你可以看到在导航栏里面它是第一个选项。为什么这么做呢?因为浏览器渲染页面时,由于内容是绝对布局的(position:absolute),所以后来出来的div对覆盖住前面的,所以这一点要注意,把你想第一个显示的内容div放在最后面。
参考地址:实用CSS3属性之 :target伪类实现Tab切换效果
(完)
CSS3 :target伪类实现Tab切换效果的更多相关文章
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- CSS3属性之 target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...
- CSS3 :target伪类的理解与使用
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...
- CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
随机推荐
- 学习laravel遇到的一些错误
Call to undefined method Illuminate\Foundation\Application::bindShared() 错误代码 Call to undefined meth ...
- SpringBoot RESTful 应用中的异常处理小结
转载:https://segmentfault.com/a/1190000006749441 @ControllerAdvice 和 @ExceptionHandler 的区别 ExceptionHa ...
- 使用Django建立网站
# django-admin startproject csvt01 # cd csvt01 # django-admin startapp blog # vim csvt01/settings.py ...
- Union和Union All到底有什么区别
以前一直不知道Union和Union All到底有什么区别,今天来好好的研究一下,网上查到的结果是下面这个样子,可是还是不是很理解,下面将自己亲自验证: Union:对两个结果集进行并集操作,不包括重 ...
- Netty NIO 框架性能压测-短链接-对比Tomcat
压测方案 准备多个文件大小分别为 1k 10k 100k 300k 使用ab分别按 [50,2000](按50逐渐叠加)压测服务,每次请求10W次 硬件信息:CPU:Intel(R) Xeon(R) ...
- Sass与Web组件化相关的功能
Sass https://en.wikipedia.org/wiki/Sass_(stylesheet_language) Sass (Syntactically Awesome Stylesheet ...
- lua table integer index 特性
table.maxn (table) Returns the largest positive numerical index of the given table, or zero if the t ...
- javaweb 学习资源
http://jinnianshilongnian.iteye.com/category/231099
- 性能调优利器之strace
最近需要对一个自己开发的socket server的性能进行分析,刚开始还想了好长时间怎么来分析.后来才意识到其实使用strace就足够了. 观察到的现象是server单进程CPU使用率97,但磁盘i ...
- Delphi 调用C# DLL(包含委托)
例子 C# Dll: using System; using System.Collections.Generic; using System.Text; using System.Diagnosti ...