高仿Windows 98主题的CSS样式库

对话框

CSS代码：



    

  1. .win98 .window { 
    2. 

  2.   background: #bfbfbf; 
    3. 

  3.   border: 1px solid; 
    4. 

  4.   border-top-color: #dfdfdf; 
    5. 

  5.   border-left-color: #dfdfdf; 
    6. 

  6.   border-right-color: #808080; 
    7. 

  7.   border-bottom-color: #808080; 
    8. 

  8.   box-shadow: 1px 1px 0 0 #000; 
    9. 

  9.   width: 400px; 
    10. 

  10. } 
    11. 

  11. .win98 .window .content { 
    12. 

  12.   padding: 7px 10px; 
    13. 

  13. } 
    14. 

  14. .win98 .window .header { 
    15. 

  15.   margin: 2px 2px 0; 
    16. 

  16.   padding: 1px 2px; 
    17. 

  17.   color: #fff; 
    18. 

  18.   background: -webkit-linear-gradient(left, #000080, #1084d0); 
    19. 

  19.   background: linear-gradient(to right, #000080, #1084d0); 
    20. 

  20.   font-weight: bold; 
    21. 

  21.   font-size: 11px; 
    22. 

  22.   line-height: 16px; 
    23. 

  23. } 
    24. 

  24. .win98 .window .header .icon { 
    25. 

  25.   width: 16px; 
    26. 

  26.   height: 16px; 
    27. 

  27.   float: left; 
    28. 

  28.   margin-right: 2px; 
    29. 

  29. } 
    30. 

  30. .win98 .window .header .buttons { 
    31. 

  31.   height: 14px; 
    32. 

  32.   float: right; 
    33. 

  33. } 
    34. 

  34. .win98 .window .header .buttons button { 
    35. 

  35.   vertical-align: text-top; 
    36. 

  36.   font-weight: bold; 
    37. 

  37.   line-height: 12px; 
    38. 

  38.   padding: 0; 
    39. 

  39.   height: 14px; 
    40. 

  40.   width: 14px; 
    41. 

  41. } 
    42. 



下拉菜单




CSS代码：




    

  1. .win98 .menu { 
    2. 

  2.   background: #bfbfbf; 
    3. 

  3.   border: 1px solid; 
    4. 

  4.   border-top-color: #dfdfdf; 
    5. 

  5.   border-left-color: #dfdfdf; 
    6. 

  6.   border-right-color: #808080; 
    7. 

  7.   border-bottom-color: #808080; 
    8. 

  8.   box-shadow: 1px 1px 0 0 #000; 
    9. 

  9.   zoom: 1; 
    10. 

  10.   width: 195px; 
    11. 

  11.   font-size: 13px; 
    12. 

  12.   padding: 1px; 
    13. 

  13.   position: relative; 
    14. 

  14. } 
    15. 

  15. .win98 .menu:before, 
    16. 

  16. .win98 .menu:after { 
    17. 

  17.   content: ""; 
    18. 

  18.   display: table; 
    19. 

  19. } 
    20. 

  20. .win98 .menu:after { 
    21. 

  21.   clear: both; 
    22. 

  22. } 
    23. 

  23. .win98 .menu >.menu-content { 
    24. 

  24.   float: right; 
    25. 

  25. } 
    26. 

  26. .win98 .menu .menu-sidebar { 
    27. 

  27.   background: -webkit-linear-gradient(top, #000080, #1084d0); 
    28. 

  28.   background: linear-gradient(to bottom, #000080, #1084d0); 
    29. 

  29.   position: absolute; 
    30. 

  30.   width: 25px; 
    31. 

  31.   height: 100%; 
    32. 

  32. } 
    33. 

  33. .win98 .menu .menu-sidebar .headline { 
    34. 

  34.   -webkit-transform: rotate(270deg); 
    35. 

  35.   -ms-transform: rotate(270deg); 
    36. 

  36.   transform: rotate(270deg); 
    37. 

  37.   position: absolute; 
    38. 

  38.   bottom: 40px; 
    39. 

  39.   left: -32px; 
    40. 

  40.   width: 100px; 
    41. 

  41.   height: 30px; 
    42. 

  42.   font-size: 16px; 
    43. 

  43.   color: #fff; 
    44. 

  44. } 
    45. 

  45. .win98 .menu .menu-content { 
    46. 

  46.   margin: 0; 
    47. 

  47.   padding: 0; 
    48. 

  48.   border: 0; 
    49. 

  49.   outline: 0; 
    50. 

  50.   color: #000; 
    51. 

  51.   list-style: none; 
    52. 

  52.   margin: 2px 0; 
    53. 

  53.   width: 170px; 
    54. 

  54. } 
    55. 

  55. .win98 .menu .menu-content .divider { 
    56. 

  56.   margin: 7px 6px; 
    57. 

  57.   border-top: 1px solid #808080; 
    58. 

  58.   border-bottom: 1px solid #dfdfdf; 
    59. 

  59. } 
    60. 

  60. .win98 .menu .menu-content .item { 
    61. 

  61.   cursor: pointer; 
    62. 

  62.   padding: 10px; 
    63. 

  63. } 
    64. 

  64. .win98 .menu .menu-content .item:hover { 
    65. 

  65.   color: #fff; 
    66. 

  66.   background: #000080; 
    67. 

  67. } 
    68. 

  68. .win98 .menu .menu-content .item.folder { 
    69. 

  69.   position: relative; 
    70. 

  70. } 
    71. 

  71. .win98 .menu .menu-content .item.folder:after { 
    72. 

  72.   content: '\25B6'; 
    73. 

  73.   float: right; 
    74. 

  74.   font-size: 10px; 
    75. 

  75. } 
    76. 

  76. .win98 .menu .menu-content .item .icon { 
    77. 

  77.   float: left; 
    78. 

  78.   margin-right: 7px; 
    79. 

  79.   margin-top: -4px; 
    80. 

  80. } 
    81. 

  81. .win98 .menu .menu-content .item:hover .menu-content, 
    82. 

  82. .win98 .menu .menu-content .item:focus .menu-content { 
    83. 

  83.   display: block; 
    84. 

  84. } 
    85. 

  85. .win98 .menu .menu-content .menu-content { 
    86. 

  86.   background: #bfbfbf; 
    87. 

  87.   border: 1px solid; 
    88. 

  88.   border-top-color: #dfdfdf; 
    89. 

  89.   border-left-color: #dfdfdf; 
    90. 

  90.   border-right-color: #808080; 
    91. 

  91.   border-bottom-color: #808080; 
    92. 

  92.   box-shadow: 1px 1px 0 0 #000; 
    93. 

  93.   display: none; 
    94. 

  94.   position: absolute; 
    95. 

  95.   left: 165px; 
    96. 

  96.   top: -4px; 
    97. 

  97. } 
    98. 

  98. .win98 .menu .menu-content .menu-content .item { 
    99. 

  99.   padding: 3px 10px; 
    100. 

  100. } 
    101. 

  101. .win98 .menu .menu-content .menu-content .icon { 
    102. 

  102.   width: 18px; 
    103. 

  103.   height: 18px; 
    104. 

  104.   margin-top: -2px; 
    105. 

  105. } 
    106. 



作者：小峰


来源：51CTO
				


				
时间： 2024-12-02 19:02:59

		
		


		


	

	
	

		


		
高仿Windows 98主题的CSS样式库的相关文章


								

		

			

                高仿Windows Phone QQ登录界面实例代码
			

		

		

									

				 这篇文章主要介绍了高仿Windows Phone QQ登录界面实例代码,有需要的朋友可以参考一下 给 TextBox文本框前添加图片   扩展PhoneTextBox:添加一个类"ExtentPhoneTextBox"继承 PhoneTextBox ,在"ExtentPhoneTextBox"类中添加属性项:     代码如下: public class ExtentPhoneTextBox : PhoneTextBox     {         /// <			

		

	

				

		

			

                高仿Windows UI 伪装Win8
			

		

		

									

				将Win7桌面修改为Win8桌面风格 令人瞩目的Win8正式上市,不少本本也开始搭载Win8系统,全新的Windows UI(原Metro界面),可将应用程序.快捷方式等以动态样式呈现在屏幕上,这确实是个创新之举.如果你想体验全新的Windows UI风格,又不想费力将系统升级到Win8平台,不妨用WinMetro软件来实现. 上网下载WinMetro软件(下载地址:http://www.icpcw.com/bzsoft),安装并运行之后,首先会出现一个提示界面,点击"跳过"或&quo			

		

	

				

		

			

                雨林木风以XP.com推出高仿Windows操作系统
			

		

		

									

				雨林木风工作室在宣布解散一年之后,雨林木风官方团队在 平安夜发布了"Ylmf OS"开源操作系统.引人关注的是,雨林木风操作系统界面与Windows XP非常类似.此外,雨林木风官方证实此前耗资10万美元购得的XP.com域名,有可能会用于该开源操作系统的发行宣传.截至发稿时止,XP.com域名已经指向雨林木风操作系统的发布页面www.ylmf.org. 对于选在工作室解散一周年之际发布操作系统,雨林木风官方公开表示,"Ylmf OS"是雨林木风工作室解散一周年特别			

		

	

				

		

			

                高仿Windows Phone QQ登录界面实例代码_实用技巧
			

		

		

									

				给 TextBox文本框前添加图片 扩展PhoneTextBox:添加一个类"ExtentPhoneTextBox"继承 PhoneTextBox ,在"ExtentPhoneTextBox"类中添加属性项: 复制代码 代码如下: public class ExtentPhoneTextBox : PhoneTextBox    {        /// <summary>        /// 文本框图片属性        /// </summa			

		

	

				

		

			

                Android开发之高仿微信界面（1)
			

		

		

									

				转载自:http://blog.csdn.net/dawanganban/article/details/19925449   是男人就下100层[第一层]--高仿微信界面(1) 分类: Android高仿系列2014-02-25 23:07 4118人阅读 评论(14) 收藏 举报 微信界面高仿闪屏主题 从今天开始将进行一个特别有趣且有意义的专栏<是男人就下100层>,计划对市面上比较火的应用进行高度仿照,并将开发过程贴出来,和大家交流和分享.由于时间关系可能进度会比较缓慢,但是任何事情如果			

		

	

				

		

			

                雨林木风发布英文版高仿XP系统春节将推新版
			

		

		

									

				1月15日上午消息,此前曾推出高仿微软Windows XP中文操作系统的雨林木风公司,日前又发布了该操作系统的英文版Ylmf OS. 雨林木风公司负责人赖霖枫向新浪科技表示,会在春节前后再次推出更新版的中英文操作系统."新发布的版本根据用户的反馈进行了调整,有更好的用户体验." 雨林木风的这些高仿Windows XP操作系统均是在基于Linux的开源操作系统Ubuntu上修改而来."在中文版发布后,一些国外用户都发邮件过来,包括一些Linux组织,以及一些浏览器厂商都跟我们去			

		

	

				

		

			

                css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？
			

		

		

									

				我的思维大概是这样的-----有一个导航栏,用css写了hover事件,鼠标放上去会变成蓝色: 下面就有一个需求,点击导航某一项页面不会跳转,还在本页面,点击哪一个让哪一个变成蓝色,其余的为灰色的,但是当我点击完成之后,hover事件就会失效,不起作用了, 我的css代码是这样的 .content-top1>p:hover{ color: #19b1e8; } 我的js代码  $(".content-top1>p").click(function(){ $(".c			

		

	

				

		

			

                wordpress主题支持自定义菜单及修改css样式实现方法_Delphi
			

		

		

									

				自己在制作wordpress主题的时候遇到这个问题,并且遇到了css样式错误,其实很简单,操作如下: 在主题中functions.php中加入: register_nav_menus( array( 'menu' => __( 'menu', '' ), ) ); 在主题导航栏贴上导航代码: <?php wp_nav_menu( 'id=navbar' ); ?> 但是出现了css样式错误: 原来这个函数输出的是下面的格式: 复制代码 代码如下: <div id="men			

		

	

				

		

			

                C#制作高仿360安全卫士窗体&lt;一&gt;
			

		

		

									

				原文 http://www.cnblogs.com/kovin/p/3172234.html 开始写这一系列博客之前先要向大家说声抱歉,放肆雷特建立很久却很少有更新.当然博客人气也不旺,大部分都是看的人多评论收藏的人少.一直想要改变这种状态,正好赶上了最近工作上做了一个高仿360安全卫士窗体.所以将开发历程分享出来,一来希望能和大家交流共同学习成长:二来希望自己的放肆雷特能有人光顾. 这一系列的文章所用到的技术首先要感谢苏飞大哥,我也是在很早以前看了他的QQ皮肤制作文章之后得到的灵感和一些相关知