blogbus模板系列教程9---css样式代码简介3 - 网海天涯

<< blogbus模板系列教程9---css样式代码简介2 | 首页 | blogbus模板系列教程9---css样式代码简介总结篇 >>

blogbus模板系列教程9---css样式代码简介3 - [博客大巴代码教程]

2008年04月26日

在上节的教程中，我们知道了样式代码和布局代码可以分开来写。这样一来，就使代码编写工作变得轻松了许多。但或许对于很多人来说，手写代码可能是件不可能完成的事，其实想要学会手写代码，不妨先学会看懂代码，然后再试着写出一小段代码。慢慢积累下来之后，你就学会手写代码的方法了……

这节我将介绍下，对样式代码的引用问题。在上节教程中用到的例子：
布局部分：
<html>
<head>
<title>这是个测试页面</title>
</head>
<body>
<div id="test">这是一个宽为400px 高为500px，边框为 2px宽的红色实边，背景图片是：的层</div>
</body>
</html>
样式部分：
<style type="text/css">
#test {
                              width:400px;
                              height:500px;
                              border:2px solid red;
                              background:url(http://www.blogbus.com/images/site_v4/logo.gif) no-repeat;
                         }
</style>

布局部分的代码一般会在index（首页）代码块以及log（日志页）代码块中用到。样式部分的代码自然是写在css代码块中了。但现在的问题是，如何将样式代码与布局代码联系在一起，换句话说，就是在布局代码中如何应用样式代码……
在旧模板系统中（注：本教程所有内容均基于旧模板系统），我们需要在布局代码中写一个简单的引用样式代码的语句。先看看下面的代码：
<html>
<head>
<title>这是个测试页面</title>
<style type="text/css">
#test {
                              width:400px;
                              height:500px;
                              border:2px solid red;
                              background:url(http://www.blogbus.com/images/site_v4/logo.gif) no-repeat;
                         }
</style>
</head>
<body>
<div id="test">这是一个宽为400px 高为500px，边框为 2px宽的红色实边，背景图片是：的层</div>
</body>
</html>