欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-09 12:26:52
...
纯布局, 没有功能实现, 代码多但是不难, 可以作为参考.

代码示例:

html(div)代码:

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

计算器

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

MC

MR

MS

M+

M-

CE

C

±

7

8

9

/

%

4

5

6

*

1/x

1

2

3

-

=

0

.

+

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

运行结果: