HTML布局之计算器(div+css)_html/css_WEB-ITnose

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

代码示例:

html(div)代码:

      <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">        <a href="Main.html">返回主页</a>  	<div id="container">  	  		<div id="title">  			<div id="image">
<img  src="/static/imghw/default1.png" data-src="Image/image.png" class="lazy" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" > </div>  			<div id="word"><p>计算器</p></div>  			<div id="select">  				<div id="min"><img  src="/static/imghw/default1.png" data-src="Image/min.png" class="lazy" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></div>  				<div id="max"><img  src="/static/imghw/default1.png" data-src="Image/max.png" class="lazy" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></div>  				<div id="off"><img  src="/static/imghw/default1.png" data-src="Image/off.png" class="lazy" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></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="/static/imghw/default1.png" data-src="Image/frame.png" class="lazy" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></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>  

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;}

运行结果: