win7自己的小算盘
晚上7各地点布局，9点半，刚拿到。
他发现自己专注的时候效率挺高真的哈萨克斯坦。计算器布局前。做了两件简单的页面布局练练手。今晚总体感觉更好，不难。
器之间调试有点蛋疼，真心不想搭理IE。
在进行布局之前。我先把win7自带的计算器总体进行裁剪測量了一下，然后了解到大致的尺寸。然后画了张草图（例如以下）。真是丑的不忍心看。我自己都认为不像我的风格，实在是太丑了。这样子，对于全局的把握起到了一个非常好的作用，最起码心里有数应该怎么怎么搞了。
先定义好盒子。把总体框架弄出来。然后在一个一个搞定。
因为FF和IE的兼容性不同，所以有些地方须要调试。
在这个实例中。就是计算器那三个字的位置须要调一下，用到了方法就是非经常见的!important,大家一看就明确了。
另一个问题是，在布局键盘的时候。详细有非常多中方法能够进行布局。可是为了提高代码的复用性，定义一个类选择器。用一个盒子套住全部键盘，注意键盘之间的空隙。
还有两个大的按键，要做适当的调整。
最后要注意的也就是脱离文本流的时候，也要注意边距。那个FF的firebug真的是个很好的调试工具。用它来查找问题再好只是了。听有的朋友说，区块向右浮动的时候IE会出bug，我前几次也遇到过，但这次基本没有问题。
不多说了，把代码直接放上来了。也当个纪念好了。供新手来作为一个參考吧，也仅仅能是參考，由于别人做的时候不能保证全部像素都一样。
html代码：
<html>
<head>
<title>计算器</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"layout.css" />
</head>
<body>
<div id="container">
<div id="title">
<div id="image"></div>
<div id="word"><p>计算器</p></div>
<div id="select">
<div id="min"></div>
<div id="max"></div>
<div id="off"></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"></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代码：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/71077.html
- 上一篇：C#如何使用和开发自定义配置节
- 下一篇：Win7系统下通过光驱安装CentOS7
