HTML布局之计算器(div+css)

浏览数：45 / 时间：2015年06月09日

纯布局, 没有功能实现, 代码多但是不难, 可以作为参考.

代码示例:

html(div)代码:

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
	<meta charset="utf-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="css/layout.css">

  </head>
  
  <body>
  <a href="Main.html">返回主页</a>
  	<div id="container">
  	
  		<div id="title">
  			<div id="image"><img src="Image/image.png"> </div>
  			<div id="word"><p>计算器</p></div>
  			<div id="select">
  				<div id="min"><img src="Image/min.png"></div>
  				<div id="max"><img src="Image/max.png"></div>
  				<div id="off"><img src="Image/off.png"></div>
  			</div>
  		</div>
  		
  		<div id="main">
  			<div id="menu">
  			<p>查看(V)</p>
  			<div class="block"></div>
  			<p>编辑(E)</p>
  			<div class="block"></div>
  			<p>帮助(H)</p>
  			</div>
  			<div id="frame"><img src="Image/frame.png"></div>
  			<!-- 下面是按键 -->
  			<div id="button">
  				<div class="smallbutton"><p>MC</p></div>
  				 <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>MR</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><P>MS</P></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><P>M+</P></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><P>M-</P></div>  
  
                    <div class="smallbutton"><P>←</P></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>CE</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><P>C</P></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><P>±</P></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>√</p></div>  
  
                    <div class="smallbutton"><p>7</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>8</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>9</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>/</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>%</p></div>  
  
                    <div class="smallbutton"><p>4</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>5</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>6</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>*</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>1/x</p></div>  
  
                    <div class="smallbutton"><p>1</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>2</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>3</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>-</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="bigbuttonY"><p>=</p></div>  
  
                    <div class="bigbuttonX"><p>0</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>.</p></div>  
                    <div class="buttonblock"></div>  
                    <div class="smallbutton"><p>+</p></div>  
  			</div>
  		</div>
  	</div>
  </body>
</html>

CSS代码:

@CHARSET "UTF-8";
#container{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -161px -114px;
	width: 228px;
	height: 322px;
	border: 1px black solid;
	background: #e6e6fa;	
}
#title{
	width: 100%;
	height: 30px;
	background: #e6e6fa;
}
#image{
	float: left;
	width: 14px;
	height: 17px;
	margin-top: 6px;
	margin-left: 10px;
}
#word{
	margin-top: -8px; !important;
	
	float: left;
	width: 60px;
	height: 20px;
}

#word p{
	font-size: 14px;
	text-align: center;
}
#select{
	float: right;
	width: 107px;
	height: 15px;
	
	margin-right: 8px;
}

#min{
	float: left;
	width: 30px;
	height: 18px;
}
#max{
	float: left;
	width: 30px;
	height: 18px;
}
#off{
	float: right;
	width: 47px;
	height: 18px;
}
#main{
	width: 212px;
	height: 284px;
	margin-left: 8px;
	overflow: hidden;
}
#menu{
	float: left;
	width: 212px;
	height: 20px;
	background: #dcdcdc;
}
#menu p{
	float: left;
	font-size: 15px;
	margin-top: 1px;
	margin-left: 5px;
}
.block{
	float: left;
	width: 15px;
	height: 20px;
}
#frame{
	float: left;
	width: 190px;
	height: 48px;
	margin-top: 10px;
	margin-left: 3px;
}
#button{
	float: left;
	width: 190px;
	height: 180px;
	margin-left: 11px;
}
.smallbutton{
	float: left;
	width: 34px;
	height: 25px;
	margin-top: 5px;
	background: #dcdcdc
}
.bigbuttonY{
	float: right;
	width: 34px;
	height: 55px;
	background: #dcdcdc;
	margin-top: 5px;
}
.bigbuttonX{
	float: left;
	width: 73px;
	height: 25px;
	background: #dcdcdc;
	margin-top: 5px;
}
.buttonblock{
	float: left;
	width: 5px;
	height: 25px;
}
#button p{
	text-align: center;
	margin-top: 3px;
}

运行结果:

技术分享