在ie6里，带默认下滑条，用div布局效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sdf</title>
</head>
<script>
function $(uid){return document.getElementById(uid);}
function lod(){
var b_w=document.documentElement.clientWidth;
$('left').style.width=parseInt(b_w/2)+'px'
$('right').style.width=parseInt(b_w/2)+'px'
}
</script>
<body onload="lod();">
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
#left{float:left; background-color:#FF0000;}
#right{float:left; background-color:#0000FF;}
</style>
<div id="left"></div>
<div id="right"></div>
<p>在ie6里 带默认下滑条 用div布局效果</p>
</body>
</html>
去掉下滑条的情况下，使两列各占50%。缺点是，内容不能超长，适合软件布局使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;}
</style>
</head>
<body scroll="no">
<div class="left"></div>
<div class="right"></div>
</body>
</html>
在ie6中有下滑条的情况下布局，毛病在于左右两列的宽度不是绝对相等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
div{height:300px;}
.left{width:50%; float:left; background-color:#FF0000;}
.right{width:50%; float:left; background-color:#0000FF;margin-right:-20px;}
</style>
</head>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
分享到：
相关推荐
【标题】: "div+css网页布局入门" 【描述】: "div+css网页布局入门，让你快速掌握网页设计中的便捷" 在网页设计中，Div+CSS布局是一种常用且强大的方法，它将网页内容的结构（HTML）与样式（CSS）分离，提高了网页...
固定宽度布局的优点在于设计时可以精确控制元素的位置和大小，但缺点是对不同分辨率和设备的适应性较差，可能在小屏幕设备上显示不理想。 另一方面，自适应（弹性）宽度CSS版式布局，也称为响应式设计，是现代网页...
6. **固定宽度与百分比混合布局**：部分元素使用固定宽度，如logo或导航，其他部分使用百分比宽度，以适应不同分辨率。 7. **自适应布局**：利用媒体查询（media queries）根据屏幕尺寸改变布局结构。 8. **瀑布流...
《装修公司的div+css静态网页模板解析》 在网页设计领域，HTML和CSS是构建网站的基础，而div+css布局模式则...通过深入理解和运用其中的div+css布局技巧和CSS3特性，我们可以创建出符合现代网页设计标准的高质量网站。
在网页设计领域，Div+CSS是一种布局技术，用于构建网页结构和样式，是现代网页开发不可或缺的基础知识。Div（Division）是HTML中的一个容器元素，常用来组织页面内容，而CSS（Cascading Style Sheets）则负责定义...
在IT行业中，网页设计是至关重要的一个领域，而Div+CSS是构建网页布局的主要技术之一。"164个div+css精美网页模板31-40" 是一个集合，包含了一系列基于Div和CSS编写的高质量网页设计模板，用于帮助设计师和开发者...
网页适应不同分辨率技巧是网页设计中的重要一环，尤其是在跨平台和多设备浏览的时代。本文主要探讨了如何利用`div`和`CSS`在IE6浏览器中实现网页布局的适应性，尤其是考虑到浏览器的默认滚动条对布局的影响。 首先...
"左右固定宽，中间自由伸展的三栏式版面.html"和"自由伸展的三栏式版面.html"是网页设计中的经典布局，它们可能介绍如何创建固定侧边栏和自适应内容区的布局，以适应不同分辨率的设备。 8. **CSS代码格式化和加密...
《DIV+CSS布局大全》是IT领域中关于网页前端开发的重要教材，主要涵盖了使用HTML的DIV...通过学习《DIV+CSS布局大全》，开发者可以掌握构建高效、美观且适应性强的网页布局的关键技能，从而在网页设计领域更上一层楼。
通过调整 `div` 的尺寸、位置、内边距、外边距以及其他 CSS 属性，我们可以创造出各种各样的布局模式，满足不同网页设计的需求。同时，CSS 还支持盒模型、浮动、定位、弹性盒子和网格布局等多种布局技术，进一步增强...
3. **响应式设计**：虽然CSS2.0不包含完整的响应式设计支持，但会介绍一些基本的适应性布局技巧，以应对不同分辨率和设备的显示需求。 4. **浮动与清除**：探讨了浮动元素的布局效果，以及如何使用`clear`属性来...
在网页设计领域，Div+CSS是一种常见的布局技术，它通过HTML的Div元素配合CSS（Cascading Style Sheets）样式表来实现页面的结构与样式分离。这种技术的优点在于提高了页面的可维护性和可访问性，同时也更利于搜索...
- **流体布局**：利用百分比单位进行宽度设置，使网页能够适应不同分辨率的设备。 - **响应式设计**：根据用户的行为和设备环境（系统平台、屏幕尺寸、屏幕方向等）自动调整布局、图片和脚本功能。 - **网格系统*...
通过使用媒体查询（Media Queries）和其他响应式布局技巧，可以确保网页在不同分辨率和屏幕尺寸下自动调整布局。 3. **JavaScript基础应用**： - JavaScript是一种客户端脚本语言，用于增加网页的交互性。在本项目...
在这个"160个div+css3"的学习资源中，你将会发现各种使用Div和CSS3实现的示例，涵盖了上述提到的各种布局和样式技巧，对于提升网页设计技能大有裨益。通过实践和研究这些实例，你可以逐步掌握并运用到自己的项目中，...
8. **图片处理**：对于"tupian"（图片）文件，可能涉及到CSS背景图片、响应式图片或SVG图标等技术，以适应不同设备和分辨率。 9. **Flash处理**："flash"文件可能是指旧的Flash动画，现在通常被HTML5的动画和视频...
【DIV+CSS布局网站主页及DIV命名】 在网站设计中，`DIV+CSS`布局是一种常见的技术，它将网页的结构（HTML中的`DIV`元素）与表现（CSS样式）分离，提高了网页的可维护性和易用性。下面将详细讨论这种布局方式以及...
总结，本教程不仅涵盖了CSS和DIV的基本概念，还深入到网页布局的高级技巧，结合实例，让读者能够熟练掌握网页设计的核心技能。无论你是新手还是有一定基础的学习者，这份教程都将是你提升CSS+DIV技能的宝贵资料。
8. **网页布局技术**: 包括但不限于Flexbox、Grid布局等，这些布局方式可以更好地适应各种屏幕尺寸和分辨率。 ### 二、详细解析关键技术知识点 #### 1. HTML5标签的应用 - **语义化标签**: - `<header>`: 用于...