Home >Web Front-end >HTML Tutorial >HTML layout calculator (div css)_html/css_WEB-ITnose
HTML layout calculator (div css)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:502617browse
Pure layout, no function implementation, a lot of code but not difficult, can be used as a reference.
Code example:
html (div) code:
<!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 code:
@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;} Running result:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5-Table_html/css_WEB-ITnoseNext article：HTML5-Table_html/css_WEB-ITnose