高仿Windows 98主题的CSS样式库

对话框

CSS代码：

1. .win98 .window { 
2.   background: #bfbfbf; 
3.   border: 1px solid; 
4.   border-top-color: #dfdfdf; 
5.   border-left-color: #dfdfdf; 
6.   border-right-color: #808080; 
7.   border-bottom-color: #808080; 
8.   box-shadow: 1px 1px 0 0 #000; 
9.   width: 400px; 
10. } 
11. .win98 .window .content { 
12.   padding: 7px 10px; 
13. } 
14. .win98 .window .header { 
15.   margin: 2px 2px 0; 
16.   padding: 1px 2px; 
17.   color: #fff; 
18.   background: -webkit-linear-gradient(left, #000080, #1084d0); 
19.   background: linear-gradient(to right, #000080, #1084d0); 
20.   font-weight: bold; 
21.   font-size: 11px; 
22.   line-height: 16px; 
23. } 
24. .win98 .window .header .icon { 
25.   width: 16px; 
26.   height: 16px; 
27.   float: left; 
28.   margin-right: 2px; 
29. } 
30. .win98 .window .header .buttons { 
31.   height: 14px; 
32.   float: right; 
33. } 
34. .win98 .window .header .buttons button { 
35.   vertical-align: text-top; 
36.   font-weight: bold; 
37.   line-height: 12px; 
38.   padding: 0; 
39.   height: 14px; 
40.   width: 14px; 
41. } 

下拉菜单

CSS代码：

1. .win98 .menu { 
2.   background: #bfbfbf; 
3.   border: 1px solid; 
4.   border-top-color: #dfdfdf; 
5.   border-left-color: #dfdfdf; 
6.   border-right-color: #808080; 
7.   border-bottom-color: #808080; 
8.   box-shadow: 1px 1px 0 0 #000; 
9.   zoom: 1; 
10.   width: 195px; 
11.   font-size: 13px; 
12.   padding: 1px; 
13.   position: relative; 
14. } 
15. .win98 .menu:before, 
16. .win98 .menu:after { 
17.   content: ""; 
18.   display: table; 
19. } 
20. .win98 .menu:after { 
21.   clear: both; 
22. } 
23. .win98 .menu >.menu-content { 
24.   float: right; 
25. } 
26. .win98 .menu .menu-sidebar { 
27.   background: -webkit-linear-gradient(top, #000080, #1084d0); 
28.   background: linear-gradient(to bottom, #000080, #1084d0); 
29.   position: absolute; 
30.   width: 25px; 
31.   height: 100%; 
32. } 
33. .win98 .menu .menu-sidebar .headline { 
34.   -webkit-transform: rotate(270deg); 
35.   -ms-transform: rotate(270deg); 
36.   transform: rotate(270deg); 
37.   position: absolute; 
38.   bottom: 40px; 
39.   left: -32px; 
40.   width: 100px; 
41.   height: 30px; 
42.   font-size: 16px; 
43.   color: #fff; 
44. } 
45. .win98 .menu .menu-content { 
46.   margin: 0; 
47.   padding: 0; 
48.   border: 0; 
49.   outline: 0; 
50.   color: #000; 
51.   list-style: none; 
52.   margin: 2px 0; 
53.   width: 170px; 
54. } 
55. .win98 .menu .menu-content .divider { 
56.   margin: 7px 6px; 
57.   border-top: 1px solid #808080; 
58.   border-bottom: 1px solid #dfdfdf; 
59. } 
60. .win98 .menu .menu-content .item { 
61.   cursor: pointer; 
62.   padding: 10px; 
63. } 
64. .win98 .menu .menu-content .item:hover { 
65.   color: #fff; 
66.   background: #000080; 
67. } 
68. .win98 .menu .menu-content .item.folder { 
69.   position: relative; 
70. } 
71. .win98 .menu .menu-content .item.folder:after { 
72.   content: '\25B6'; 
73.   float: right; 
74.   font-size: 10px; 
75. } 
76. .win98 .menu .menu-content .item .icon { 
77.   float: left; 
78.   margin-right: 7px; 
79.   margin-top: -4px; 
80. } 
81. .win98 .menu .menu-content .item:hover .menu-content, 
82. .win98 .menu .menu-content .item:focus .menu-content { 
83.   display: block; 
84. } 
85. .win98 .menu .menu-content .menu-content { 
86.   background: #bfbfbf; 
87.   border: 1px solid; 
88.   border-top-color: #dfdfdf; 
89.   border-left-color: #dfdfdf; 
90.   border-right-color: #808080; 
91.   border-bottom-color: #808080; 
92.   box-shadow: 1px 1px 0 0 #000; 
93.   display: none; 
94.   position: absolute; 
95.   left: 165px; 
96.   top: -4px; 
97. } 
98. .win98 .menu .menu-content .menu-content .item { 
99.   padding: 3px 10px; 
100. } 
101. .win98 .menu .menu-content .menu-content .icon { 
102.   width: 18px; 
103.   height: 18px; 
104.   margin-top: -2px; 
105. } 

作者：小峰

来源：51CTO