html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换

HTML5的运用之纯CSS3实现的tab标签切换

CSS3代码实现的tab标签切换

*{padding:0px;margin:0px;}

#tab{margin:20px;20px;position:relative;}

ul{list-style:none;}

ul li{float:left;}

ul li a{background:#f90;

color:#fff;

font-weight:500;

height:30px;

line-height:30px;

border-bottom:0px;

display:block;

text-decoration:none;

padding:0px 10px;

margin-right:1px;

}

ul li a:hover{background:blue;}

#p1{clear:left;}

#tab>p{

border:1px solid blue;

width:170px;

height:100px;

text-indent:2em;

padding:5px 5px;

position:absolute;

top:31px;

background:#fff;

}

#p1:target,#p2:target,#p3:target{z-index:2;}

标签1
标签2
标签3

欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室(筹)

欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室

欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施

html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换相关推荐

css3 卡片亮光_9种纯CSS3人物信息卡片动态展示效果
通常在一些网站的网页上需要展示人物的个人信息,人物信息卡片是其中的一种展示方式,所以这一次给大家带来<9种纯CSS3人物信息卡片动态展示效果>.先上页面截图: 源代码下载: 9种纯CSS3 ...
html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换效果图: 源代码: Tab标签切换 body{ background:#fff;} *{ mar ...
jQuery bind事件练习及tab标签切换的实现
1.bind事件 jQuery部分代码: <script type="text/javascript"> $(document).ready(function(){ ...
JS 实现 Tab标签切换功能
Tab标签切换效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
vue2.0 实现tab标签切换效果内容可以自行定义
利用vue2.0 实现tab标签切换效果比较实用初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果
这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果.当用户用鼠标滑过按钮的时候,一道流光会瞬间滑过按钮,就像玻璃的反光效果,非常漂亮. 使用方法 HTML结构该效果中的按钮是一个超链接元素. Li ...
html5用css做样式边框,纯CSS3实现自定义Tooltip边框涂鸦风格
本文作者html5tricks,转载请注明出处这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
全屏响应式html5+jquery幻灯片轮播特效,纯CSS3超酷全屏响应式幻灯片特效
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效.该幻灯片特效的效果类似于全屏水平方向的单页滚动效果.该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧. 制作方法 HTML结构整个幻灯片 ...

html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换

html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换相关推荐

最新文章

热门文章