`

css+div页面布局之1 -- 自适应

    博客分类:
  • css
阅读更多

 

浮动 float 属性:定义元素在哪个方向浮动。float:left  | right |  none

                       浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

外边距 margin属性:百分数是相对于父元素的 width 计算的。

 

页面div:

 

 <div id="container">
	 <div id="wrapper"><!-- 主体文字 -->
		<div id="content"><p><strong>1) Content here.</strong></p></div>
	 </div>
	 <div id="navigation"><p><strong>2) right part here.</strong></p></div>
	 <div id="extra"><p><strong>3) left part here.</strong></p></div>	 
 </div>

 

 

1:2:1自适应布局:

 

 

<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin: 0 25%;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-25%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-100%;background:#FF8539}
</style>

 

 

 2:1:1自适应布局:

 

 

 

  
<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin-left:0;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-50%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-25%;background:#FF8539}
  </style>

 

 

1:1:2自适应布局:

 

 

<style type = "text/css">
	div#wrapper{float:left;width:100%}
	div#content{margin-left: 50%;width:100%;}
	div#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF}
	div#extra{float:left;width:25%;margin-left:-75%;background:#FF8539}
 </style>
  • 大小: 7.1 KB
  • 大小: 6.4 KB
  • 大小: 13 KB
  • 大小: 8.2 KB
分享到:
评论

相关推荐

    CSS+DIV网页布局实例40例.rar

    1. **灵活性**:CSS+DIV布局能实现各种复杂的网页结构,如两列、三列甚至多列布局,以及自适应屏幕尺寸的设计。 2. **可维护性**:将样式与内容分离,便于后期修改和优化,降低维护成本。 3. **易扩展性**:使用CSS+...

    css+div自适应窗口宽度

    本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度,确保无论用户浏览器窗口大小如何,页面都能保持良好的显示效果。 首先,我们要理解`min-width`属性。在示例代码中,`.divGlobal`, `.DivTop`, `....

    精美css+div网站实例源码

    1. **CSS布局**: 这些源码实例展示了如何利用CSS来实现响应式设计,使网页在不同设备上都有良好的显示效果。CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维...

    css+div网站实例源码

    **CSS+Div网页布局技术详解** 在Web开发领域,CSS(Cascading Style Sheets)与Div元素的结合使用已经成为构建现代网页布局的标准方法。"css+div网站实例源码"提供了一个优秀的学习资源,让我们深入探讨这个主题。 ...

    CSS+DIV实例

    三、CSS+DIV布局基础 1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响...

    用CSS+DIV做的网上书店模板

    【CSS+DIV布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它通过控制元素的样式,如字体、颜色、大小、位置等,来实现网页的布局和...

    CSS+div网站模板

    3. **CSS+div布局**:CSS+div布局方式摒弃了传统的表格布局,采用更灵活的流式布局,使得网页可以适应不同屏幕尺寸和设备,增强了响应式设计的能力。这种布局方式可以实现像素级精确控制,同时提高了页面加载速度和...

    jsp css+div 后台框架

    这种框架结合了JavaServer Pages(JSP)、Cascading Style Sheets (CSS) 和 Div布局,以实现动态网页设计和管理。下面我们将详细探讨这三个主要组成部分及其在构建后台框架中的作用。 1. JavaServer Pages (JSP): ...

    css+div 页面简单布局(一)

    本文将深入探讨“CSS+div 页面简单布局(一)”这一主题,旨在帮助初学者理解如何通过CSS和div实现基本的网页布局。 首先,我们需要了解什么是div。Div是HTML中的一个块级元素,全称为division,它主要用于组织和...

    css+div源代码

    1. **流式布局**:使用百分比宽度和浮动(`float`)实现响应式设计,使得网页在不同屏幕尺寸下都能自适应显示。 2. **网格布局**:利用CSS Grid布局,将网页划分为多个单元格,灵活地排列内容。CSS Grid提供了一套...

    CSS+DIV网页样式与布局 从入门到精通作者是喻浩 --源代码和示例

    1. 流式布局:利用百分比宽度实现自适应,适合不同屏幕尺寸的设备。 2. 网格布局:通过定义行和列创建可重复的单元格,适用于复杂多列布局。 3. 定位布局:利用`position`属性(如`relative`、`absolute`、`fixed`)...

    DIVCSS布局大全---12天学会DIV+CSS教程

    12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 ...

    CSS+DIV常用方法说明

    #### CSS+DIV布局基础 1. **盒模型**:CSS的盒模型定义了元素的大小、填充、边框和边界。`&lt;div&gt;`作为块级元素,默认占据整行空间,通过调整`margin`、`padding`、`border`和`width`等属性,可以精细控制其布局。 2...

    CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)

    CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~

    CSS+div 布局

    下面我们将深入探讨CSS+div布局的相关知识点。 一、CSS简介 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、XHTML等)文档的呈现。它允许开发者将样式与结构分离,使得网页设计更加灵活和易于维护。CSS规则由...

    css+div布局教育网源码分享

    【CSS+Div布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。Div元素是HTML中的一个块级元素,通常用于创建网页布局。CSS+Div布局是...

    css+div布局练习

    下面将详细介绍CSS+div布局的重要概念、技巧以及实践应用。 一、CSS简介 CSS是一种样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许我们将样式(颜色、字体、间距、布局等)与...

    css+div布局经典案例

    本资源“css+div布局经典案例”提供了丰富的示例,帮助开发者深入理解和掌握这一技术。下面将详细阐述CSS+div布局的核心概念、常见模式以及案例中的应用。 首先,CSS是用于描述HTML或XML(包括SVG、MathML等各种XML...

Global site tag (gtag.js) - Google Analytics