高仿Windows 98主题的CSS样式库

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

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

对话框

高仿Windows 98主题的CSS样式库

CSS代码:

.win98 .window { 


  background: #bfbfbf; 


  border: 1px solid; 


  border-top-color: #dfdfdf; 


  border-left-color: #dfdfdf; 


  border-right-color: #808080; 


  border-bottom-color: #808080; 


  box-shadow: 1px 1px 0 0 #000; 


  width: 400px; 


} 


.win98 .window .content { 


  padding: 7px 10px; 


} 


.win98 .window .header { 


  margin: 2px 2px 0; 


  padding: 1px 2px; 


  color: #fff; 


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


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


  font-weight: bold; 


  font-size: 11px; 


  line-height: 16px; 


} 


.win98 .window .header .icon { 


  width: 16px; 


  height: 16px; 


  float: left; 


  margin-right: 2px; 


} 


.win98 .window .header .buttons { 


  height: 14px; 


  float: right; 


} 


.win98 .window .header .buttons button { 


  vertical-align: text-top; 


  font-weight: bold; 


  line-height: 12px; 


  padding: 0; 


  height: 14px; 


  width: 14px; 


} 

下拉菜单

高仿Windows 98主题的CSS样式库

CSS代码:

相关推荐