转载

高仿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教程 Spring教程 Git教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 springcloud-demo JPA教程 ActiveMQ中文指南 Java内存模型 java-demo dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Cloud Circuit Breaker快速入门Demo
  2. 2 Spring Cloud Bus快速入门Demo
  3. 3 Spring Cloud Config快速入门Demo
  4. 4 Spring Cloud Function快速入门Demo
  5. 5 SSPanel-Uim搭建教程 2023年全新定制版主题-解决老版本命令失效问题
  6. 6 Spring Boot集成Milvus和deeplearning4j实现图搜图功能
  7. 7 Spring Boot集成Aviator实现参数校验
  8. 8 ACME自动申请免费的通配符https域名证书
  9. 9 wordpress 数据库和文件优化
  10. 10 CentOS安装Docker与Docker-Compose
网站信息
  • 文章总数：82,696 篇
  • 文件总数：284,257 个
  • 标签总数：2,380 个
  • 分类总数：84 个
  • 留言数量：2,560 条
  • 在线人数：622 人
  • 运行天数：4,393天
  • 最后更新：2024年11月06日00点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG