除了div，常见的还有用table布局，这里直接用前面博文的页头页尾，如下面的页面的部分，是个简单的table。
该页面样式，如果拖动浏览器，可以看到table和文本框总是居中，但是文本框下方那两个按钮没有设置居中，根据浏览器大小宽度拖动，按钮也会有变化。如果想按钮也随着浏览器变动而有较好的位置，也可以放div或table里进行居中。

如果一个页面设计了居中，中间区块最好都是居中的，虽然一般人浏览器页面都是浏览器最大化，但是由于电脑显示器等不同，或浏览器拖动等，有不居中的元素显示位置就会有差异。

所用css样式：（有前面博文用到的样式，放在一起了）

body{margin:0px;font-size:12px;}

#body{width:100%;}

#bodyleft{background-image:url(../images/t1.png);width:790px;height:25px;margin:auto;}

#bodymiddle{background-image:url(../images/t2.png);width:790px;text-align:center;margin:auto;}

#bodyright{background-image:url(../images/t3.png);width:790px;height:25px;margin:auto;}

.btn1{background-color: #5ff6ed;font-size: 12px;}

.btn2 {background-color:#2175bd;border:none;color:white;padding:5px 10px;text-align:center;text-decoration:none;margin-left:250px;}

.btn3 {background-color:#2175bd;border:none;color:white;padding:5px 10px;text-align:center;text-decoration:none;margin-left:20px;}

.btn4 {background-color:#3f7730;border:none;color:white;padding:5px 10px;text-align:center;text-decoration:none;margin-left:0px;}

.next{color:blue;}

#header{background-image:url(../images/topbg.png);width:100%;height:100px;}

#head1{background-image:url(../images/lodoptest.png);width:400px;height:100px;}

#footer{width:790px;height:100px;margin:auto;text-align:right;}

#bodyA1{background-color:#f1f3f5;}

#testhtmDiv{margin:auto;text-align:center;padding-top:30px;}

#tableD1{background:#dbedb4;width:750px;height:90px;margin:30px auto;}

页面html代码

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WEB打印控件LODOP</title>

<script language="javascript" src="LodopFuncs.js"></script>

 <link href="css/stylecss1.css" type='text/css' rel="stylesheet">

</head>

<body id="bodyA1">

<div id="header">

<div id="head1"></div>

</div>

<div id="testhtmDiv">

输入需要测试的html代码：

 <p><textarea rows="12" id="S1" cols="107" ></textarea><br>

 </div>

 <input type="button" class="btn2" value="点击预览" onclick="TestHtmPre()"><input type="button" class="btn2" value="进入设计" onclick="TestHtmDes()">

 <div id="tableD1">

<table width="750px" height="90px">

<tr>

    <td width="150px" height="30px">输入纸张宽度：</td>

    <td width="150px" height="30px"><input type="text" id="PZ_W"></td>

    <td width="150px" height="30px">输入纸张高度</td>

    <td width="150px" height="30px"><input type="text" id="PZ_H"></td>

    <td width="150px" height="30px"> <input type="button" class="btn3" value="根据纸张预览" onclick="prndiypage()"></td>

</tr>

<tr>

    <td width="150px" height="30px">输入打印项宽度：</td>

    <td width="150px" height="30px"><input type="text" id="item_W"></td>

    <td width="150px" height="30px">输入打印项高度</td>

    <td width="150px" height="30px"><input type="text" id="item_H"></td>

    <td width="150px" height="30px"> <input type="button" class="btn4" value="根据打印项和纸张预览" onclick="prndiypage2()"></td>

</tr>

<tr>

    <td colspan=5 height="30px">PS：输入打印项宽高和纸张宽高，才可用：<font color="#3f7730">绿色按钮</font></td>

</tr>

</table>

<div>

<div id="footer"><img src="./images/lodopfoot.png"></div>

<script language="javascript" type="text/javascript">

        var LODOP; //声明为全局变量

        function TestHtmDes(){

        LODOP=getLodop();

        LODOP.PRINT_INIT("");

        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("S1").value);

        LODOP.PRINT_DESIGN();

    };

        function TestHtmPre(){

        LODOP=getLodop();

        LODOP.PRINT_INIT("");

        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("S1").value);

        LODOP.PREVIEW();

    };

        function prndiypage2() {

        LODOP=getLodop();

        LODOP.PRINT_INIT("");

        LODOP.SET_PRINT_PAGESIZE(1, document.getElementById("PZ_W").value, document.getElementById("PZ_H").value,"");

        LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("S1").value);

        LODOP.PREVIEW();

    };

          function prndiypage2() {

        LODOP=getLodop();

        LODOP.PRINT_INIT("");

        LODOP.SET_PRINT_PAGESIZE(1, document.getElementById("PZ_W").value, document.getElementById("PZ_H").value,"");

        LODOP.ADD_PRINT_HTM(0,0,document.getElementById("item_W").value,document.getElementById("item_H").value,document.getElementById("S1").value);

        LODOP.PREVIEW();

    };

</script>

</body>

图示：

效果如图，浏览器最大化，两个按钮的位置是第一个图，第一个按钮已经在上面文本框的左侧。
浏览器缩小，div和table都随着浏览器的变化左右边距发生了变化，还是保持居中，中间的按钮已经到了文本框中间位置。

HTML布局排版5 测试某段html页面1的更多相关文章

  1. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  2. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  3. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  4. iOS测试一段代码的运行时间

    王刚韧 23:19:26测试一段代码的运行时间 测试一段代码运行花了多久: NSDate* tmpStartData = [NSDate date] ;<#代码#> double delt ...

  5. QT5:第二章 布局排版控件

    一.简介 在QT组件面板中有Layouts和Spacers两个组件面板 注意:布局排版控件不显示 1.Layouts(布局) Vertical Layout:垂直方向布局,组件自动在垂直方向上分布 H ...

  6. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  7. HTML布局排版1清除body的margin

    观察可发现,一般的HTML页面分为上中下三部分,上边是导航一栏,中间是内容,下方是页面的下部分.注意html里body本身自带8px的上下左右外边距,如图,在qq浏览器和ie里可以看到body本身是8 ...

  8. HTML布局排版4三部分测试图片页面

    布局样式有前面的三个相关博文介绍: 该页面因为方便以后自己用,所以JS并没有判断输入内容为空或不对的情况.页面本身特点:1.页头的透明图,方便不更换底层渐变的情况下,更换图片2.浏览器宽度改变,中间b ...

  9. java中如何测试一段代码的运行时间

    一.以毫秒为单位.long startTime = System.currentTimeMillis(); //获取开始时间 doSomething(); //测试的代码段 long endTime ...

随机推荐

  1. 华东交通大学 2019 I 不要666 数位dp进阶

    Problem Description 题库链接 666是一个网络用语,用来形容某人或某物很厉害很牛.而在西方,666指魔鬼,撒旦和灵魂,是不吉利的象征.所以邓志聪并不喜欢任何与6有关的数字.什么数字 ...

  2. easyui181版本使用记录

    easyui181版本下载地址 简单java+easyui181版本demo下载 注意前端页面的ajax请求路径对应后端 如果再加强样式可使用adminLTE

  3. HTML插入音频和视频：audio和video标签及其属性

    一.上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码 <iframe height=498 width=510 src='http://player.youku.com/embed/ ...

  4. SqrtTree学习笔记

    散步的时候yy区间最值的不同分块做法,发现单点修改\(O(\sqrt{n})\)查询\(O(1)\)的做法不是很会? 于是yy了一个奇怪做法,写出来看看. 考虑查询的时候两端的散点可以用前后缀最值查出 ...

  5. linux 查看带宽瓶颈

    1.首先要确定网卡带宽是多少(单位是Mbit/s) ethtool eth1 | grep Speed 2.确定当前带宽使用情况 使用 nload 工具,如果没有可以yum install nload ...

  6. P1098 字符串的展开——细节决定成败

    P1098 字符串的展开 规则有点多吧: isdigit(char) 表示如果字符是数字返回一,否则返回0: 倒序做一个下标就行了: 巧用三目运算符避开分类讨论,避开开头和结尾,根据条件层层逼近: # ...

  7. 数据结构Java版之堆&堆排序（九）

    堆分为大顶堆,和小顶堆. 什么是堆? 堆可以看成是一棵二叉树,二叉树的元素是一个数组不断的从左到右轮训放置.如果是大顶堆,则大的数放上面一层,小的数放下面一层.上一层的数,一定大于下一层的数.小顶堆则 ...

  8. 设计模式-Iterator

    本文参(chao)考(xi)<图解设计模式> 结城浩 (作者) 杨文轩 (译者) 1.Iterator 模式 迭代器作用于集合,是用来遍历集合元素的对象. 迭代器模式提供一种方法顺序访问一 ...

  9. JVM(一) ---JVM的数据模型

    JVM的逻辑内存模型图 [逻辑内存模型图] ----- JVM内部分区 其实JVM内部不仅仅只有栈和堆 包括 程序计数器 . Java 虚拟机栈 .本地方法栈.Java 堆.方法区等 1. 程序计数器 ...

  10. Oracle的存储的三大物理文件

      分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 一. ...