—页面布局实例———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 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...
随机推荐
- python安装依赖
yum install zlib zlib-devel openssl openssl-devel bzip2 bzip2-devel ncurses ncurses-devel readline r ...
- poj3207（two-sat）
传送门:Ikki's Story IV - Panda's Trick 题意:给定一个圆,圆上一些点.两点一线.现给出一些线,这些线可以在圆内连起来,也可以在圆外.问有没有可能所有的线画完且不出现相交 ...
- asp.net出现正在中止线程解决方案
刚才又再次遇到了一个之前遇到的问题,在这里记录一下. 起因: 如果使用 Response.End.Response.Redirect 或 Server.Transfer 方法,将出现 ThreadAb ...
- 读懂Java中的Socket编程(转)
Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...
- JAVA Socket(多个客户同时连接，信息共享) client (java/ruby)
第一步 充分理解Socket 1.什么是socket 所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字" ...
- asp.net操作word的表格
近日开发中用户要求实现导出数据为Word,本来想使用html保存为word的实现,但因用户要求样式很高,使用html不好控制,并且导出中包括图片,使用页面导出时图片还是一个路径,不能把图片包括在wor ...
- [置顶] 生成学习算法、高斯判别分析、朴素贝叶斯、Laplace平滑——斯坦福ML公开课笔记5
转载请注明:http://blog.csdn.net/xinzhangyanxiang/article/details/9285001 该系列笔记1-5pdf下载请猛击这里. 本篇博客为斯坦福ML公开 ...
- SSM框架整合（ Spring 、 SpringMVC 和 Mybatis )
1.基本概念 1.1.Spring Spring 是一个开源框架, Spring 是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作 Expert O ...
- 程序猿进化 - 在拉钩子1024对APE节讲座计划
注意:下面这篇文章来自于我在网上拉勾1024对APE节现场演示程序. 我是蒋宇捷,信天创投的合伙人.之前是百度魔图的联合创始人. 我先做个自我介绍,事实上每次介绍自己事实上是非常痛苦的事情,由于我前不 ...
- The mell hall——坑爹
The mell hall 题目描述 In HUST,there are always manystudents go to the mell hall at the same time as soo ...