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

来源：互联网发布：课程优化编辑：程序博客网时间：2024/06/05 07:55

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

代码示例:

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

运行结果:

0 0