使用乱序标签来控制HTML的输出效果
2005-05-18 13:23
671 查看
在HTML的元素中,有一个比较特殊的元素form。我们用它来收集表单数据并提交给服务器,并且理论上说来它是没有任何的UI被呈现的。当然如果我们在body元素后紧跟一个form,这样一来似乎看不出来有什么UI呈现的问题,可是当form存在于别的元素之中时,就有问题了。
什么问题呢?看下面的示例,由于页面布局的需要,我需要控制页面的滚动条。我把body的滚动条隐藏掉,然后使用一个div元素来"自制"一个滚动条,html代码如下:
<html>
<head>
<title>Layout Demo</title>
<meta name="author" content="birdshome@cnblogs.com">
</head>
<body style="border: 2px solid red; overflow: hidden; margin:0">
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<form>
<div style="width:800; height:800; border: 2px solid blue"></div>
</form>
</div>
</body>
</html>
挺好的一个自制的滚动条就出来了,可是如果这时把垂直滚动条拉到底,会发现一个页面布局缺陷,原来在form后IE会默认的加上一个<br>效果显示,如下图:
<form>
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<div style="width:800; height:800; border: 2px solid blue"></div>
</div>
</form>
这下显示完全乱套了,见下图:
<html>
<head>
<title>Layout Demo</title>
<meta name="author" content="birdshome@cnblogs.com">
</head>
<body style="border: 2px solid red; overflow: hidden; margin:0">
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<form>
<div style="width:800; height:800; border: 2px solid blue"></div>
</div>
</form>
</body>
</html>
注意div和form是相互嵌套的,这样的html就能得到我们说期望的UI了,如下图:
关于为什么要把body的滚动条hidden掉,然后自己用div来模拟?有空再来说了。
什么问题呢?看下面的示例,由于页面布局的需要,我需要控制页面的滚动条。我把body的滚动条隐藏掉,然后使用一个div元素来"自制"一个滚动条,html代码如下:
<html>
<head>
<title>Layout Demo</title>
<meta name="author" content="birdshome@cnblogs.com">
</head>
<body style="border: 2px solid red; overflow: hidden; margin:0">
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<form>
<div style="width:800; height:800; border: 2px solid blue"></div>
</form>
</div>
</body>
</html>
挺好的一个自制的滚动条就出来了,可是如果这时把垂直滚动条拉到底,会发现一个页面布局缺陷,原来在form后IE会默认的加上一个<br>效果显示,如下图:
<form>
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<div style="width:800; height:800; border: 2px solid blue"></div>
</div>
</form>
这下显示完全乱套了,见下图:
<html>
<head>
<title>Layout Demo</title>
<meta name="author" content="birdshome@cnblogs.com">
</head>
<body style="border: 2px solid red; overflow: hidden; margin:0">
<div style="border: 2px solid yellow; width:100%; height: 100%; overflow: auto;">
<form>
<div style="width:800; height:800; border: 2px solid blue"></div>
</div>
</form>
</body>
</html>
注意div和form是相互嵌套的,这样的html就能得到我们说期望的UI了,如下图:
关于为什么要把body的滚动条hidden掉,然后自己用div来模拟?有空再来说了。
相关文章推荐
- Extjs 利用panel html属性加入DIV实现如TextArea的效果,并且能正确使用html标签,实现如向textarea文本域嵌入按钮button或其他控件,,而且兼容firefox
- 如何使用h:outputText输出HTML标签
- asp.net控件开发技巧(1)使用HtmlTextWriter类规范输出标签
- (待测试) html 页面跳转效果(http-equiv 标签使用)
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- 使用bean:write时输出的结果是HTML源代码而不是HTML效果
- asp.net控件开发技巧(1)使用HtmlTextWriter类规范输出标签
- 使用JS生成HTML标签,以达到母板页的效果
- html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示
- html模板实现银幕滚动效果<marquee>标签使用
- php echo输出html标签时但引号双引号交替使用技巧
- html转pdf-使用html标签控制分页
- 使用struts2标签输出带html标签的文本内容
- ⚔疯狂输出⚔ HTML中常用标签的效果
- 使用HTML标签的属性对图片进行旋转效果
- 使用Struts2标签输出带HTML标签的文本内容
- js中join函数的使用方法(js输出html标签)
- bean:write输出HTML效果的问题以及struts其他标签的问题
- 简单标签的使用自定义标签控制页面内容(标签体)是否输出、
- jquery的html()方法,不是输出所有的html标签,比如div标签,明明有,使用html()方法中得到的html代码中,就是没有