高仿Windows98主题的CSS样式库

windows_98.css是一个简单的CSS脚本，它可以实现Windows 98主题风格的对话框和下拉菜单，与Windows 98主题的仿真度非常高。如果在现代的网页上出现Windows 98的风格，是不是回给人一种怀念的感觉。

演示地址：http://static.codeceo.com/demo/201507/windows-98-css/index.html

对话框

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.

本文链接：http://www.codeceo.com/article/windows-98-css.htm

文章名称：高仿Windows98主题的CSS样式库
URL网址：http://www.shufengxianlan.com/qtweb/news22/365622.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

服务器托管知识

分类信息网

成都商城网站建设　　 　成都免费建站　　 　响应式网站建设　　 　简阳做网站　　 　南充护栏钻孔机　　 　温江网站建设　　 　短视频拍摄　　 　成都网站推广　　 　外贸网站设计方案　　 　成都做商城网站　　 　子晨包装　　 　成都模板网站　　 　四川广汉锦华　　 　电商网站　　 　成都微信开发　　 　旅游网站建设方案　　 　凯亚自动化控制　　 　成都搬家公司　　 　固迪佳新材料　　 　品牌网站建设