CSS+Div实现窗口自适应布局技巧

5星 · 超过95%的资源需积分: 50 192 浏览量更新于2023-03-16 收藏 97KB DOC 举报

"css+div自适应窗口宽度" 在网页设计中，CSS（层叠样式表）和div元素的结合使用是构建布局的关键技术之一。"css+div自适应窗口宽度"指的是通过CSS来实现网页内容随浏览器窗口大小改变而自动调整布局的方法。这通常涉及到响应式设计，使得网页在不同设备和屏幕尺寸上都能呈现出良好的视觉效果。在提供的代码片段中，可以看到一些关键的CSS和JavaScript代码用于实现自适应窗口宽度的效果。首先，`.divGlobal`, `.DivTop`, `.DivBottom` 这些类设置了最小宽度（min-width）为760像素，并且当浏览器窗口宽度小于760像素时，通过JavaScript的`expression`属性来设定宽度为100%，以确保内容始终充满整个视口。这种技术在旧版IE浏览器中比较常见，但在现代浏览器中已经不再使用，因为它可能导致性能问题。接着，`<!DOCTYPE html>`声明了文档类型为HTML5，这很重要，因为它影响浏览器如何解析和渲染页面。HTML结构中包含了两个浮动的div元素：`.mleft`和`.mright`。`.mleft`设置为固定宽度100像素并靠左浮动，背景色为橙色；`.mright`设置为固定宽度200像素，靠右浮动，背景色为紫色。页面中的JavaScript函数`turnwidth()`用于在窗口大小改变时调整`.mleft`的宽度。它获取当前窗口的滚动宽度（scrollWidth），然后减去右侧`.mright`的offsetWidth，得到剩余空间，将其设为`.mleft`的宽度。这种方法可以确保两个浮动元素在窗口宽度变化时仍然能保持在一行内。此外，还有一个未闭合的`.R`类的CSS规则，它设置了宽度为100像素，背景颜色为蓝色，且浮动方向为右。这可能是另一个浮动元素的定义，但在这个例子中没有被实际使用。这个示例展示了如何通过CSS和JavaScript来实现一个简单的响应式布局，其中左侧内容宽度自适应，右侧内容固定宽度。然而，现在更推荐使用媒体查询（media queries）和Flexbox或Grid布局来实现更现代、更灵活的响应式设计，这些方法在兼容性和可维护性方面更胜一筹。例如，你可以用媒体查询定义在不同窗口宽度下的样式，而Flexbox和Grid则能更方便地处理容器内的元素排列和自适应尺寸。

.divGlobal,.DivTop,.DivBottom{

min-width:760px;

width:expression(document.body.clientWidth<760?"760px":"100%")/*最小宽度设置*/

width:100%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

.mleft{

float:left;

width:100px;

background:#FF6633;

}

.mright{

float:right;

width:200px;

background:#FF3399;

}

</style>

</head>

<div class="mright" id="DRight">right</div>

function turnwidth(){

var w1=document.body.scrollWidth

var left=document.getElementById("DLeft");

var wright=document.getElementById("DRight").offsetWidth;

var p=w1-wright;

left.style.width=p;

}

</script>

</body>

</html>

下载后可阅读完整内容，剩余4页未读，立即下载

chjw8221

粉丝: 3
资源: 31

CSS+Div实现窗口自适应布局技巧

里面的div怎么撑开外面的div让高度自适应

DIV自动适应高度

CSS 实现div宽度根据内容自适应

使用JS+CSS实现DIV层自适应高度和宽度

div+css菜单导航布局自适应宽度

理解Div+CSS布局：自适应宽度与核心概念解析

完全纯css实现div自适应居中兼容IE7 Chrome FireFox

CSS+DIV 菜单控制

css+div培训资料

css+div布局经典案例

最新资源