純佈局, 沒有功能實現, 代碼多但是不難, 可以作爲參考.
代碼示例:
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;
}
運行結果:
