PHP布局例子(做计算器界面)

001:htm内容

=============================================================

<html>
<head>
<title>计算器布局设计</title>
<link rel="Stylesheet" style="text/css" href="Counter.css">
</head>

<body>
  <div id="fborder">
   <div id="fmenu">
    <ul>
     <li>编辑(E)</li>
     <li> </li>
     <li>查看(V)</li>
     <li> </li>
     <li>帮助(H)</li>
    </ul>
   </div>
   <div id="ftop">0.00</div>
   <div class="nav"></div>
   <div id="fbottom">
    <div id="left">
     <div class="fbutton"></div>
     <div class="nav"></div>
     <div class="fbutton">MC</div>
     <div class="nav"></div>
     <div class="fbutton">MR</div>
     <div class="nav"></div>
     <div class="fbutton">MS</div>
     <div class="nav"></div>
     <div class="fbutton">M+</div>
     <div class="nav"></div>
    </div>
    <div id="right">
     <div class="fbuttonb" style="font-size:12">Backspace</div>
     <div class="fbuttonb">CE</div>
     <div class="fbuttonb">C</div>
     <div class="nav"></div>

</div>
</div>

</div>
</body>

</html>

002:css内容

=========================================================

body {
    margin:0px;
    padding:0px;
    text-align:center;
}

#fborder {
   float:left;
   position:absolute; /*这一行一定要加，要不然下面的 left,top配置50%是不会有效果的*/
   left:50%;
   top:50%;
   width:300px;
   height:300px;
   border:10px solid #aaa;
   margin-left:-150px;
   margin-top :-150px;

}

.nav {
    width:100%;
    height:4px;
    clear:both;
    overflow:hidden;
}

#fmenu {
margin:0px;
width:290px;
height:25px;
line-height:25px;
}

ul {
   margin:0px;
   padding:0px;
   padding-left:10px;
}

li {
text-align:left;
float:left;
text-decoration:none;

}

#ftop {
text-align:right;
margin:2px;
width:290px;
height:25px;
line-height:25px;
border:2px solid #aaaaaa;
}

#fbottom {
margin:2px;
width:290px;
height:225px;
border:2px solid white;
}

#fbottom #left {
float:left;
width:50px;
height:220px;
border:0px;
margin:0px;
padding:0px;
padding-left:2px;
padding-top:2px;
}

#fbottom #right {
float:right;
width:230px;
height:220px;
border:0px;
margin:0px;
padding:0px;
padding-left:2px;
padding-top:2px;
}

.fbutton {
   float:left;
   margin:1px;
   width:45px;
   height:35px;
   line-height:35px;
   border:2px solid #aaa;
   color:red;
   font-size:30px;
   font-weight:bold;
   }

.ffont {
font-size:10px;
}

.fbuttonB {
   float:left;
   margin:1px;
   width:69px;
   height:35px;
   line-height:35px;
   border:2px solid #aaa;
   color:red;
   font-size:30px;
   font-weight:bold;
   }

.fbuttonC {
   float:left;
   margin:1px;
   width:39px;
   height:35px;
   line-height:35px;
   border:2px solid #aaa;
   color:red;
   font-size:30px;
   font-weight:bold;
   }

posted @ 2013-11-26 18:13 耗喜天涯阅读(245) 评论(0) 收藏举报

刷新页面返回顶部

耗喜天涯

PHP布局例子(做计算器界面)

公告