javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

css+html写的仿windows XP计算器

来源:IT技术网编辑:香独秀发布于:2013-08-27人围观CSSwindows XP计算器htm

无聊随便写了个,没有使用图片,除了个别细节,基本和xp自带的计算器样式非常接近。有空再添加计算功能,具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<style>
*{
	margin:0;
	padding:0;
	-webkit-text-size-adjust: none;
	font-family:宋体;
}
#jisuanqi{
	margin:100px auto;
	width:260px;
	height:243px;
	background:#0058EE;
	border:1px solid #00C;
	border-radius:5px 5px 0 0;
}

#title{
	height:28px;
}
#title h1{
	height:28px;
	line-height:28px;
	font-size:13px;
	font-weight:bold;
	text-indent:10px;
	color:#fff;
	text-shadow:1px 1px 0px #333;
}
#title h1 span{
	font-family:Verdana, Geneva, sans-serif;
	margin-left:130px;
	height:28px;
	line-height:28px;
	font-size:10px;
	font-weight:nomorl;
	color:#fff;
	text-shadow: none;
}

#content{
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
	width:234px;
	height:212px;
	background:#ECE9D8;
}

#menu{
	position:relative;
	width:254px;
	height:20px;
}
#menu .ul1{
	position:absolute;
	float:left;
	height:20px;
	overflow:hidden;
	cursor:pointer;
}
#menu .ul1:hover{
	height:60px;
	overflow:hidden;
	background:#ECE9D8;
	border:1px solid #ddd;
}
#menu .ul2{
	position:absolute;
	float:left;
	left:50px;
	height:20px;
	overflow:hidden;
	cursor:pointer;
}
#menu .ul2:hover{
	height:60px;
	overflow:hidden;
	background:#ECE9D8;
	border:1px solid #ddd;
}
#menu .ul3{
	position:absolute;
	float:left;
	left:100px;
	height:20px;
	overflow:hidden;
	cursor:pointer;
}
#menu .ul3:hover{
	height:60px;
	overflow:hidden;
	background:#ECE9D8;
	border:1px solid #ddd;
}

#menu li{
	list-style:none;
	font-size:12px;
	margin-right:3px;
	line-height:20px;
	height:20px;
}
#menu li a{
	display:block;
	width:50px;
	height:20px;
	line-height:20px;
	text-align:center;
}
#menu li a:hover{
	background:#2F6CBF;
	color:#fff;
}
#textfield{
	margin:22px auto 2px;
	width:225px;
	height:18px;
	line-height:18px;
	direction:rtl;
	outline:none;
	font-size:12px;
	padding-right:5px;
}

#left{
	margin-top:10px;
	float:left;
	width:40px;
	height:150px;
}

#block{
	margin:0 auto;
	width:22px;
	height:22px;
	border:2px inset #ccc;
}

#right{
	margin-top:10px;
	margin-right:6px;
	float:right;
	width:200px;
	height:160px;
}

.box{
	margin:5px auto 0 2px;
	width:34px;
	height:26px;
	font-size:12px;
	color:#ff0000;
}
.box:hover{
	font-size:12px;
	color:#ff0000;
}
.box:active{
	font-size:12px;
	color:#ff0000;
}

.box2{
	float:left;
	margin-right:4px;
	width:60px;
	height:26px;
	font-size:12px;
	color:#ff0000;
}
.box2:hover{
	font-size:12px;
	color:#ff0000;
}
.box2:active{
	font-size:12px;
	color:#ff0000;
}

.box3{
	float:left;
	margin:5px 4px 0 0;
	width:34px;
	height:26px;
	font-size:12px;
	color:#0000FF;
}
.box3:hover{
	font-size:12px;
	color:#0000FF;
}
.box3:active{
	font-size:12px;
	color:#0000FF;
}	

.clear{
	clear:both;
}
</style>


<script>
function zero(){
	document.getElementById("textfield").value='';
}


</script>

<body>



	<div id="jisuanqi">
    
    	<div id="title">
        <h1>计算器<span>by menglong</span></h1>
        </div>
        
        <div id="content">
        
        <div id="menu">
        <ul class="ul1">
          <li><a>编辑(E)</a></li>
          <li><a>复制(C)</a></li>
          <li><a>粘贴(P)</a></li>
        </ul>
        
        <ul class="ul2">
          <li><a>查看(V)</a></li>
          <li><a>标准(T)</a></li>
          <li><a>科学(S)</a></li>
        </ul>
        
        <ul class="ul3">
          <li><a>帮助(H)</a></li>
          <li><a>主题(H)</a></li>
          <li><a>关于(A)</a></li>
        </ul>
        
        <input type="text" id="textfield" value=""   />
        
        <div id="left">
        
        	<div id="block"></div>
            
            <input type="button" value="MC" class="box"  />
            <input type="button" value="MR" class="box"  />
            <input type="button" value="MS" class="box"  />
            <input type="button" value="M+" class="box"  />
        
        </div>
      
        <div id="right">
        
       	    <input type="button" value="Backspace" class="box2"  />
            <input type="button" value="CE" class="box2"  />
            <input type="button" value="清零" class="box2"  onclick="zero()" />
            
            <input type="button" value="7" class="box3"  />
            <input type="button" value="8" class="box3"  />
            <input type="button" value="9" class="box3"  />
            <input type="button" value="/" class="box3"  />
            <input type="button" value="sqrt" class="box3"  />
            
            <input type="button" value="4" class="box3"  />
            <input type="button" value="5" class="box3"  />
            <input type="button" value="6" class="box3"  />
            <input type="button" value="*" class="box3"  />
            <input type="button" value="%" class="box3"  />
            
            <input type="button" value="1" class="box3"  />
            <input type="button" value="2" class="box3"  />
            <input type="button" value="3" class="box3"  />
            <input type="button" value="-" class="box3"  />
            <input type="button" value="1/x" class="box3"  />
            
            <input type="button" value="0" class="box3"  />
            <input type="button" value="+/-" class="box3"  />
            <input type="button" value="." class="box3"  />
            <input type="button" value="+" class="box3"  />
            <input type="button" value="=" class="box3"  />
        
        
        </div>
        
        
        <div class="clear"></div>
        
        </div>
        
        </div>
    
    
    </div>

</body>
</html>


CSS,windows XP,计算器,相关的文章
有时间的话来看看IT界的突发事件