-
自适应屏幕分辩率的DIV+CSS布局5
如题,求解<div id="wrap"> <div id="header"></div> <div id="left"> <div id="menuBar"><!--这里是菜单栏--></div> </div> <div id="toggleBar"><!--这个是隐藏左边栏的开关--></div> <div id="right"> <iframe><!--这里是菜单对应的页面--></ifrmae> </div> <div id="footer"></div> </div>
基本格局如上,固定分辩率是没有问题的,关键是适应不同的分辩率。望牛人不吝赐教
2009年8月18日 16:45
添加评论
关注(0)2个答案 按时间排序 按投票排序
-
你把你现在的CSS贴上来看看。
一般的CSS流体布局都可以解决这个问题。
从你的HTML来看，左边大小应该是固定的，这种情况下你可以用：
1) 绝对定位
#left {
position : absolute;
left : 0;
right : 200px;
top : 0;
bottom : 0;
}
#right {
position : absolute;
left : 210px;
right : 0;
top : 0;
bottom : 0;
}
2) 100%宽度加上负margin
基本的思路是#left向左浮动， 固定宽度；#right宽度100%，但是margin是负值，值为#left的宽度。2009年8月19日 17:49
相关推荐
本教程通过深入浅出的方式，详细讲解了DIV+CSS布局的核心概念和技术。 一、HTML与CSS基础 1. HTML（HyperText Markup Language）是网页的基础，用于创建和组织网页内容。DIV元素是HTML中一个非常重要的结构元素，...
3. 流动布局（Fluid Layout）：在Div+CSS中，我们通常会利用百分比单位来实现响应式布局，使得网页在不同屏幕尺寸下都能自适应显示。这在移动设备普及的今天尤其重要。 4. 响应式设计（Responsive Design）：通过...
在“50例DIV+CSS模板”中，我们能看到多种不同类型的网页布局解决方案，涵盖了从固定宽度到自适应宽度的各种需求。 首先，固定宽度CSS版式布局是传统的网页设计方法，它设定了一个固定的页面宽度，如960像素或1200...
3. **响应式设计**：利用媒体查询（Media Queries），`CSS`可以根据设备特性（如屏幕宽度、分辨率等）应用不同的样式，使网页能够在手机、平板、桌面等多种设备上自适应展示。 4. **增强可访问性**：遵循`WCAG`...
在CSS+DIV布局中，基本布局的种类主要包括固定宽度布局和宽度自适应布局这两种主要方式。 固定宽度布局，顾名思义，指的是布局宽度固定不变，不随浏览器窗口大小变化而自动调整。这种布局通常用于需要精确控制页面...
**正文** ...在压缩包中的“DIV+CSS布局”文件中，很可能会包含这些布局模式的示例代码，供学习者参考和练习。通过深入研究这些实例，你可以深化对`DIV+CSS`布局的理解，并提升自己的网页设计技能。
Div+CSS配合媒体查询（Media Queries）可以实现响应式设计，让网站在不同分辨率和设备（如手机、平板、电脑）上都能自适应显示，提供良好的用户体验。 第六，**更好的控制和灵活性**。CSS提供了丰富的选择器和属性...
7. **布局策略**: 使用CSS的布局技术，如Flexbox或Grid，可以创建灵活的网格系统，适应多列布局或者自适应屏幕尺寸的需要，这对于管理平台的多模块展示至关重要。 8. **颜色和图标**: 管理平台模板中的颜色和图标...
在网页设计领域，DIV+CSS是一种常见的网页布局技术，它以HTML的<div>标签作为容器，结合CSS（层叠样式表）进行样式...总的来说，熟练掌握DIV+CSS布局是每个前端开发者必备的技能，而这些模版则是实践和学习的好材料。
本资源"div+css网页标准版式布局整理自www.aa25.cn"提供了40个不同的布局示例，包括20个绝对布局和20个自适应布局，是初学者学习网页布局的理想资料。 1. `div`元素：`<div>`是HTML中的一个块级元素，代表一个分区...
在网页设计领域，`div` 和 `css` 是构建网页布局的基础元素，尤其在创建电子图书网站模板时，它们的重要性更为凸显。本电子图书网站模板采用`div+css`技术，实现了清晰、美观且响应式的页面设计，旨在为用户提供一流...
在“div+css”中，我们将重点讨论如何通过这两种技术实现一列布局的不同效果，包括固定宽度、居中对齐以及自适应宽度。 首先，让我们来看看一列固定宽度的布局。在示例代码中，我们创建了一个 `div` 元素，并为其...
"左右固定宽，中间自由伸展的三栏式版面.html"和"自由伸展的三栏式版面.html"是网页设计中的经典布局，它们可能介绍如何创建固定侧边栏和自适应内容区的布局，以适应不同分辨率的设备。 8. **CSS代码格式化和加密...
5. **媒体查询**：CSS5的媒体查询允许我们根据设备的物理特性（如屏幕尺寸、分辨率等）来应用不同的样式，是实现响应式设计的关键。 6. **CSS动画**：CSS5提供了`@keyframes`规则，可以创建平滑的过渡和动画效果，...
1. **CSS布局**：模板采用流式布局或响应式布局，以适应不同屏幕尺寸的设备，如桌面、平板和手机。黑色调通常给予用户专业和高端的感觉，而经典设计则意味着简洁而不失优雅。 2. **响应式设计**：由于没有具体提及...
标题中的“一套同时支持手机、平板、PC各种分辨率的网站后台应用界面html+div+css模版源码下载”表明这是一个适用于多设备的网站后台模板，它基于HTML、CSS技术，能够自适应不同屏幕分辨率，确保在手机、平板以及...
在网页设计领域，Div+CSS是一种常见的布局技术，它通过HTML的Div元素配合CSS（Cascading Style Sheets）样式表来实现页面的结构与样式分离。这种技术的优点在于提高了页面的可维护性和可访问性，同时也更利于搜索...
2. **CSS布局**: CSS是控制网页外观和布局的重要工具。在窄屏单页模板中，CSS用于定义每个div元素的样式，包括颜色、字体、边距、填充、定位等。例如，可以使用媒体查询（@media rule）来实现响应式设计，使得页面在...
总结起来，"div宽度自适应布局(左边自适应)"是一种结合了`div`元素、CSS样式以及响应式设计技术的布局方法，它确保了网页在不同屏幕尺寸下的可用性和可读性。通过理解并熟练运用这些技术，开发者可以构建出适应性强...