html如何布局div标签,用Div标签进行网页布局

一、插入Div标签

可以通过手动插入Div标签并对它放们应用CSS定位样式来创建页面布局。要添加Div标签，将插入点放置在要显示Div标签的位置，选择【插入】>【布局对象】>【Div标签】，或在【插入】栏的“布局”选项卡中，单击【插入Div标签】按钮，打开【插入Div标签】对话框，如下图。如需指定类或ID，以便应用对应CSS样式，可以在弹出的【插入Div标签】对话框中指定。

图1

二、编辑Div标签

新建样式.main，设置宽、高均为100像素，如图2所示，然后样式.main应用于如图1所示的新建Div标签，显示效果如图3

图2

图3

三、使用Div标签进行布局

图4

如果需要建立如图4所示的窗口布局，首先根据标签的顺序及相互嵌套关系，插入各个Div标签。参考代码如下：

container

header

nav

left

main

right

footer

然后为各Div标签指定样式，包括宽度、高度、浮动、边框等。参考CSS代码如下：

#container {

width: 780px;margin:0 auto;

}

#header {

height: 70px;width: 780px;

}

#nav {

padding: 10px 0px 10px 0px;

}

#left {

background-color: #bfdaf4;

width: 200px;float:left;

}

#main {

float: left;

width: 380px;

}

#right {

background-color: #BFDAF4;

float: left;

width: 200px;

}

#footer {

clear:left;

height: 80px;

width: 780px;

float: none;

}

四、Div标签浮动效果

如图5所示的CSS布局例中使用了float属性，有于定义Div标签的浮动效果，定义过程如图5

图5

float可以取三个可能的值：left：向左浮动；right：向右浮动；none：消除浮动

图4中id为“left”的Div标签只占据了200px的宽度，把id为“main”和“right”的标签对应的样式中添加float:left效果，使得id为“main”和“right”的标签往左上浮动，并占据id为“left”的Div标签空出的位置。从而生成3个Div标签并列的效果。id为“footer”的Div标签不再需要浮动，因此在对应样式中设置float:none效果。

Div标签浮动的规则如下：

(1)多个浮动元素不会相互覆盖，一个浮动元素的框碰到另一个浮动元素的框后便停止运动。如图6所示

图6

(2)若包含的容器太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动。但如果浮动元素的高度不同，那么当它们向下移动可能会被卡住，如图7所示

图7

html如何布局div标签,用Div标签进行网页布局相关推荐

html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
动画：Flex布局 | 别再用传统方式进行网页布局了（上）
写在前边网页布局,是前端入门的时候必学.必须熟练的一门技术,学到什么程度算是入门了呢?随便给你一个网站,你就可能快速的分析出网页的结构,然后搭建出模型,这是前端网页布局入门的最基本要求. 作为一个前 ...
php动态页面在ie浏览器中css布局板块全缩在中间,CSS网页布局开发时的常见问题及解决方法...
双外边距浮动的问题使用浮动,且有给外边距的div在ie6中会出现外边距加倍的:这是比较简单的解决的bug;只要将元素的display属性设置为inline就行了.所以每当对具有水平外边距的元素进行浮 ...
html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘要信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...
article标签和aside标签是什么？
article 和 aside 是 html5 的新标签. 前段时间我刚学 html5 ,也是看的视频,刚开始不太明白,后来也想通了. html5 是什么呢?是 html 的升级版,在标签和功能上增强 ...
054.CSS网页布局
文章目录一.网页布局方式二.标准流三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...
网页布局响应式页面
十二月二十九 1.网页布局定义网站结构的模式 2.网页布局分为几个部分头部区域菜单导航内容底部 overflow:hidden溢出隐藏 disolay:flex弹性布局 justify-co ...
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
周哥跟你谈谈网页布局容易犯的错误-周知胜-专题视频课程
周哥跟你谈谈网页布局容易犯的错误-2986人已学习课程介绍周哥跟你谈谈网页布局容易犯的错误,适用人群:学生亦或是上班族. 课程收益谈谈网页布局容易犯的错误和问题,以及如何 ...

html如何布局div标签,用Div标签进行网页布局

html如何布局div标签,用Div标签进行网页布局相关推荐

最新文章

热门文章