css实现三角形_纯CSS实现漂亮tab选项卡切换特效

更新时间：2019-06-12 来源：css3教程手机版 字体：大中小

【www.bbyears.com--css3教程】

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pure css3 tab</title>
	<style type="text/css">
	*{margin:0; padding:0;}
	body{font-size: 14px; line-height: 2;}
	li{list-style: none;}
	a{color:#666; text-decoration: none;}
	a:hover{color:#f00;}
	.sidebar{width:80%; margin: 0 auto;}
	.inline-ul {
	font-size:0;/* 所有浏览器 */
	*word-spacing:-1px;/* IE6、7 */
	}
	.inline-ul ul li{
	font-size: 12px;
	letter-spacing: normal;
	word-spacing: normal;
	vertical-align:top;
	display: inline-block;
	*display:inline;
	*zoom:1;
	}
	@media screen and (-webkit-min-device-pixel-ratio:0){
	/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
	.inline-ul{
	letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
	}
	}
	.widget-title {
	font-size: 13px;
	font-weight: normal;
	color: #888888;
	padding: 20px 20px 0px;
	}
	.widget-tab .widget-title{font-size: 0;}
	.widget-tab .widget-box{margin:0 20px 20px;background:#F7F7F7}
	.widget-tab .widget-title ul li{margin-left:0;width:30%;text-align:center;margin-right:1.3%;padding:8px 1%;}
	.widget-tab .widget-title ul li:hover{background:#F7F7F7}
	.widget-tab .widget-title label{cursor:pointer;display:block; font-size: 14px;}
	.widget-tab .widget-title ul li.active{background:#F7F7F7}
	.widget-tab input{display:none}
	.widget-tab .widget-box ul{display:none}
	#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#F7F7F7}
	#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}
	.widget-box ul li a{padding-left: 20px;}
	</style>
</head>
<body>
	
	
		<input type="radio" name="widget-tab" id="new" checked="checked"/>
		<input type="radio" name="widget-tab" id="hot"/>
		<input type="radio" name="widget-tab" id="random"/>
		
			
				<li class="new">
					<label for="new">最新博文</label>
				
				<li class="hot">
					<label for="hot">热评博文</label>
				
				<li class="random">
					<label for="random">随机博文</label>
				
			
		
		
			<ul class="new-list">
				
					原创<a href="http://www.bbyears.com/clist-113-1.html" target="_blank" class="keylink">WordPress</a>主题教程#4：热门点击文章
				
				
					原创<a href="http://www.bbyears.com/clist-113-1.html" target="_blank" class="keylink">WordPress</a>主题教程#3：精选推荐文章
				
				
					原创WordPress主题教程#2：置顶推荐文章
				
				
					原创WordPress主题教程#1：最近修改文章
				
			
			<ul class="hot-list">
				
					我是如何学习JavaScript
				
				
					浅谈现代化搜索引擎优化（SEO）
				
				
					10个优秀的jQuery Mobile主题
				
				
					javascript学习15：创建对象
				
				
					全面理解面向对象的 JavaScript
				
				
					移动端触摸滑动插件swipe.js
				
				
					纯CSS幻灯片
				
				
					win7安装不了nodejs及解决方法
				
			
			<ul class="random-list">
				
					如何在PS上使用Font Awesome字体
				
				
					原创WordPress主题教程#1：最近修改文章
				
				
					bootstrap学习和使用的经验总结
				
				
					使用css3改变选中文本的颜色
				
				
					js15-5:javascript继承
				
				
					4.20-6.11,忙碌面试，思考前途
				
				
					GRUNT:任务运行管理器
				
				
					sublime text2打开文件为dump格式

</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/css/54481.html

链接：http://www.bbyears.com/css/54481.html
css实现三角形_纯CSS实现漂亮tab选项卡切换特效(转载时请注明本文出处及链接)

猜你感兴趣

本类排行

本类最新

更多>>

css实现三角形_纯CSS实现漂亮tab选项卡切换特效

猜你感兴趣

热门标签

本类排行

本类最新