Dreamweaver CS6使用Div+CSS布局设计
本文来自 九州书源 《Dreamweaver CS6网页制作》 清华大学出版社 2015年
摘 要:本文档主要介绍Dreamweaver CS6中使用Div+CSS布局设计网页的基本方法。
关键词: Dreamweaver CS6;Div+CSS;布局设计
使用Div+CSS布局设计
在 CSS 中,盒模型和浮动、定位是 CSS 的 3 个最重要的概念,这 3 个概念能控制页面上各种元素
的显示方式,构成 CSS 最基本的布局样式,下面将分别介绍居中布局和浮动布局两种方式。
1、居中布局
在网页中居中布局是设计者使用较为广泛的一种布局方式,因此在学习 Div+CSS 布局方式时,居
中布局也成为了学习的重点,使用 Div+CSS 进行居中布局有两种方法,一种是自动空白边让 Div 容器
进行居中显示;另一种是使用定位和负值空白边让 Div 容器进行居中显示。下面将分别进行介绍。
(1)使用自动空白边让 Div 容器居中显示
使用自动空白边让 Div 容器居中即是在浏览器中进行浏览时,布局上的所有内容都会居中显示 (即让
整个网页的布局在浏览器中进行居中显示 ) , 即 在 bod>bod> 中定义一个 Div 容器div
class=''main>div>,然后使用 CSS 规则定义 Div 容器的宽度,然后将水平空白边设置为 auto
(如左图)。
图 1 使用自动空白边让 Div 容器居中显示
(2)使用定位和负值空白边让 Div 容器居中显示
使用该方法在浏览器中使用整个网页布局居中显示,首先也要定义 Div 容器的宽度,然后将容器的
Position 属性的值设置为“relative 相对定位)”,再使用 left 属性,将其属性值设置为 “50%”,
即可将容器的左边缘定位在整个网页的中间。
图 2 使用定位和负值空白边让 Div 容器居中显示
如果用户是想要整个网页呈居中显示,而不是将网页中最大容器的左边缘进行居中,则需要对容器
的左边应用一个负值的空白边,宽度等于容器宽度的一半,这样即可将整个网页在浏览器中进行居中显
示。
1 / 2
Dreamweaver CS6 使用 Div+CSS 布局设计