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

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

制作导航栏
要制作左侧的导航栏按扭，首先要制作一个ID容器存放里面的内容:
以下内容为程序代码

#left {
width: 178px;
}

到目前为止我们需要做的只是定义它的宽度，在这个宽度的left容器中我们放置一个DIV容器作为这个导航，命名为：navcontainer.用CSS建立一个导航最好的方法是用它本身那些导航的点，就像以前用html做好内容,然后再定义它的CSS样式一样。就像这样：
以下内容为程序代码

<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中移除这些点，要进行的CSS定义为：
以下内容为程序代码

#navcontainer {
width: 178px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}

第一部分代码定义了这个导航容器的宽度，第二部分定义了这个导航容器的“Ul”标签.margin: 0;padding: 0;确保了在按扭和按扭之间没有空隙并且移掉了左边的缩进。list-style-type: none;移除了标准html格式里的小点，然后是定义里面文字样式，在最后一行，是用来给我们要做的漂亮的导航按扭每行下面加一条白线。
以下内容为程序代码

#navcontainer a {
display: block;
width: 178px;
height: 22px;
}

这个定义了一个我们的导航栏的“a”标签，或者叫做“链接标签”。这样定义之后就会影响到每一个导航栏里的按扭，首先，我们使用display: block;，显示设置为一个元素的显示方式，这里设置为“block”是需要让这个链接的块儿自动调整到适合大小，后两行是设置的每个按扭的宽和高。
上一页 [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

特别推荐