网页布局实例————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="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:

IE:

网页布局实例————win7自带计算器

时间： 2024-08-11 01:34:22

网页布局实例————win7自带计算器的相关文章

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

晚上7各地点布局,9点半,刚拿到. 他发现自己专注的时候效率挺高真的哈萨克斯坦.计算器布局前.做了两件简单的页面布局练练手.今晚总体感觉更好,不难. 器之间调试有点蛋疼,真心不想搭理IE. 在进行布局之前.我先把win7自带的计算器总体进行裁剪測量了一下,然后了解到大致的尺寸.然后画了张草图(例如以下).真是丑的不忍心看.我自己都认为不像我的风格,实在是太丑了.这样子,对于全局的把握起到了一个非常好的作用,最起码心里有数应该怎么怎么搞了. watermark/2/text/aHR0cDovL2J

布局实例：用表格布局实现计算器布局

预览效果: <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" androi

《HTML 5网页开发实例详解》目录

第一篇  从宏观上认识HTML 5 讲述了HTML 5引发的Web革命.HTML 5的整体特性.HTML 5相关概念和框架和开发环境搭建. 第1章 HTML 5引发的Web革命 1.1  你是不是真的了解HTML 5 1.1.1  通过W3C认识HTML 5的发展史 1.1.2  HTML 5.HTML4.XHTML的区别 1.1.3  什么人应该学HTML 5 1.1.4  一个图告诉你如何学习HTML 5 1.2  浏览器之争 1.2.1  说说这些常见的浏览器 1.2.2  浏览器的兼容烦

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

网页布局之---固定布局、流动布局、弹性布局(转)

原文地址 有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网站. 当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨

当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样的网页是怎样改制作出来的呢?今天我们就来探讨一下这个问题 阅读读者具备基础 1.熟练的使用HTML和CSS 2.对HTML5和CSS3有一定的了解,这个不必深入 3.掌握JavaScript.jquery脚本语言 如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了 HTML的

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询

响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上响应式设计.媒体查询能够来解决这一问题.媒体查询能够为特定的浏览器和设备提供特定的样式.媒体查询是CSS 3的一个新特性,是对媒体类型的扩展. 提示:W3C列出了10种媒体类型,请參考http://www.w3.org/TR/CSS2/media.html#media-types. 在响应式设计中,