彻底弄懂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


猜你喜欢
- 本文实例讲述了Python面向对象程序设计类变量与成员变量、类方法与成员方法用法。分享给大家供大家参考,具体如下:类变量与成员变量在类中声明
- view()函数是在torch.Tensor.view()下的一个函数,可以有tensor调用,也可以有variable调用。其作用在于返回
- pycharm安装cv2模块安装失败和无法使用的解决步骤一我们先到这个网址:cv2下载地址去下载与自己python版本号和电脑位数对应的op
- 一、注意你的Python版本Python官方网站为http://www.python.org/,当前最新稳定版本为3.6.5,在3.0版本时
- 要求:#出租车计费*************************************************************
- 什么是性能分析?性能分析是衡量应用程序在代码级别的相对性能。性能分析将捕捉的事件包括:CPU的使用,内存的使用,函数的调用时长和次数,以及调
- 一、下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/&
- 前言最近在研究 pyecharts 的用法,它是 python 的一个可视化工具,然后就想着结合微信来一起玩不多说,直接看效果:
- 1. 安装 seaborn安装:pip install seaborn导入:import seaborn as sns2.准备数据正式开始之
- Python:2.7 IDE:Pycharm5.0.3 今天遇到一个问题,就是在使用json.load()时,中文字符被转化为Unicode
- windows10:1,先要pip安装pydotplus和graphviz:pip install pydotpluspip install
- 单例模式的实现方式将类实例绑定到类变量上class Singleton(object): _instance = Nonedef
- 思路简单的生成和读取 CSVCSV 文件格式使用 csv 库Python with CSV先有个很朴素的生成和解析的方法。生成:data =
- 本文主要是介绍Go,从语言对比分析的角度切入。之所以选择与Python、Erlang对比,是因为做为高级语言,它们语言特性上有较大的相似性,
- ACCESS有个BUG,那就是在使用 like 搜索时如果遇到日文就会出现“内存溢出”的问题,提示“80040e14/内
- 1. 搭建项目配置环境和创建表创建一个ttsx的项目django-admin startproject ttsx在ttsx下的__init_
- 本文实例为大家分享了python实现电子书翻页的具体代码,供大家参考,具体内容如下1.题目:电子书翻页:(1)自动翻页:每次默认读三行,读完
- 因为需要检测一个一个链接中是否包含了IP地址,在这里需要使用到正则表达式 ,python完美的支持了正则表达式,在这里使用re模块来完成,对
- 本文实例讲述了Python类的用法。分享给大家供大家参考。具体如下:先看一段代码:#!/usr/bin/env pythonclass Te
- Node.js Domain(域) 简化异步代码的异常处理,可以捕捉处理try catch无法捕捉的异常。Domain 模块可分为