CSS3——选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab Switch</title>
<link rel="stylesheet" href="stylesheet/tabSwitch.css">
</head>
<body>
<ul>
<li>
<input type="radio" id="radio1" name="tabs" checked>
<label for="radio1">选项卡1</label>
<div class="tabs-content" id="content1">1</div>
</li>
<li>
<input type="radio" id="radio2" name="tabs">
<label for="radio2">选项卡2</label>
<div class="tabs-content" id="content2">2</div>
</li>
</ul>
</body>
</html>
*{
margin:;
padding:;
list-style-type: none;
}
ul{
margin:200px auto;
width: 500px;
position: relative;
}
li{
float: left;
}
input[type="radio"]{
position: absolute;
left: -999em;
}
label{
display: block;
cursor: pointer;
line-height: 50px;
font-size: 20px;
font-family: 微软雅黑;
width: 80px;
padding-top: 10px;
padding-bottom: 10px;
background-color: aqua;
border-radius: 8px 8px 0 0;
transition: all 0.2s linear;
}
div{
top:70px;
left:;
position: absolute;
width: 500px;
height: 300px;
background-color: aqua;
}
input[type="radio"]:checked~label{
background-color: cadetblue;
padding-top: 12px;
}
input[type="radio"]:checked~div {
z-index:;
}
CSS3——选项卡切换的更多相关文章
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- 常用js效果：选项卡切换
js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- java jvm学习笔记七（jar包的代码认证和签名）
欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 前言: 如果你循序渐进的看到这里,那么说明你的毅力提高了,jvm的很多东西都是比较抽像的,如果不找相对应的代码来辅助理解 ...
- 【Tcpcopy】离线回放功能
最近因调试问题,需要一直进行tcpcopy,拿有问题的包进行测试.决定使用tcpcopy对录制脚本进行回放,以下为我操作的具体步骤.主要是三块 1 下载安装具有离线回放功能的tcpcopy 2 使用t ...
- 导入showb时候出错--2015-12-4
[root@cache-02 ~]# /opt/coreseek/csftweb-bash: /opt/coreseek/csftweb: is a directory[root@cache-02 ~ ...
- 【转载】C/C++语言void及void指针深层探索
C/C++语言void及void指针深层探索 1.概述许多初学者对C/C++语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并详述vo ...
- When to Redis ? when to MongoDB?
120down voteaccepted I would say, it depends on kind of dev team you are and your application needs. ...
- exercise.tour.go google的go官方教程答案
/* Exercise: Loops and Functions #43 */ package main import ( "fmt" "math" ) fun ...
- js避免全局污染
避免声明全局变量,以免发生冲突
- .Net基础学习
http://www.cnblogs.com/iPragmatic/p/4930396.html memcache的介绍与应用场景 http://www.cnblogs.com/nixi8/p/493 ...
- 菜单设计器(Menu Designer)及其B/S,C/S双重实现（B/S开源）
ERP/MIS开发 菜单设计器(Menu Designer)及其B/S,C/S双重实现(B/S开源) 一直从事ERP/MIS的开发工作,今天来展现一下菜单设计器的设计,及其用途,并对B/S部分代码 ...
- spring jdbcTemplate源码剖析
本文浅析 spring jdbcTemplate 源码,主要是学习其设计精髓.模板模式.巧妙的回调 一.jdbcTemplate 类结构 ①.JdbcOperations : 接口定义了方法,如 &l ...