bus模板系列教程 9——css样式代码简介 3 - 抓虾
在上节的教程中，我们知道了样式代码和布局代码可以分开来写。这样一来，就使代码编写工作变得轻松了许多。但或许对于很多人来说，手写代码可能是件不可能完成的事，其实想要学会手写代码，不妨先学会看懂代码，然后再试着写出一小段代码。慢慢积累下来之后，你就学会手写代码的方法了……
这节我将介绍下，对样式代码的引用问题。在上节教程中用到的例子：
布局部分：
<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宽的红色实边，背景图片是：
</body>
</html>如果大家认真地看过我之前的教程的话，对于上面这一小段代码是不会陌生的了。<style type="text/css"></style>之间的代码就是样式代码。页面中id="test"的那个层(div)就会按照样式代码规定的样式显示出来。显示的效果与上节内容中的效果是一样的。
在blogbus模板系统中，样式部分的代码是单独写的，引用的时候，只需把<style type="text/css"></style>这段代码换成：<!--~css~-->就行了。显然，<!--~css~-->的其实就代表css代码块中的全部代码。
这节的教程就到此了，内容可能会有点难，有不懂的地方请留言……在下节教程中，我将会总结下css部分的内容，如果在看完这三节教程后，你还有不懂的地方，请继续关注下节内容……
0 评论:
发表评论