彻底弄懂CSS盒子模式之二(导航栏实例)(2)
作者:唐国辉 发布时间:2007-05-11 16:52:00
先来分析一下这个导航栏要用到多少个盒子,在分析之前我们还是要形成一种思想:尽量减少和优化XHTML代码,让他们基本上都有语义。这个导航栏最少的盒子实现是:最外边一个大盒子(ul),这个盒子与1像素高的背景图片等宽,里面又有五个小盒子(li)分别装着每一个导航栏,这个盒子与“勾月”图形等高,导航栏这个盒子里面又装着一个稍小的盒子(a),这个盒子又装着一个黄色的修饰盒子(a的左边框,这里勉强理解为盒子,因为它不像一般的边框那么细,在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。
网页结构代码:
<ul id="nav">
<li>
<a href="#">彻底弄懂CSS盒子模式1</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式2</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式3</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式4</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式5</a>
</li>
</ul>
1.现在正式开始做,做之前初始化一下各签标的边界和填充,这里用样式:
* {
margin: 0px;
padding: 0px;
}
2.组装最外边的大盒子ul,宽200px,高为自动auto或者干脆不要,背景图片为bj.jpg,背景纵向重复,用<ul id=”nav”>方式引用样式,用到样式:
#nav {
background: url(bj.jpg) repeat-y;
width: 200px;
overflow: hidden;
}
3.组装每条导航的盒子li,这个盒子与“勾月”图形等高,并把“勾月”图形以背景形式放在这个盒子的左边,并用15px的填充把盒子内容区块推向正中合适位置(当然你也可以考虑给子级a指定边界属性来实现),并让这个盒子靠左边对齐(因为这个盒子的宽度比外边的大盒子小,如果相等则可以不用考虑对齐方式),这里用到样式float的属性,本人没有写入样式中则取其默认值,样式代码如下:
#nav li {
background: url(lan.gif) no-repeat left center ;
height: 35px;
width: 190px;
padding-top:15px;
}
4.组装链接盒子a,这里用到样式: display: block;让链接以块状方式呈现,并为链接安排背景图片,为了安全起见设置背景不重复,垂直居中(如果浏览器出错解释错误,而你的背景又不是纯色的,那么盒子过大导致的背景重复将会影响网页美观),链接文字样式去除下划线,整个盒子右对齐,样式如下:
#nav a {
background: url(lanbj2.gif) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
}
5.组装黄色修饰块盒子(a的左边框,如果又独立用一个盒子来做就不科学了,因为此方法最简单),直接给a加入下面一条样式即可,样式代码如下:
#nav a {
border-left:10px solid #f90;
}
6.最后简单为鼠标移到链接上时,链接风格的改变指定一个样式:
#nav a:hover {
background-image: url(lanbj3.gif);
color: #FFFFFF;
}
至此完成样式代码编写,上面已给出内容部分的结构代码,把它们结合到网页中就算是完成本次导航栏的制作。再次感谢本专栏斑竹blankzheng指点优化。
源文件打包下载 xhtml.rar
猜你喜欢
- 在MySQL中,对于索引的使用并是一直都采用正确的决定。简单表的示例:CREATE TABLE `r2` (ID` int(11) DEFA
- 不论什么时候,只要系统带有多个设备,而这些设备的性能又各不相同,就存在从慢速设备到快速设备不断更换工作地点以改善系统性能的可能性,这就是缓存
- Session 对象 可以使用 Session 对象存储特定用户会话所需的信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Se
- 在本教程中,你会学到如何把HTML的列表项(li元素)转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrom
- 文件名:Awa_temp.Class.asp 代码如下:<% 'Crazy蛙!模板操作类 '作者C
- 空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.先看如下demo代码:<!do
- 我们进行CSS网页布局的时候,都知道它需要符合XHTML1.0规范。如果我们在进行CSS网页布局的时候,还在使用被W3C废弃的元素,那就失去
- 网站用户为什么注册?这个问题在平时我们讨论的并不多。我们常常单纯的在设想如何简化注册流程,如何从细节的关怀入手避免用户注册时填写错误信息造成
- 定义本地站点在Dreamweaver中制作网站,您必须定义一个本地站点,它是您的计算机上任意位置的一个
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 在sql语句中,如果查找某个文本字段值为空的可以用select * from 表 where 字段=''但是如果
- 当我们使用访问一个没有声明的变量时,JS会报错;而当我们给一个没有声明的变量赋值时,JS不会报错误,相反它会认为我们是要隐式申明一个全局变量
- 为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的
- var sss=(String.fromCharCode(127)); var xmlhttp =
- 可能出现的原因有:◆源数据库或目标数据库为 SQL Server 6.5 版。连接到 Access 项目的当前 SQL 服务器和要将数据库转
- caller 属性返回一个对函数的引用,该函数调用了当前函数。functionName.caller functionName 对象是所执行
- <script> Function.prototype.$bind=function(object) {  
- 一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例我以ACCESS库为例子,其实用SQL SERVER库也只要改一下链接库的语句
- 背景:在做项目时,经常会遇到这样的表结构在主表的中有一列保存的是用逗号隔开ID。如,当一个员工从属多个部门时、当一个项目从属多个城市时、当一
- 受<! #include file="filename.asp" --> 宏限制必须存在该文件并且会预先编译