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

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

CSS代码：
首先我们定义我们的“favlinks”div id容器：
以下内容为程序代码

#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}

我们定义了它的宽度并具给它的左边一个15像素的空白，以防止它贴到左边上，同时留一些额外的空当在顶部，这个favlinks容器的宽不像我们的导航栏的宽度178那样，而是163，是因为我们添加了15像素的左空白。这叫做盒式结构，更精细的内容可以看这篇文章：3D by Jon Hicks
以下内容为程序代码

#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}

上面的这段CSS是我们的这个标题的样式，前两行是定义文字字体大小和颜色的，再往下是padding 和 margin，我们只在底部添了10像素的空白，padding 和 margin是必需的，除非我们不想要在标题和链接之间空太开间隔，只是一些空开就够了，对我来说那就是10个像素了在底部。
以下内容为程序代码

#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}

在上面的这些代码是定义我们的列表中的链接的，首要的是确保默认的点不显示出来，并且padding 和 margin是设置到零的。就像我们在第五部分中的导航栏一样。
以下内容为程序代码

ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}

我们已经添加了一个名为“extlinks”的Class来定义我们的链接，我们用“ul.extlinks li”来定义ul里的“li”标签的样式。首先我们添加一个non-repeated背景，定义我们的小点距上顶3像素，距左边0像素来确保这些点正好对齐我们一会要添加的链接。我们定义了字体样式并添加了一点左侧空白来确呆我们的文本能给我们的点留出一些空白。
以下内容为程序代码

.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}

.extlinks a:visited {
上一页 [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

特别推荐