—页面布局实例———win7自己的小算盘

晚上7各地点布局，9点半，刚拿到。

他发现自己专注的时候效率挺高真的哈萨克斯坦。计算器布局前。做了两件简单的页面布局练练手。今晚总体感觉更好，不难。

器之间调试有点蛋疼，真心不想搭理IE。

在进行布局之前。我先把win7自带的计算器总体进行裁剪測量了一下，然后了解到大致的尺寸。然后画了张草图（例如以下）。真是丑的不忍心看。我自己都认为不像我的风格，实在是太丑了。这样子，对于全局的把握起到了一个非常好的作用，最起码心里有数应该怎么怎么搞了。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

先定义好盒子。把总体框架弄出来。然后在一个一个搞定。

因为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="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代码：

#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;

	background:url(image/image.png);

}

#word{

	margin-top:-8px !important;		/*先后顺序不要搞错了*/

	margin-top:7px;					/*<计算器>所在位置调试*/

	margin-left:-4px;

	float:left;

	width:60px;

	height:20px;

}

#word p{

	font-size:14px;

	text-align:center;

}

#select{

	float:right;

	width:107px;

	height:20px;

	margin-right:8px;

}

#min{

	float:left;

	width:30px;

	height:20px;

	background:url(image/min.png);

}

#max{

	float:left;

	width:30px;

	height:20px;

	background:url(image/max.png);

}

#off{

	float:right;

	width:47px;

	height:20px;

	background:url(image/off.png);

}

#main{

	width:212px;

	height:284px;

	margin-left:8px;

	overflow:hidden;

}

#menu{

	float:left;

	width:212px;

	height:20px;

	background:#dcdcdc;

	border:1px solid #dcdcdf;

}

#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:11px;

	background:url(image/frame.jpg);

}

#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;

}

英文水平实在有限，定义样式的时候单词想到那个就用那个了，英语还需努力哈。

最后放两张FF和IE的执行图，基本一样吧，尽管也不好看。但也不算太丑，主要是那个颜色真不知道怎么调到和win7自带计算器一模一样。

FF:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

IE:

—页面布局实例———win7自己的小算盘的更多相关文章

CSS传统布局之页面布局实例
传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...
flex-手机端主页布局实例---构造页面结构
Flexbox页面布局实例,成本效果图如下, 源码下载在最下面. 源码下载:https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w 提取码:wiyc样本地址: ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
Bootstrap入门二：响应式页面布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
Xaml 页面布局学习
对于一开始设计xaml界面的初学者,总是习惯性的拖拽控件进行布局,这样也许方便.简单.快捷,但偶尔会出现一些小错误, 当需要将控件进行很细微的挪动时也比较吃力. 这里,我个人建议用一些代码将xaml界 ...
Html代码seo优化最佳布局实例讲解
搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...
HTML5入门教程：响应式页面布局
摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

随机推荐

HDU 4704 Sum （费马定理+快速幂）
Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Subm ...
zzu--2014年11月16日月潭赛 B称号
1229: Rational Resistance Time Limit: 1 Sec Memory Limit: 128 MB Submit: 8 Solved: 4 [id=1229" ...
jQuery 弹出窗口的形式一直是具体案件的中心
在网上查多不是不符合无效;因此,一些自己总结,解决这个问题原则: 常见问题: 弹出层居中了,背景也是半透明的可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来 ...
Oracle 最简单的随系统自己主动启动
Oracle 最简单的随系统自己主动启动俗话说用户是上帝,他们有时候提出一个问题很的简单,就仅仅须要一句话,一分钟就完事了.可是拿到我们DBA来说,可能至少得半个小时甚至半个月才干满足他的一句话.有 ...
PHP实现快速排序算法
快速排序(Quick Sort)是对冒泡排序的一种改进,属不稳定排序算法,由东尼·霍尔在1962年提出.快速排序基本步骤:从数列中挑出一个元素(一般称为称为“基准”),通过一趟排序将要排序的数据分割成 ...
android_重写button样式
这样的button样式应该源自IOS.假设安卓上实现,则须要使用android上面的layer-list来实现. 事实上layer-list有点像framlayout,作用就是覆盖. 先说一下实现原理 ...
大话设计模式C++达到-文章12章-外观模式
一.UML画画关键词:添加Facade层. 二.概念外观模式:为子系统中的一组接口提供一个一致的界面.此模式定义了一个高层接口,这个接口使得这一子系统更加easy使用. 三.说明 Q:外观模式在什 ...
WPF点滴
1 设置窗体的最大化,而且无边框 <Style x:Key="WindowsStyle" TargetType="Window"> <Sett ...
提高PHP编程效率的方法
用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中说 ...
矩形旋转碰撞,OBB方向包围盒算法实现
怎样进行2D旋转矩形的碰撞检測.能够使用一种叫OBB的检測算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律 ...

—页面布局实例———win7自己的小算盘

—页面布局实例———win7自己的小算盘的更多相关文章

随机推荐

热门专题