转载

高仿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代码：

  1. .win 98  .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. .win 98  .window .content { 
  12.    padding :  7px   10px ; 
  13. } 
  14. .win 98  .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. .win 98  .window .header . icon  { 
  25.    width :  16px ; 
  26.    height :  16px ; 
  27.    float :  left ; 
  28.    margin-right :  2px ; 
  29. } 
  30. .win 98  .window .header .buttons { 
  31.    height :  14px ; 
  32.    float :  right ; 
  33. } 
  34. .win 98  .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. } 

下拉菜单

高仿Windows 98主题的CSS样式库

CSS代码：

  1. .win 98  .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. .win 98  .menu:before, 
  16. .win 98  .menu:after { 
  17.    content :  "" ; 
  18.    display : table; 
  19. } 
  20. .win 98  .menu:after { 
  21.    clear :  both ; 
  22. } 
  23. .win 98  .menu >.menu-content { 
  24.    float :  right ; 
  25. } 
  26. .win 98  .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. .win 98  .menu .menu-sidebar .headline { 
  34.   -webkit-transform: rotate( 270 deg); 
  35.   -ms-transform: rotate( 270 deg); 
  36.   transform: rotate( 270 deg); 
  37.    position :  absolute ; 
  38.   bottom:  40px ; 
  39.   left:  -32px ; 
  40.    width :  100px ; 
  41.    height :  30px ; 
  42.    font-size :  16px ; 
  43.    color :  #fff ; 
  44. } 
  45. .win 98  .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. .win 98  .menu .menu-content .divider { 
  56.    margin :  7px   6px ; 
  57.    border-top :  1px   solid   #808080 ; 
  58.    border-bottom :  1px   solid   #dfdfdf ; 
  59. } 
  60. .win 98  .menu .menu-content .item { 
  61.    cursor :  pointer ; 
  62.    padding :  10px ; 
  63. } 
  64. .win 98  .menu .menu-content .item:hover { 
  65.    color :  #fff ; 
  66.    background :  #000080 ; 
  67. } 
  68. .win 98  .menu .menu-content .item.folder { 
  69.    position :  relative ; 
  70. } 
  71. .win 98  .menu .menu-content .item.folder:after { 
  72.    content :  '/25B6' ; 
  73.    float :  right ; 
  74.    font-size :  10px ; 
  75. } 
  76. .win 98  .menu .menu-content .item . icon  { 
  77.    float :  left ; 
  78.    margin-right :  7px ; 
  79.    margin-top :  -4px ; 
  80. } 
  81. .win 98  .menu .menu-content .item:hover .menu-content, 
  82. .win 98  .menu .menu-content .item:focus .menu-content { 
  83.    display :  block ; 
  84. } 
  85. .win 98  .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. .win 98  .menu .menu-content .menu-content .item { 
  99.    padding :  3px   10px ; 
  100. } 
  101. .win 98  .menu .menu-content .menu-content . icon  { 
  102.    width :  18px ; 
  103.    height :  18px ; 
  104.    margin-top :  -2px ; 
  105. } 

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

正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 springcloud-demo Git教程 Spring教程 openfire参考指南 Java设计模式 Jenkins进阶系列 HBase教程 java-demo Maven教程 hibernate教程 memcached教程 Docker 教程 Quartz指南 Hive教程 SpringCloud Ant教程 ANTLR教程 java实例教程 Elastic-Job-Lite XStream教程 Hazelcast教程 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 solr教程 WebService CXF学习 Hadoop教程 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo openclaw90x Linux入门视频教程
近期评论
  1. 1 如何拿第一批100用户
  2. 2 AppChat 真流式 + 思考过程推送配置指南
  3. 3 为什么要做 TryAPI：把零散 API 变成 AI 时代的基础设施
  4. 4 YouTube 能不能带量
  5. 5 你关注了 3000 人，但真正和你说话的可能只有 30 个
  6. 6 一次 OpenClaw 消息投递故障复盘：delivery-recovery 为何不断重试？
  7. 7 我用 Grok Bot 搭了一个「数字军团」，还真的把网站做出来了
  8. 8 小红书适合做出海吗
  9. 9 StartFast：别再重复造轮子，用一套 Next.js 模板快速上线 SaaS
  10. 10 OpenClaw 沙箱环境运行实践：Docker 部署下如何动态创建 Sandbox
网站信息
  • 文章总数：80,402 篇
  • 文件总数：211,394 个
  • 标签总数：2,655 个
  • 分类总数：92 个
  • 留言数量：2,618 条
  • 在线人数：37 人
  • 运行天数：5,109天
  • 最后更新：2026年10月23日23点
Loading...

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

其他链接

问题交流

[HBLOG]公众号 HBLOG HBLOG