CSS使用浮动属性和边距设计3行3列定宽的布局实例

CSS使用浮动属性和边距设计3行3列定宽的布局

下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面。

实例

设计步骤如下：

1. 制作3行3列定宽布局的XHTML部分。源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS使用浮动属性和边距设计3行3列定宽的布局实例-www.baike369.com</title>
</head>
<body>
<div id="main"><div id="header">这里是#header</div><div id="menu"><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li></ul></div><div id="content"><p>主要的内容。</p><p>主要的内容。</p><p>主要的内容。</p><p>主要的内容。</p><p>主要的内容。</p><p>主要的内容。</p></div><div id="other"><ul><li>其他内容</li><li>其他内容</li><li>其他内容</li></ul></div><div id="footer">这里是#footer</div>
</div>
</body>
</html>

2. 制作3行3列定宽布局的CSS部分。

由于中间3列的宽度固定，因此可以设定3列左浮动。CSS代码如下：

<style type="text/css">
<!--
*{margin:0;padding:0;
}
body{font:small/1.5 "宋体",serif;background:#FFF;
}
li{list-style:none;padding-left:15px;
}
#main{width:770px;margin:auto;padding:3px;border:2px solid #999;background:#FFC;
}
#header{line-height:50px;background:#c6c;margin-bottom:5px;height:50px;
}
#menu{width:200px;float:left;margin-right:5px;background:#9f9;
}
#content{width:390px;float:left;margin-right:5px;margin-bottom:5px;background:#9cf;
}
#other{width:170px;float:left;background:#fc6;
}
#footer{line-height:50px;background:#c6c;clear:both;height:50px;
}
-->
</style>

不浮动的footer层出现在content层的右边，因此需要对footer层设定clear属性。

设定clear属性后，footer层不仅位于所有浮动层之下，同时，父层main的高度也能包含所有子元素。但是，此时footer层和content层之间没有边距，因此需要为content层添加下边距。

3. 代码运行后，页面的显示效果如下图所示：

提示

本例只是一个理想状态下的基础步骤，在实际应用中，还需要根据具体情况进行调整。

CSS使用浮动属性和边距设计3行3列定宽的布局实例相关推荐

php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
CSS的浮动属性，详细学习指南
前言腾讯的面试凉了,接着开始面试网易网易的面试体验挺不错.它的微信公众号会给你叫号,前台小姐姐也会提醒你,每一面结束后都可以找前台小姐姐查询面试结果.而且食堂超级好吃!还可以边吃饭边吸猫!面试地点 ...
CSS的浮动属性，附架构师必备技术详解
前言本文主要是javascript和css方面的基础面试题,适合面试前以及平时复习食用. 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack.git.node ...
CSS的浮动属性，CSS颜色基本样式
前言校招 -1 年这个阶段还属于成长期,更需要看重的是你的基础和热情.对于 JS 基础,计算机基础,网络通信,算法等部分的要求会相对高一些.毕竟这个阶段比较难考察你的业务项目中的沉淀,所以只能从基 ...
CSS的浮动属性，面试必问
CSS 篇 link 与 @import 的区别 link 是 HTML 方式, @import 是CSS方式 link 最大限度支持并行下载, @import 过多嵌套导致串行下载,出现 FOUC ...
CSS的浮动属性，3面直接拿到offer
02 目录下面是这篇文章的目录结构,一般比较简单的问题我就一笔带过了,主要是分享一下比较有难度的知识点,答案来自网上,如果有版权问题我会删除.还有本文只是给出一个大概的知识点,如果想要深入学习还要靠 ...
什么是基于web开发，CSS的浮动属性，干货满满！
前言在初学前端的时候,我们总会遇到一些问题,我们可以在网上看到很多关于前端的这些问题: 你们都是怎么学web前端的? 零基础,怎么自学好前端? 前端需要学多久,都学哪些知识? 想成为一名合格的前端工 ...

CSS使用浮动属性和边距设计3行3列定宽的布局实例

CSS使用浮动属性和边距设计3行3列定宽的布局

实例

提示

CSS使用浮动属性和边距设计3行3列定宽的布局实例相关推荐

最新文章

热门文章