网页制作

CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动（参见第13课），你将能够创建多种高级而精确的布局。本课我们将讨论以下内容： CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统： CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理： 举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示： 如何实现这个效果？ 上例的HTML代码如下所示： <div id=”picture”><…

到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。 下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box {width: 200px;bord…

边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等…

上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构： CSS中的盒状模型 上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本…

pan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本…

有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说，我们有两个由链接组成的列表。…