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

最新推荐文章于 2022-05-30 20:36:52 发布

wzqnls

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量3k

点赞数 2

分类专栏： ★语言 ------【CSS】 ------【HTML】漫谈CSS 细说HTML 文章标签： css html 布局 div

本文链接：https://blog.csdn.net/wzqnls/article/details/38499495

版权

本文介绍了使用HTML和CSS进行Win7计算器网页布局的过程，强调了布局前的测量与规划，以及在Firefox和IE间调试的挑战。通过设置盒子模型和类选择器实现键盘布局，同时处理了元素浮动和边距问题。提供的代码可供新手参考，以实现类似布局。

摘要由CSDN通过智能技术生成

晚上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>