您的位置：首页 > 运维架构 > 网站架构

使用CSS—轻松学习网站界面制作（二）

2012-06-30 23:47 495 查看

上次博客中，我们主要是对CSS进行了一个简单的介绍，CSS主要是让网页的内容与样式进行分离，我们需要改内容的时候，我们只需要改对应的样式也就行了；我们接下来介绍一下CSS的核心内容。

我们先来看一下两种形式的标签：块级元素，行内元素。

块级元素（div)：我们看一下效果：我们在HTMLPage中把栏目一的span改为div:

<body>
<div class="menu">栏目一</div>
<span class="menu">栏目二</span>
<span class="menu">栏目三</span>
<span class ="title" >123456 </span>
</body>

然后我们看一下效果：

现在的这个栏目一已经沾满了一行；除了使用这个div变成块级元素，那么我们的还有一种办法把行内元素变成块级元素，我们在HTMLPage里边这么写：

<body>
<div class="menu">栏目一</div>
<span class="menu ttt">栏目二</span>
<span class="menu">栏目三</span>
<span class ="title" >123456 </span>
</body>

那么我们在样式中这么加这么一句话：

.ttt
{
display :block ;
}

我们看一下效果：

这样我们的栏目二也占满了一行，也变成了块级元素了。我们介绍完块级元素和行内元素之后，那么这个标准流也就出来了，其实说白了，就是一个标签的排列方式。

盒子模型：我们来对一张图片进行分析，了解里边的构造，就简单多了：

我们很easy的看的出来，盒子模型咱们要理解的就是：外边距margin（上、下、左、右），内边距border（上、下、左、右），内容content（宽、高），框padding（宽）。

接下来我们测试一下效果。我们在样式文件中，这么写：

.menu{  /* 栏目样式*/
color:#f00; /*  文字颜色 */
background-color :#FEE7F7;
border-width :1px;
border-color :#00f;
border-style:solid ;

}

我们来看一下效果：

这有一个好玩的东西，咱们发现了栏目二的上边框特别的粗，很简单，是栏目一的下边框叠加了。我们继续看一下盒子模型的另外一下内容，我们padding，margin等等效果也是类似的，大家动手去实现一下；在这里特别要注意一点，行内样式对我们的边框很挑剔，基本没有响应。

下一篇博客，我们继续来介绍界面效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航