1. css百分比浮动法
<style type="text/css">
body{
text-align: center;
}
#head,#container,#content,#side,#foot{
margin:20px auto 20px auto;
padding:20px 0px 20px 0px;
border: 1px solid red;
}
#head,#container,#foot{
width: 80%;
}
#container{
border:0px;
}
#content{
float:left;
width: 63%;
height: 200px;
}
#side{
float:right;
width: 180px;
margin-left: 10px;
height: 100px;
}
#foot{
clear: both;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
分享到：
相关推荐
利用css做了一个浮动框架，这个框架是百分比做的，可以根据浏览器窗口的大小而成比例的伸缩。缺点图像还是不可以的，除了你用一个图像hack
标题中的“纯css立体空间浮动网页特效”是一个关于利用CSS技术实现三维立体效果，并且元素在页面上动态浮动的网页设计主题。这个特效通常涉及到CSS3的最新特性，包括3D转换、动画以及布局方法。 在描述中，“.rar”...
在“Firefox 与 IE 对CSS的兼容性探讨.doc”中，很可能深入讨论了这两个浏览器在解析盒模型、浮动、定位、渐变、阴影等CSS属性时的不一致之处。此外，“div+css中常见的浏览器兼容性处理.doc”和“再谈浏览器的兼容...
在版面布局方面，CSS2.0引入了长度单位，如像素（px）、百分比（%）、em和ex等，以及对页面边距、填充和边框的控制。表格样式也得到了增强，可以独立控制各部分的边框和间距。 CSS2.0还包含了媒体查询（media ...
CSS 2.0 提供了多种长度单位，如像素（px）、百分比（%）、em、rem等。相对单位允许元素尺寸随其父元素或字体大小变化，而绝对单位则固定在特定的物理尺寸。 ### 6. 浮动与清除 - **浮动**: `float` 属性允许元素...
浮动（`float`）是CSS2中的一个关键特性，常用于创建多列布局。元素浮动后，可以使其脱离正常流并移动到其容器的左或右侧。而清除（`clear`）属性则用来处理因浮动引起的布局问题，如使用`clear:both`阻止元素跟随...
2. 弹性图片与字体：使用百分比单位、vw/vh单位或者max-width属性可以使图片和文本适应不同尺寸的屏幕。 3. 布局模式切换：响应式设计需要根据屏幕尺寸调整布局，如在小屏幕上使用单列布局，在大屏幕上使用多列布局...
这可能涉及到CSS选择器、颜色代码、尺寸单位（如像素、百分比）以及边距和填充等概念。 5. **响应式设计**：考虑到用户体验，浮动客服通常需要具备响应式设计，以适应不同设备的屏幕尺寸。这可能涉及到媒体查询...
2. **流体布局**：使用百分比单位配合CSS的`max-width`和`min-width`属性，可以使布局随浏览器窗口大小变化而自适应。 3. **Flexbox布局**：CSS3的弹性盒模型（Flexbox）提供了一种新的布局方式，可以轻松实现主轴...
4. **布局技术**：涵盖流体布局、网格布局、定位和浮动，以及Flexbox和Grid布局，这些都是现代CSS布局的主要方法。 5. **响应式设计**：讲解如何利用媒体查询实现响应式网页设计，使网站能够在不同设备和屏幕尺寸上...
5. **相对单位与绝对单位**：CSS提供了像素（px）、百分比（%）、视口单位（vw/vh）等多种单位，根据需求选择合适的单位可以使布局更具响应性。 6. **媒体查询**：利用`@media`规则，我们可以实现响应式设计，使...
2. **属性与值**：详述了各种CSS属性，如颜色、字体、边距、边框、背景等，以及它们的取值方式和单位，如颜色代码、百分比、长度单位等。 3. **盒模型**：解释了CSS2.0中的盒模型概念，包括内容区域、内边距、边框...
2. **属性和值**：学习常见的CSS属性，如`color`、`font-size`、`background-color`、`width`和`height`，以及对应的值类型，如颜色名称、像素值、百分比等。 3. **浮动**：核心知识点，`float`属性允许元素在容器...
通过设置CSS样式，Div可以实现各种复杂的布局效果，如居中对齐、浮动、响应式设计等。 2. **CSS基础**：CSS允许开发者分离内容和表现，使网页设计更加灵活和易于维护。基本概念包括选择器（如类选择器、ID选择器、...
流体布局是一种利用百分比而非固定像素来设定元素宽度的布局方式，使页面能自适应不同屏幕尺寸。例如，`width: 50%;`会让元素占据其父元素宽度的一半。结合媒体查询（media queries），你可以实现响应式设计，让页面...
- **自适应高度**：通过CSS的百分比单位或视口单位（如vh、vw），可以实现元素的高度随窗口大小自动调整，确保布局的响应式和适应性。 - **菜单设计**：利用DIV+CSS，可以创建无需表格的菜单，无论是纵向还是横向，...
4. **浮动与清除**：浮动元素常用于创建多列布局，而清除浮动则解决了因浮动导致的父元素高度塌陷问题。 5. **Flexbox** 和 **Grid** 布局：这两种现代布局模型提供了更为灵活的排版方式，能处理复杂的多列和对齐...
基本的视觉布局、浮动（floating）和定位（positioning）的原理也得到了详细阐述，这些都是构建复杂网页布局的关键技术。此外，还讨论了表格布局（table layout）的处理方法。 第二章则专注于CSS中的值（values）。...
【CSS3云彩漂浮】是一种利用CSS3的动画效果来模拟云朵在网页背景中左右浮动的技术。这种效果能够为网页增添动态感和视觉吸引力，尤其适用于户外、天气相关的网站或者是想要创建梦幻、轻松氛围的设计。实现CSS3云彩...