`

CSS+DIV 区块居中布局

阅读更多

div和span区别:

  div将页面分成若干个区块

  span将一行内分划成几个区域

<html>
	<head>
			<style type="text/css">
				#main{
					width:460px;
					margin-top:0px;
					margin-right:auto;
					margin-bottom:0px;
					margin-left:auto;
				}
				#left{
					background:#CCCCCC;
					float:left;
					height:304px;
					width:220px;
					border:9px soild#930304;
				}
				#right{
					background:#CCCCCC;
					float:left;
					height:304px;
					width:220px;
					border:9px soild#930304;
				}
		  </style>
	</head>
  <body>
		<div id="main">
			<div id="left">左侧</div>
			<div id="right">右侧</div>
		</div>
  </body>
</html>

 

分享到:
评论

相关推荐

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`&lt;div&gt;`...

    CSS+DIV布局教程

    &lt;div&gt;是一个无意义的区块元素,但通过CSS,我们可以将其塑造成各种布局组件。在本例中,我们规划了以下的&lt;div&gt;结构: 1. `body`:HTML文档的主体部分。 2. `#Container`:页面层容器,包裹整个页面内容。 3. `#...

    CSS+DIV初级教程.doc

    在网页设计领域,CSS (Cascading Style Sheets) 和 DIV 是构建网页布局的核心技术。这篇初级教程将引导初学者了解如何利用它们进行网页布局规划和设计。 首先,了解基本术语是必要的。HTML (HyperText Markup ...

    十步学会用css+div建站ppt

    CSS(层叠样式表)与 Div 结合是现代网页设计中的常见技术,用于实现网页的布局和样式控制。Div 是 HTML 中的一个区块标签,通过 CSS 可以对其进行定位、大小调整、颜色设定等样式控制,从而构建出复杂的网页结构。...

    步一步使用DIV+CSS进行网页布局设计

    ### 步一步使用DIV+CSS进行网页布局设计 在网页设计与开发领域,DIV+CSS是一种常见的技术组合,被广泛应用于构建网站布局。本篇内容将深入解析如何使用DIV+CSS进行网页布局设计,帮助读者更好地理解并掌握这一技能...

    Div+CSS布局入门教程

    【Div+CSS布局】是网页设计中的核心技术,用于实现页面元素的精确控制和美化。本教程将引导初学者一步步掌握Div+CSS布局的基础知识。 首先,Div(Division)是HTML中的一个区块元素,用于将页面划分为多个独立的...

    div+css网页标准布局企业项目实例

    - **容器元素**:为了简化布局操作,所有区块嵌套在一个父元素`&lt;div id="container"&gt;...&lt;/div&gt;`中,统一控制宽度和居中显示。 #### 四、CSS样式设计 - **全局样式**:定义字体大小、行间距等基本样式,并重置某些...

    Div+CSS布局入门教程.pdf

    在网页制作中,Div(Division)是HTML中的一个区块定义元素,而CSS(Cascading Style Sheets)则是用于控制网页样式和布局的语言。两者结合可以实现更为灵活和精确的页面布局。 在开始学习Div+CSS布局前,读者需要...

    div+CSS 网页布局教程.网站开发,网页制作

    《div+CSS网页布局教程——网站开发与网页制作的核心技术》 在网页设计与开发领域,div+CSS布局是不可或缺的基础技术。它以其灵活性、可维护性和高效的网页表现力,成为了现代网页设计的标准。本教程将围绕这个主题...

    HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码

    ### 知识点二:DIV+CSS布局 #### 1. DIV元素 - **作用**: 在HTML文档中用于逻辑地分隔页面的某部分或某些部分。 - **特点**: 可以通过CSS来控制其样式和位置,非常灵活。 - **使用场景**: 本项目中,DIV被用来组织...

    div+css全套框架

    2. 居中布局(Center Alignment):通过设置margin属性为auto,可以使Div水平居中。 3. 定位布局(Positioning):利用position属性(static、relative、absolute、fixed),可以精确控制元素的位置,实现复杂布局...

    网页设计基础Div+CSS布局入门教程.pdf

    Div元素是HTML中的一种容器,用于在网页上创建区块(division),通过CSS可以对这些区块进行样式和布局的设计。Div标签是HTML5中语义化标签的一种,它本身没有特定含义,但能够通过class或id属性赋予其意义。Div元素...

    用DIVCSS技术的WEB页面布局实践.doc

    【网页布局实践与DIV+CSS技术】 网页布局是构建网页设计的基础,而使用DIV+CSS技术进行布局则是现代网页设计的主流方法。本实践报告主要围绕如何运用DIV+CSS技术来实现网页的高效布局,旨在让学生掌握网页设计的...

    DIV+CSS布局网站主页及DIV命名-领创教育.pdf

    【DIV+CSS布局网站主页及DIV命名】 在网站设计中,`DIV+CSS`布局是一种常见的技术,它将网页的结构(HTML中的`DIV`元素)与表现(CSS样式)分离,提高了网页的可维护性和易用性。下面将详细讨论这种布局方式以及...

    divcss详解实例

    `div`标签主要负责定义网页上的区块,而CSS则用来控制这些区块的样式和布局。这一组合为网页设计提供了更高的灵活性和可维护性,相比传统的表格布局,它更加简洁且易于调整。 1. **什么是“Div+CSS”** “Div+CSS...

    DIVCSS网页标准化布局PPT学习教案.pptx

    ### DIVCSS网页标准化布局知识点详解 #### 一、概述 DIV+CSS网页标准化布局是一种现代网页设计的标准做法,它遵循W3C规范,利用`&lt;div&gt;`元素配合CSS(层叠样式表)来构建网页布局。相较于传统的HTML表格布局方法,...

    div+css分页条

    通过设置`div`的类名或ID,我们可以用CSS来控制区块的样式、位置和布局。在分页条的设计中,`div`通常被用来创建每个分页按钮或整体分页容器。 2. **CSS基础**: - **选择器**:CSS选择器用于选取我们想要应用样式...

    十天学会div+css开发

    为了实现页面的居中效果,通常会在所有这些区块外层再包裹一层带有特定样式的div标签,如`&lt;div id="container"&gt;`。通过设置`container`的宽度和margin属性,可以轻松实现页面的水平居中。 #### 四、切割效果图:从...

Global site tag (gtag.js) - Google Analytics