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

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

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>纯HTML+CSS类似微软中国首页的竖向选项卡_何问起</title><base target="_blank" />
  6. <style type="text/css">
  7. body {
  8. background: #fff;
  9. font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
  10. font-size: 12px;
  11. }
  12.  
  13. /* hovertreepage */
  14. #hovertreepage ul#outer li div p {
  15. font-size: 12px;
  16. line-height: 16px;
  17. margin: 5px 0 15px 0;
  18. }
  19.  
  20. #hovertreepage ul#outer li div h2 {
  21. line-height: 1em;
  22. color: #585;
  23. font-size: 1.5em;
  24. font-weight: normal;
  25. margin-top: 0;
  26. font-family: verdana, sans-serif;
  27. }
  28.  
  29. #hovertreepage ul#outer li div h3 {
  30. line-height: 1em;
  31. color: #66a;
  32. font-size: 1.2em;
  33. font-weight: normal;
  34. margin-top: 0;
  35. }
  36.  
  37. #hovertreepage ul#outer li div h3.clear {
  38. clear: left;
  39. }
  40.  
  41. #hovertreepage {
  42. width: 650px;
  43. height: 450px;
  44. border: 1px solid #aaa;
  45. background: #fff;
  46. position: relative;
  47. z-index: 500;
  48. overflow: hidden;
  49. text-align: left;
  50. margin: 40px auto;
  51. }
  52.  
  53. #hovertreepage table {
  54. border-collapse: collapse;
  55. margin: -1px;
  56. }
  57.  
  58. #hovertreepage ul#outer {
  59. background: transparent;
  60. padding: 0;
  61. margin: 0;
  62. list-style: none;
  63. }
  64.  
  65. #hovertreepage ul#outer li.page {
  66. display: inline;
  67. }
  68. /* needed for IE to function correctly */
  69.  
  70. #hovertreepage ul#outer li.page a.menuitem {
  71. text-decoration: none;
  72. }
  73.  
  74. #hovertreepage ul#outer li.page i {
  75. position: absolute;
  76. display: block;
  77. height: 25px;
  78. right: 500px;
  79. background: transparent;
  80. cursor: default;
  81. z-index: 100;
  82. text-align: right;
  83. text-decoration: none;
  84. color: #080;
  85. font-style: normal;
  86. cursor: pointer;
  87. }
  88.  
  89. #hovertreepage ul#outer li.p1 i {
  90. top: 30px;
  91. }
  92.  
  93. #hovertreepage ul#outer li.p2 i {
  94. top: 55px;
  95. }
  96.  
  97. #hovertreepage ul#outer li.p3 i {
  98. top: 80px;
  99. }
  100.  
  101. #hovertreepage ul#outer li.p4 i {
  102. top: 105px;
  103. }
  104.  
  105. #hovertreepage ul#outer li.p5 i {
  106. top: 130px;
  107. }
  108.  
  109. #hovertreepage ul#outer li.page div {
  110. display: block;
  111. width: 600px;
  112. height: 400px;
  113. padding: 25px;
  114. font-weight: normal;
  115. color: #444;
  116. }
  117.  
  118. #hovertreepage ul#outer li.p1 div {
  119. background: #fff url(page1_back.jpg);
  120. }
  121.  
  122. #hovertreepage ul#outer li.p2 div {
  123. background: #fff url(page2_back.jpg);
  124. }
  125.  
  126. #hovertreepage ul#outer li.p3 div {
  127. background: #fff url(page3_back.jpg);
  128. }
  129.  
  130. #hovertreepage ul#outer li.p4 div {
  131. background: #fff url(page4_back.jpg);
  132. }
  133.  
  134. #hovertreepage ul#outer li.p5 div {
  135. background: #fff url(page5_back.jpg);
  136. }
  137.  
  138. #hovertreepage ul#outer li div img {
  139. border: 1px solid #888;
  140. float: right;
  141. margin: 0 10px 5px 0;
  142. }
  143.  
  144. #hovertreepage ul#outer li div p.big {
  145. line-height: 1em;
  146. color: #004;
  147. font-size: 1.5em;
  148. }
  149.  
  150. #hovertreepage ul#outer li div a {
  151. color: #00c;
  152. text-decoration: underline;
  153. }
  154.  
  155. #hovertreepage ul#outer li div em {
  156. display: block;
  157. width: 190px;
  158. height: 230px;
  159. float: left;
  160. background: transparent url(current.gif) no-repeat;
  161. margin-right: 10px;
  162. }
  163.  
  164. #hovertreepage ul#outer li.p1 div em {
  165. background-position: 21px 0;
  166. }
  167.  
  168. #hovertreepage ul#outer li.p2 div em {
  169. background-position: 21px 25px;
  170. }
  171.  
  172. #hovertreepage ul#outer li.p3 div em {
  173. background-position: 21px 50px;
  174. }
  175.  
  176. #hovertreepage ul#outer li.p4 div em {
  177. background-position: 21px 75px;
  178. }
  179.  
  180. #hovertreepage ul#outer li.p5 div em {
  181. background-position: 21px 100px;
  182. }
  183.  
  184. #hovertreepage ul#outer li.page div a:hover {
  185. text-decoration: none;
  186. }
  187.  
  188. #hovertreepage ul#outer li.page a:hover {
  189. white-space: normal;
  190. }
  191. /* for IE6 */
  192.  
  193. #hovertreepage ul#outer :hover div {
  194. position: absolute;
  195. left: 0;
  196. top: 0;
  197. }
  198.  
  199. #hovertreepage ul#outer a:hover i {
  200. color: #66a;
  201. font-weight: bold;
  202. }
  203. /* for IE6 */
  204. #hovertreepage ul#outer :hover a i {
  205. color: #66a;
  206. font-weight: bold;
  207. }
  208.  
  209. #hovertreepage ul#outer div ul li {
  210. line-height: 20px;
  211. font-size: 0.9em;
  212. color: #256;
  213. list-style-type: disc;
  214. }
  215.  
  216. #hovertreepage ul#outer div ul li a {
  217. line-height: 20px;
  218. font-size: 1.1em;
  219. color: #c00;
  220. }
  221.  
  222. #hovertreepage ul#outer div dl dd {
  223. line-height: 20px;
  224. font-size: 1.1em;
  225. color: #448;
  226. }
  227.  
  228. #hovertreepage ul#outer div dl dt {
  229. line-height: 30px;
  230. font-size: 1.3em;
  231. color: #333;
  232. }
  233. </style>
  234. </head>
  235. <body>
  236.  
  237. <div id="hovertreepage">
  238.  
  239. <ul id="outer">
  240. <li class="page p1">
  241. <a href="#nogo" class="menuitem"><i>产品</i><!--[if IE 7]><!--></a><!--<![endif]-->
  242. <!--[if lte IE 6]><table><tr><td><![endif]-->
  243. <div>
  244. <em></em>
  245. <img src="bags.jpg" alt="" />
  246. <h2>产品</h2>
  247. <h3>何问起</h3>
  248. <ul>
  249. <li><a href="http://hovertree.com/menu/texiao/">网页特效</a></li>
  250. <li><a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery下载</a></li>
  251. <li><a href="http://hwq2.com">hwq2.com</a></li>
  252. </ul>
  253. <h3 class="clear">产品信息</h3>
  254. <p>
  255. 提供jQuery特效,Javascript实例，Bootstrap，网址收藏夹，ASP.NET源码等内容资料，欢迎访问！
  256. </p>
  257. </div>
  258. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  259. </li>
  260. <li class="page p2">
  261. <a href="#nogo" class="menuitem"><i>桃树开花</i><!--[if IE 7]><!--></a><!--<![endif]-->
  262. <!--[if lte IE 6]><table><tr><td><![endif]-->
  263. <div>
  264. <em></em>
  265. <img src="service.jpg" alt="" />
  266. <h2>桃树开花</h2>
  267. <h3>摘桃</h3>
  268. <ul>
  269. <li><a href="http://hovertree.com/h/bjaf/taoshu.htm">查看代码</a><br />css实现的桃子摆动动画。</li>
  270. <li><a href="http://hovertree.com/texiao/css3/26/">链接标题</a><br />链接说明内容</li>
  271. <li><a href="http://hovertree.com/h/bjaf/jldgxqd6.htm">打字机动画</a><br />jquery多种方式的打字机动画效果</li>
  272. <li><a href="http://hovertree.com/h/bjaf/dianzishu.htm">翻页电子书</a><br />jQuery翻页电子书</li>
  273. </ul>
  274. <h3 class="clear">桃树开花</h3>
  275. <p>鄱阳湖是世界上最大的鸟类保护区，“鄱阳湖畔鸟天堂，鹬鹳低飞鹤鹭翔；野鸭寻鱼鸥击水，丛丛芦苇雁鹄藏”，每年秋末冬初，有成千上万只候鸟，从俄罗斯西伯利亚、蒙古、日本、朝鲜以及中国东北、西北等地来此越冬。</p>
  276. </div>
  277. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  278. </li>
  279. <li class="page p3">
  280. <a href="#nogo" class="menuitem"><i>奔跑吧兄弟</i><!--[if IE 7]><!--></a><!--<![endif]-->
  281. <!--[if lte IE 6]><table><tr><td><![endif]-->
  282. <div>
  283. <em></em>
  284. <img src="news.jpg" alt="" />
  285. <h2>奔跑吧兄弟</h2>
  286. <h3>Fusce fermentum</h3>
  287. <ul>
  288. <li><a href="http://hovertree.com/h/bjaf/5f5eiagg.htm">查看效果。<br />Malesuada fames ac turpis egestas.</a></li>
  289. <li>Vivamus dignissim tincidunt quam.</li>
  290. <li>Nullam varius vestibulum mauris.</li>
  291. <li>Curabitur faucibus varius dui.<br /><a href="#nogo3">Cras suscipit viverra felis. Nullam diam.</a></li>
  292. <li>Vivamus convallis volutpat nunc.</li>
  293. <li>Sed porttitor dui vel nunc.</li>
  294. </ul>
  295. <h3 class="clear">奔跑吧兄弟</h3>
  296. <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>
  297. </div>
  298. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  299. </li>
  300. <li class="page p4">
  301. <a href="http://hovertree.com/h/bjaf/5f5eiagg.htm" class="menuitem"><i>效果查看</i><!--[if IE 7]><!--></a><!--<![endif]-->
  302. <!--[if lte IE 6]><table><tr><td><![endif]-->
  303. <div>
  304. <em></em>
  305. <img src="press.jpg" alt="" />
  306. <h2>Press Release</h2>
  307. <h3>Quisque varius</h3>
  308. <dl>
  309. <dt>11th June 2007</dt>
  310. <dd>In feugiat scelerisque pede.</dd>
  311. <dd>Morbi iaculis eleifend ante.</dd>
  312. <dd>Maecenas fringilla scelerisque erat.</dd>
  313. <dd>Nam <a href="nogo5">accumsan</a> egestas eros.</dd>
  314. </dl>
  315. <h3 class="clear">News and Information</h3>
  316. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae sem. <a href="nogo5">Class aptent taciti</a> sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ut nunc. <a href="nogo5">In dictum, dui nec vehicula vehicula</a>, neque leo faucibus est, porta vehicula nisi odio eu tellus.</p>
  317. </div>
  318. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  319. </li>
  320. <li class="page p5">
  321. <a href="#nogo" class="menuitem"><i>Contact us</i><!--[if IE 7]><!--></a><!--<![endif]-->
  322. <!--[if lte IE 6]><table><tr><td><![endif]-->
  323. <div>
  324. <em></em>
  325. <img src="contact.jpg" alt="" />
  326. <h2>Contact us</h2>
  327. <h3>Donec condimentum</h3>
  328. <ul>
  329. <li>Phasellus vitae arcu et mauris facilisis ornare.</li>
  330. <li>Nullam ultrices <a href="#nogo5">urna nec erat</a> facilisis faucibus.</li>
  331. <li>Ut cursus posuere eros.</li>
  332. <li>Vestibulum <a href="#nogo5">dapibus</a> tortor eu nisl.</li>
  333. <li>Proin ac mauris non lacus pharetra aliquet.</li>
  334. </ul>
  335. <h3 class="clear">Contact Details</h3>
  336. <p><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/30dq3r8y.htm">原文</a></p>
  337. </div>
  338. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  339. </li>
  340. </ul>
  341. </div>
  342. </body>
  343. </html>

转自：http://hovertree.com/h/bjaf/30dq3r8y.htm

推荐：http://hovertree.com/h/bjaf/n781jmfy.htm

特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS类似微软中国首页的竖向选项卡的更多相关文章

  1. WindowsForm如何实现类似微软project软件的甘特图？

    在管理软件研发过程中,特别是涉及项目管理或者生产计划方面,都需要一款类似微软project的控件对项目下的分解任务进行图形展示(甘特图).下面介绍一下在WindowsForm下如何实现类似微软proj ...

  2. 微软YY公开课[《微软中国云计算Azure平台体验与新企业架构设计》 周六晚9点

    YY频道是 52545291//@_勤_: YY账号真的是一次一账号啊! 全然记不得之前注冊的//@老徐FrankXuLei: 最火爆的微软免费公开课.第一次顶峰126人.第二次96人.第三次我们又来 ...

  3. 内部消息 微软中国云计算 内測Azure免费账号 赶紧申请 错过不再有

    内部消息 微软中国云计算 顶级内測Azure免费账号 火热申请 过期不再有! 微软MSDN俱乐部  29754721, [一大波Azure免费账号来袭]Windows Azure再次开启示放免费试用账 ...

  4. mui 登录跳转到首页之后顶部选项卡不灵敏问题

    前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...

  5. css实现横向进度条和竖向进度条

    一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...

  6. css实现360导航首页超链接变色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 刷新神经网络新深度：ImageNet计算机视觉挑战赛微软中国研究员夺冠

    微软亚洲研究院首席研究员孙剑 世界上最好计算机视觉系统有多精确?就在美国东部时间12月10日上午9时,ImageNet计算机视觉识别挑战赛结果揭晓——微软亚洲研究院视觉计算组的研究员们凭借深层神经网络 ...

  8. 微软中国裁员曝光：在CD结束后！薪酬不变！

    聚众抗议的前诺基亚员工(腾讯科技配图) 腾讯科技 郭晓峰 腾讯科技刚刚获取了一份微软设备事业部中国区管理团队4日晚间发给被裁员工的补偿方案邮件. 邮件内容显示,微软承诺在收购诺基亚交易结束(2014年 ...

  9. 练习html,css,js仿制百度首页

    1.练习目的 练习使用html,scc,js 完成界面样式,用ul标签实现文本框下拉,通过js完成添加列表内容等功能 2.效果 3.程序代码 <!DOCTYPE html> <htm ...

随机推荐

  1. CentOS下Zabbix安装部署及汉化

    搭建环境:Centos6.5_x86_64,Zabbix2.4.5,epel 源 服务端: 1.安装开发软件包yum -y groupinstall "Development Tools&q ...

  2. BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]

    3238: [Ahoi2013]差异 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2326  Solved: 1054[Submit][Status ...

  3. jQuery.data() 使用方法

    data() 方法向被选元素附加数据,或者从被选元素获取数据.在实际开发中,可以用来记录上一步操作某一对象的值,来给下一步操作做一些判断 $("#btn1").click(func ...

  4. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...

  5. 2000条你应知的WPF小姿势 基础篇<15-21>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  6. Leetcode 笔记 110 - Balanced Binary Tree

    题目链接:Balanced Binary Tree | LeetCode OJ Given a binary tree, determine if it is height-balanced. For ...

  7. 【原】得心应手小工具开发——IE代理快速切换工具

    一.引入 因为公司里上外网要经常换IE代理地址,每次切换地址都要进到Internet Options里去设置一番,经常切换的话很是麻烦,由于用了点时间作个小工具来方便自己. 二.实现思路 其实思路很简 ...

  8. spring声明式事务管理总结

    事务配置 首先在/WEB-INF/applicationContext.xml添加以下内容: <!-- 配置事务管理器 --> <bean id="transactionM ...

  9. VirtualBox 桥接上网方式的配置

    最近在搞Redis所以装了个virtualbox的ubuntu的虚拟机, redis不是在ubuntu上. 因为需要使用本机客户端访问redis服务,所以需要配置虚拟机和本地机器的双向访问,所以就用到 ...

  10. SQL Saturday 北京将于7月25日举办线下活动，欢迎参加

          地点:北京微软(中国)有限公司[望京利星行],三层308室     报名地址:https://onedrive.live.com/redir?page=survey&resid=f ...