windows_98.css是一個簡單的CSS腳本,它可以實現Windows 98主題風格的對話框和下拉菜單,與Windows 98主題的仿真度非常高。如果在現代的網頁上出現Windows 98的風格,是不是回給人一種懷念的感覺。
演示地址:http://static.codeceo.com/demo/201507/windows-98-css/index.html

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;
}
CSS代碼:
.win98 .menu {
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;
zoom: 1;
width: 195px;
font-size: 13px;
padding: 1px;
position: relative;
}
.win98 .menu:before,
.win98 .menu:after {
content: "";
display: table;
}
.win98 .menu:after {
clear: both;
}
.win98 .menu >.menu-content {
float: right;
}
.win98 .menu .menu-sidebar {
background: -webkit-linear-gradient(top, #000080, #1084d0);
background: linear-gradient(to bottom, #000080, #1084d0);
position: absolute;
width: 25px;
height: 100%;
}
.win98 .menu .menu-sidebar .headline {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: absolute;
bottom: 40px;
left: -32px;
width: 100px;
height: 30px;
font-size: 16px;
color: #fff;
}
.win98 .menu .menu-content {
margin: 0;
padding: 0;
border: 0;
outline: 0;
color: #000;
list-style: none;
margin: 2px 0;
width: 170px;
}
.win98 .menu .menu-content .divider {
margin: 7px 6px;
border-top: 1px solid #808080;
border-bottom: 1px solid #dfdfdf;
}
.win98 .menu .menu-content .item {
cursor: pointer;
padding: 10px;
}
.win98 .menu .menu-content .item:hover {
color: #fff;
background: #000080;
}
.win98 .menu .menu-content .item.folder {
position: relative;
}
.win98 .menu .menu-content .item.folder:after {
content: '\25B6';
float: right;
font-size: 10px;
}
.win98 .menu .menu-content .item .icon {
float: left;
margin-right: 7px;
margin-top: -4px;
}
.win98 .menu .menu-content .item:hover .menu-content,
.win98 .menu .menu-content .item:focus .menu-content {
display: block;
}
.win98 .menu .menu-content .menu-content {
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;
display: none;
position: absolute;
left: 165px;
top: -4px;
}
.win98 .menu .menu-content .menu-content .item {
padding: 3px 10px;
}
.win98 .menu .menu-content .menu-content .icon {
width: 18px;
height: 18px;
margin-top: -2px;
}本文鏈接:http://www.codeceo.com/article/windows-98-css.html
本文作者:碼農網 – 小峰
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。