CSS类似微软中国首页的竖向选项卡

效果体验：
http://hovertree.com/texiao/css/24/

源码下载：
http://hovertree.com/h/bjaf/hardklps.htm


代码如下：

DOCTYPE html>
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title>纯HTML+CSS类似微软中国首页的竖向选项卡_何问起title>base target="_blank" />
style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}

/* hovertreepage */
#hovertreepage ul#outer li div p {
font-size: 12px;
line-height: 16px;
margin: 5px 0 15px 0;
}

#hovertreepage ul#outer li div h2 {
line-height: 1em;
color: #585;
font-size: 1.5em;
font-weight: normal;
margin-top: 0;
font-family: verdana, sans-serif;
}

#hovertreepage ul#outer li div h3 {
line-height: 1em;
color: #66a;
font-size: 1.2em;
font-weight: normal;
margin-top: 0;
}

#hovertreepage ul#outer li div h3.clear {
clear: left;
}


#hovertreepage {
width: 650px;
height: 450px;
border: 1px solid #aaa;
background: #fff;
position: relative;
z-index: 500;
overflow: hidden;
text-align: left;
margin: 40px auto;
}

#hovertreepage table {
border-collapse: collapse;
margin: -1px;
}

#hovertreepage ul#outer {
background: transparent;
padding: 0;
margin: 0;
list-style: none;
}

#hovertreepage ul#outer li.page {
display: inline;
}
/* needed for IE to function correctly */

#hovertreepage ul#outer li.page a.menuitem {
text-decoration: none;
}

#hovertreepage ul#outer li.page i {
position: absolute;
display: block;
height: 25px;
right: 500px;
background: transparent;
cursor: default;
z-index: 100;
text-align: right;
text-decoration: none;
color: #080;
font-style: normal;
cursor: pointer;
}

#hovertreepage ul#outer li.p1 i {
top: 30px;
}

#hovertreepage ul#outer li.p2 i {
top: 55px;
}

#hovertreepage ul#outer li.p3 i {
top: 80px;
}

#hovertreepage ul#outer li.p4 i {
top: 105px;
}

#hovertreepage ul#outer li.p5 i {
top: 130px;
}


#hovertreepage ul#outer li.page div {
display: block;
width: 600px;
height: 400px;
padding: 25px;
font-weight: normal;
color: #444;
}

#hovertreepage ul#outer li.p1 div {
background: #fff url(page1_back.jpg);
}

#hovertreepage ul#outer li.p2 div {
background: #fff url(page2_back.jpg);
}

#hovertreepage ul#outer li.p3 div {
background: #fff url(page3_back.jpg);
}

#hovertreepage ul#outer li.p4 div {
background: #fff url(page4_back.jpg);
}

#hovertreepage ul#outer li.p5 div {
background: #fff url(page5_back.jpg);
}

#hovertreepage ul#outer li div img {
border: 1px solid #888;
float: right;
margin: 0 10px 5px 0;
}

#hovertreepage ul#outer li div p.big {
line-height: 1em;
color: #004;
font-size: 1.5em;
}

#hovertreepage ul#outer li div a {
color: #00c;
text-decoration: underline;
}

#hovertreepage ul#outer li div em {
display: block;
width: 190px;
height: 230px;
float: left;
background: transparent url(current.gif) no-repeat;
margin-right: 10px;
}

#hovertreepage ul#outer li.p1 div em {
background-position: 21px 0;
}

#hovertreepage ul#outer li.p2 div em {
background-position: 21px 25px;
}

#hovertreepage ul#outer li.p3 div em {
background-position: 21px 50px;
}

#hovertreepage ul#outer li.p4 div em {
background-position: 21px 75px;
}

#hovertreepage ul#outer li.p5 div em {
background-position: 21px 100px;
}

#hovertreepage ul#outer li.page div a:hover {
text-decoration: none;
}

#hovertreepage ul#outer li.page a:hover {
white-space: normal;
}
/* for IE6 */

#hovertreepage ul#outer :hover div {
position: absolute;
left: 0;
top: 0;
}

#hovertreepage ul#outer a:hover i {
color: #66a;
font-weight: bold;
}
/* for IE6 */
#hovertreepage ul#outer :hover a i {
color: #66a;
font-weight: bold;
}

#hovertreepage ul#outer div ul li {
line-height: 20px;
font-size: 0.9em;
color: #256;
list-style-type: disc;
}

#hovertreepage ul#outer div ul li a {
line-height: 20px;
font-size: 1.1em;
color: #c00;
}

#hovertreepage ul#outer div dl dd {
line-height: 20px;
font-size: 1.1em;
color: #448;
}

#hovertreepage ul#outer div dl dt {
line-height: 30px;
font-size: 1.3em;
color: #333;
}
style>
head>
body>

div id="hovertreepage">

ul id="outer">
li class="page p1">
a href="#nogo" class="menuitem">i>产品i>a>

div>
em>em>
img src="bags.jpg" alt="" />
h2>产品h2>
h3>何问起h3>
ul>
li>a href="http://hovertree.com/menu/texiao/">网页特效a>li>
li>a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery下载a>li>
li>a href="http://hwq2.com">hwq2.coma>li>
ul>
h3 class="clear">产品信息h3>
p>
提供jQuery特效,Javascript实例，Bootstrap，网址收藏夹，ASP.NET源码等内容资料，欢迎访问！
p>
div>

li>
li class="page p2">
a href="#nogo" class="menuitem">i>桃树开花i>a>

div>
em>em>
img src="service.jpg" alt="" />
h2>桃树开花h2>
h3>摘桃h3>
ul>
li>a href="http://hovertree.com/h/bjaf/taoshu.htm">查看代码a>br />css实现的桃子摆动动画。li>
li>a href="http://hovertree.com/texiao/css3/26/">链接标题a>br />链接说明内容li>
li>a href="http://hovertree.com/h/bjaf/jldgxqd6.htm">打字机动画a>br />jquery多种方式的打字机动画效果li>
li>a href="http://hovertree.com/h/bjaf/dianzishu.htm">翻页电子书a>br />jQuery翻页电子书li>
ul>
h3 class="clear">桃树开花h3>
p>鄱阳湖是世界上最大的鸟类保护区，“鄱阳湖畔鸟天堂，鹬鹳低飞鹤鹭翔；野鸭寻鱼鸥击水，丛丛芦苇雁鹄藏”，每年秋末冬初，有成千上万只候鸟，从俄罗斯西伯利亚、蒙古、日本、朝鲜以及中国东北、西北等地来此越冬。p>
div>

li>
li class="page p3">
a href="#nogo" class="menuitem">i>奔跑吧兄弟i>a>

div>
em>em>
img src="news.jpg" alt="" />
h2>奔跑吧兄弟h2>
h3>Fusce fermentumh3>
ul>
li>a href="http://hovertree.com/h/bjaf/5f5eiagg.htm">查看效果。br />Malesuada fames ac turpis egestas.a>li>
li>Vivamus dignissim tincidunt quam.li>
li>Nullam varius vestibulum mauris.li>
li>Curabitur faucibus varius dui.br />a href="#nogo3">Cras suscipit viverra felis. Nullam diam.a>li>
li>Vivamus convallis volutpat nunc.li>
li>Sed porttitor dui vel nunc.li>
ul>
h3 class="clear">奔跑吧兄弟h3>
p>Nam porttitor congue diam. Donec in mi. Fusce ac neque. Donec quis justo. Nunc non justo quis augue sagittis volutpat. Etiam quis ligula commodo augue tempus pulvinar. Morbi ante arcu, aliquam ut, consequat et, consequat sed, sem. Cras suscipit viverra felis. Nullam diam. Duis eros purus, ornare sit amet, viverra sed, laoreet ac, pede.p>
div>

li>
li class="page p4">
a href="http://hovertree.com/h/bjaf/5f5eiagg.htm" class="menuitem">i>效果查看i>a>

div>
em>em>
img src="press.jpg" alt="" />
h2>Press Releaseh2>
h3>Quisque variush3>
dl>
dt>11th June 2007dt>
dd>In feugiat scelerisque pede.dd>
dd>Morbi iaculis eleifend ante.dd>
dd>Maecenas fringilla scelerisque erat.dd>
dd>Nam a href="nogo5">accumsana> egestas eros.dd>
dl>
h3 class="clear">News and Informationh3>
p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae sem. a href="nogo5">Class aptent tacitia> sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ut nunc. a 
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• CSS类似微软中国首页的竖向选项卡

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02