<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
font: 12px '微软雅黑';
color:white;
background-color: rgb(129,174,105);
}
ul{list-style: none;}
a{text-decoration: none;color: #000;}
.clearfix:after{content: '';display: block;clear:both;}
#head_title{
font-weight: bold;
color: white;
font-size: 15px;
margin-top: 40px;
margin-left: 25px;
}
a{
display: inline-block;
width: 60px;
height: 30px;
background-color: rgb(100,146,75);
text-align: center;
line-height: 30px;
margin-top: 15px;
color: white;
}
/* 选项卡1 选项卡2 选中 离开的时候效果
高度增加 但不会把内容框顶下去？？？？？？？？？？
*/
a:hover{
/* height:35px ; */
/*
无效
line-height: 30px;
margin-top: 5px !important; */
background-color: rgb(44,89,20);
}
/* src属性包含im */
article a[href*='tab1']{
margin-left:50px;
}
#tab1,#tab2{
display: none;
width: 500px;
height: 80px;
margin-left: 25px;
background-color: rgb(43,88,18);
}
section:target{
display: block !important;
}
section{
padding-left: 20px;
padding-right: 20px;
padding-top: 25px;
padding-bottom: 25px;
}
</style>
</head>
<body>
<!-- 滑入滑出过度的效果 纯session
点击事件
-->
<header id="head_title">纯CSS制作的TAB选项卡</header>
<article>
<!-- <section class="tab1_head">选型卡1</section>
<section class="tab2_head">选型卡2</section> -->
<a href="#tab1">选型卡1</a><a href="#tab2">选型卡2</a>
<section id="tab1">
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，
呼儿将出换美酒，与尔同销万古愁。
</section>
<section id="tab2">
噫吁嚱，危乎高哉！蜀道之难，难于上青天！
蚕丛及鱼凫，开国何茫然！
尔来四万八千岁，不与秦塞通人烟。
西当太白有鸟道，可以横绝峨眉巅。
地崩山摧壮士死，然后天梯石栈相钩连。
上有六龙回日之高标，下有冲波逆折之回川。
黄鹤之飞尚不得过，猿猱欲度愁攀援。
青泥何盘盘，百步九折萦岩峦。
扪参历井仰胁息，以手抚膺坐长叹。
问君西游何时还？畏途巉岩不可攀。
但见悲鸟号古木，雄飞雌从绕林间。
</section>
</article>
</body>
</html>
