设计一个基于CSS的网页模板

日期：2007年8月10日作者：查看:[大字体中字体小字体]

现在我们要为它添加一个样式来定义它的外观：
以下内容为程序代码

#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
}

我们使用#content h2在这里意思是我们要给content ID 里的h2定义一个样式。意思就是说在内容DIV里的所有的h2的标签的显示样式效果都是这样的。我们也可以在这个content ID的外面定义h2标签的样式，那样的话，整个网页上的h2标签里的内容都显示同样的效果。如果你想要用其它的h2样式例如在left容器，在前面添加这个id将是很方便的。
以下内容为程序代码

<div id="content">all h2 tags here will have this style</div>

在content h2中的第一行CSS设置了字体的样式：字体的宽度 (normal),字体的大小（18px）和字体的名称。类似于padding属性。这也是用一行的简写形式，它用一行的代码为不同的字体设置了所有的这些属性值。接下来我们设置文本的颜色，第三步设置背景图片的属性。也这是以前我们曾做过的背景图。同样是用简写的代码，我定义了背景图片颜色（transparent），背景图片路径background-image和background-repeat这三个属性写在一行里就可以全部表示出来。最后两行代码是定义了我们的header的总宽度和空隙量。
添加文本内容
这是文本内容的样式：
以下内容为程序代码

.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}

现在我们用一个class，不用在最前面，因为我们反复的要用这个样式在我们的网页中。第一行设置了字体的样式，11像素的字体大小，18像素的行高，第二行我们定义了文本的颜色，在最后我们通过在段与段之间添加10像素的底端空白来增加一些距离。
在我们的Xhtml代码中的h2标签的下面我们添加一个段落标签，用来存放我们的文本内容，并将它就用其“text”样式！
以下内容为程序代码

<p class="text">Here comes the text</p>

添加图像
这是右对齐的图像的样式：
以下内容为程序代码

.imageright {
上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] 下一页
设计一个基于CSS的网页模板相关文章：
·路由器安全设置详解
·ADSL猫路由设置方法
·校园网网络方案设计及分析
·某大学校园网设计方案六(组图)
·VB+Access设计图书管理系统
·宽带共享该怎样设置无线路由器
·综合布线系统工程设计参考大全
·如何进行局域网设置
·静态路由的设置及相关命令
·VB设计有语音报时和报警功能的闹钟
设计一个基于CSS的网页模板相关软件
·天下第一签个性签名设计系统 V1.2
·AUTOCAD经典设计作品 V2.0
·局域网共享设置梦想吧专用版
·C/C++程序设计学习与实验系统 V2008.2
·《经典FTP服务器架设》教学视频录象
·机械设计手册 V3.0
·星智名片设计系统 V1.1
·经典的地产广告设计欣赏一（PSD分层)
·施工组织设计软件(标书制作系统) V6.2
·WIN98启动盘启动USB设备程序 V1.0

上一篇:XML配置文件的读取处理

下一篇:CSS:word-spacing

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

设计一个基于CSS的网页模板

精品推荐

热点TOP10

特别推荐