^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

xhtml+css基础第3课-二列和三列布局

在上一节课:Div+css 基础系列教程第 2 课-列布局中我们主要讲的是单列多块布局,今天主要来说说多列布局:

1、两列自适应宽度

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

<!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" />
<style>
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>
<body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>

当我们拖动浏览器窗口变大变小时,#main 的宽度也会跟着改变。#main 中设置 margin-left:120px;正好让出#side 占去的 120px 宽度,如果这里设置为 122px 的话,中间将出现 2px 的空隙,大家可以试一下。

2、两列固定宽度

<!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" />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
<body>
<div id="content">
  <div id="side">此处显示 id "side" 的内容</div>
  <div id="main">此处显示 id "main" 的内容</div>
</div>
</body>
</html>

两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个 div 之外再加一个父 div:#content;#side 的宽度为 120px,#main 宽度为 350px,那么#content 的宽度应该为这两者之和,然后设置#content 居中,那么整体就居中了:

3、xhtml 的块级元素(div)和内联元素(span)

块级元素:就是一个方块,像段落一样,默认占据一行出现;内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

如果没有 css 的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了 css 以后,我们可以改变这种 html 的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用 css 的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。常见的块级元素和内联元素如下:

4、三列自适应宽度

<!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" />
<style>
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
</body>
</html>

5、三列固定宽度

三列固定宽度可以在三列自适应基础上添加一个父 div,并设置这个 div 的宽度即可,如下,添加一个 id 为 content 的父容器。

<!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" />
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="content">
  <div id="side">此处显示 id "side" 的内容</div>
  <div id="side1">此处显示 id "side1" 的内容</div>
  <div id="main">此处显示 id "main" 的内容</div>
</div>
</body>
</html>

思路就是这么个思路,大家举一反三,可以复制上述代码自行测试。

赠人玫瑰,手有余香。