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中某个标志符的目标元素(比如 ...
随机推荐
- FTPClient.listFiles()不能获取文件
今天使用ftp获取另一台服务器上的文件,发现不管切换到哪个目录,获取什么文件,调用FTPClient.listFiles()方法时返回的始终为空,但是代码又运行正常没有异常抛出. 网上查了下,发现有很 ...
- mac os 下的sublime --- 快捷键
mac os 下的sublime ---列模式 http://www.oschina.net/question/249672_161413 触控板也可以的:左手同时按住 Option 和触控板左下角 ...
- rpm与yum
设置本地源与网络源:https://my.oschina.net/u/1861462/blog/723958 rpm命令:http://man.linuxde.net/rpm https://my.o ...
- C++学习笔记 宏 const 内联 枚举
宏, const变量, 内联, 枚举 宏 宏定义: 宏即宏替换,在C语言源程序中允许用一个标识符来表示一个字符串,称为宏,关键字 define,在所有使用到宏的地方都只是直接的替换而不做任何类型检查 ...
- android adb命令
adb查看logcat adb logcat <TAG>:* *:S 查看指定TAG的Log adb查看最上层activity:linux: adb shell dumpsys activ ...
- SublimeText的奇特应用
1.ctrl+shift+D:选中文本,粘贴复制 2.ctrl+D:批量选择文本 3.zen-coding:Tab键
- Windows Phone 八、文件读写IO
文件存储的类型 •本地应用文件: •ApplicationData.Current.LocalFolder: •漫游应用文件: •ApplicationData.Current.RoamingFold ...
- input中空格后的数据不显示
bug,input中空格后的数据不显示 昨天在修bug,有一个bug是用户修改的个人信息的地址栏,输入有空格的话,空格后面的内容存不上,而且没有报错,奇怪了,只好跟踪下. 页面上的输入框就是个 ...
- NIO 之 缓冲区(Buffer)
缓存区是java nio的核心部分,所以必须熟悉它的一些操作. 实现类型: nio中实现了除布尔型(boolean)外的其他7种基本数据类型的buffer(ByteBuffer,CharBuffer, ...
- css3基础必回选择器全解
1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除 ...