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

xhtml+css基础第2课-列布局

1、CSS 语法

如图所示,CSS 语法由如下三部分构成,选择器:可以是 ID、CLASS 或标签;属性和值是用来定义这个物件的某一个特性。如一张桌子的长 120cm,宽 60cm,套用 css 的格式为,桌子{长:120cm;宽:60cm;},这样是不是容易理解。

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

2、ID 和 CLASS 选择器

id 只能在页面中对应一个元素,就像我们的身份证号一样,每个人的都不一样;class 为类,可以对应多个元素,比如说一年级三班的学生,它所对应的可能是 10 个 20 个学生。

id 的优先级高于 class,比如说今天三班的学生上体育课,小明留下来打扫卫生。那么三班的学生上体育课这是一个类,而小明打扫卫生这是个 id,虽然小明也是三班的学生,但 id 高于 class,所以小明执行打扫卫生的任务。

3、CSS 缩写

css 的许多属性是可以简写的,这样便于阅读和修改,减少代码量。比如颜色值为#ff6600;可以简写为#f60;两位两位一样的才可以简写,像#c2c2c2 是不可以简写的。

4、CSS 格式化

如果你用 DW 软件的话,选择命令-应用源格式。

5、一列固定宽度

<!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 type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
</head>
<body>
<div id="layout">此处显示  id "layout" 的内容</div>
</body>
</html>

6、一列固定宽度居中

一列固定宽度居中和一列固定宽度相比,我们要解决的问题就是居中。这里我们用到 css 的外边距属性:margin。在 IE6 及以上版本和标准的浏览器当中,当设置一个盒模型的的 margin:auto;时,可以让这个盒模型居中。我们下边在 css 样式表中加上这个属性看看效果:

#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

7、一列自适应宽度

自适应宽度是相对于浏览器而言,盒模型的宽度随着浏览器宽度的改变而改变。这时要用到宽度的百分比。当一个盒模型不设置宽度时,它默认是相对于浏览器显示的。我们把刚才的固定宽度例子中的宽度去掉看看:

<!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 type="text/css">
body { margin:0;}
#layout { height: 300px; width: 80%; background: #99FFcc; }
</style>
</head>
<body>
<div id="layout">此处显示  id "layout" 的内容</div>
</body>
</html>

如果不加 body { margin:0;}会有白边。这个是由 body 默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul 等元素默认有外边距或其它样式的。这里我们在 css 样式中增加一项:body {margin:0;},就可以把 body 默认的外边距去掉,这时再预览一下,白边就没了。

8、一列自适应宽度居中

同样和固定宽度居中一样,我们只需要设置 div 的外边距为 auto 即可实现居中了。

body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

9、一列多块布局

一般的网站整体可以分为上中下结构,即:头部、中间主体、底部。那么我们可以用三个 div 块来划分,分别给它们起名为:头部(header)、主体(maincontent)、底部(footer)。

采用固定宽度居中的方式,代码如下:

<!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 type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head>
<body>
<div id="header">此处显示  id "header" 的内容</div>
<div id="main">此处显示  id "main" 的内容</div>
<div id="footer">此处显示  id "footer" 的内容</div>
</body>
</html>

许多朋友在问:为什么两个相邻的容器中间的间距不是 10px,而是 5px 呢?按照我们正常的理解,认为应该是两个值相加,其实这里是两个合并后取最大值。用 css 手册中的话说:块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心(有关块级元素和行内元素的概念在下一节讲到)。

赠人玫瑰,手有余香。