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

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

鼠标经过时的状态是通过交换背景图片来实现的，使用的是a:hover 的样式。这是详细的代码：
以下内容为程序代码

#navcontainer a:hover {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

颜色的设置是通过改变Color属性的，而text-decoration: none;是用来防止正规的链接中的下划线出现的。通常状况下，为了使你的导航栏能表现的更清晰，更具体，所以我又添加了一个额外的样式current，这个用来显示当前网站所处的页面。代码如下：
以下内容为程序代码

#navcontainer li a#current {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

这个样式的定义用在导航栏里的链接里(li a)，属性和值都和经过状态时是一样的。
现在剩下仅有的事情就是把这个ID添加到我们的html代码里了：
以下内容为程序代码

<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

观看最后的结果

一些关于CSS导航栏的例子可以到这些网站上去看一下：
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://css.maxdesign.com.au/listutorial/

这就是我们的制作导航栏的全过程，我希望大家能喜欢它，并且继续关注我们下一部分的内容！

这是我们教程的第六部分，现在我们将要填加我们网页的内容部分。

为网站的内容添加主体容器
首先我们要在我们的样式表单中添加一个ID选择器，设定他的宽度为514像素，
以下内容为程序代码

#content {
width: 514px;
float: left;
}
上一页 [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

特别推荐