纯布局, 没有功能实现, 代码多但是不难, 可以作为参考.
代码示例:
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" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" > </div> <div id="word"><p>计算器</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div> <div id="select"> <div id="min"><img src="Image/min.png" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></div> <div id="max"><img src="Image/max.png" alt="HTML布局之计算器(div+css)_html/css_WEB-ITnose" ></div> <div id="off"><img src="Image/off.png" 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="Image/frame.png" 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 class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1751" title="Descript"><img
src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d01b6eea6312.png" alt="Descript" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1751" title="Descript">Descript</a>
<p>一个多功能的音频和视频编辑引擎</p>
</div>
<a href="/ai/1751" title="Descript" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></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;}运行结果:
