- 浏览: 1657959 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
作者:唐国辉
实现原理动画演示:http://www.blueidea.com/articleimg/2007/03/4563/cssNav.swf
自本人教程《彻底弄懂CSS盒子模式(DIV布局快速入门)》
发表以来,一直获得各位网友的好评与支持,今天应各位网友的要求,也为了答谢各位网友的支持,本人将推出续篇教程,以加深各位网友对CSS盒子模式的理解。此教程面向读者还是DIV排版入门者,如果你是高手,那就不要浪费自己时间了。
本人这次将讲解一个纵向CSS导航栏实例的制作,在讲解过程中将会延用之前发表教程所讲到的“盒子”概念,如果你没有看过本人之前的那篇教程,又或者你
还不理解什么是“盒子”这一概念,请先通过下面的两个链接阅读本人之前发表的教程,看完之后再回来看此教程,如有不便敬请原谅。
1.彻底弄懂CSS盒子模式(DIV布局快速入门)
2.彻底弄懂CSS盒子模式(DIV布局快速入门)
用CSS做导航栏也是轻而易举的事情,在本人之前发表的教程中其实也有一个简单的横向导航栏制作,那时只给出了样式代码并没有作太多的解释,这次要做一个相对复杂点的导航栏,为了加深大家对CSS盒子模式的理解,特别选做一个有多个盒子嵌套实现的导航栏。
先看实现原理动画演示:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
现在再看结果图:
这个导航栏中的链接用到了背景图片的切换效果,鼠标移到链接上导航栏背景图片和文字颜色都会跟着改变,整个导航用到下列4幅图片素材:
即链接不同状态的两张背景图片,每条导航左边的“勾月”图形,最外边大盒子1像素高的背景图片。
看了动画演示和结果图,也了解了用到那些素材,现在就请你带着一股好奇和我一起来完成这个导航栏吧,当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好DIV排版!
经典论坛讨论
http://bbs.blueidea.com/thread-2731165-1-1.html
先来分析一下这个导航栏要用到多少个盒子,在分析之前我们还是要形成一种思想:尽量减少和优化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
经典论坛讨论
http://bbs.blueidea.com/thread-2731165-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4563.asp
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 782WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 748一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 955<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 646版权声明:如有转载请求,请注明出处: http://blog ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 601Absolute ,CSS 中的写法是:positio ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 616例子: .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 646CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 603CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器,CSS hack写法
2009-08-20 16:01 620区别IE6 与FF : backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 664使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 869CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 683at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 689前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 628熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 735一、下面请看float的精彩表演,有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 581在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 677前言 在用CSS控制排版过程中,定位一直被人认为是一个难 ... -
CSS 盒模型
2009-09-02 17:11 599整理自:The CSS Box Model 中文:CSS 盒 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 701事件 HTML元素事件是 ... -
15个优秀的第三方 Web 技术集成
2009-09-25 10:13 689在 Web 开发与设计中, ...
相关推荐
【彻底弄懂CSS盒子模式】 CSS盒子模式是CSS布局的基础,理解它对于使用CSS进行网页设计至关重要。在网页设计中,元素(如div)被视作一个个“盒子”,每个盒子都有其特定的属性,包括内容(content)、内边距(padding...
#### 二、CSS盒子模型概述 **CSS盒子模型**是用于描述网页元素如何被渲染的一种模型。每个网页元素都可以被视为一个矩形盒子,这些盒子相互嵌套或并排放置,共同构成整个网页的布局结构。在CSS盒子模型中,一个元素...
五个文档助你彻底弄懂CSS盒子模式! 如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版...
本篇文章将深入解析CSS盒子模型,并通过实例探讨如何使用div布局,帮助你彻底掌握这一核心技术。 首先,我们需要理解CSS盒子模型的基本构成。每个HTML元素在CSS中都被视为一个矩形的“盒子”,它包含四个部分:内容...
### CSS盒子模式详解 #### 一、引言与概述 CSS盒子模型是Web前端开发中的一个核心概念,它定义了元素在网页上如何占据空间以及元素间的相互作用方式。掌握CSS盒子模型对于创建布局合理、视觉效果良好的网页至关...