论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS实例:ULli打造CSS横向菜单蓝色地平线

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:34

我们发现了一些问题,这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白,更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。
  HTML代码与前面的一样,我们就不再重复了。我们看CSS代码。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
margin:0;
padding:0;
}
#nav {
background:#06c;
float:left;
width:100%;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:5px 12px;
color:#fff;
text-decoration: none;
background:#06c;
border-right: 1px solid #fff;
}
#nav li a:hover {
background:#060;
}

  首先是整体布局声明。利用通配符“*”表示在不非凡声明的情况下,默认所有元素的边距及填充均为零。
  我们设置UL无序列表nav的背景色为#06c,向左浮动,宽度是100%。这两段代码定义以后,我们的菜单就能紧靠着浏览器窗口了,并且它的宽度是100%。
  菜单的列表项li定义为display:inline;内联(行内)将li限制在一行来显示及设置列表项预设标记为无;
  我们接着往下看链接区域的代码意义,link、visited状态:
  链接元素向左浮动,填充上下为5px、左右为12px。
  文字颜色为白色,去除链接下划线。背景色#06c与上面的相同。
  我们定义了右边框线:1px、实线、白色#fff。这一句很重要,它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。
  完整的写应该是:(关于更多缩写代码知识请参考21shipin.com的其它文章)

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
border-right-width:1px;
border-right-style:solid;
border-right-color:#fff;

  我们的这个菜单的编码工作完成了,看最终的效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058