论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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,表格,视频教程

DIVCSS图形菜单之仿DreamWeaver

文章类别：div+css布局 | 发表日期:2008-9-26 11:28:08
　　这是为了实现一个效果，而提前作的测试代码！看起来很简单的一个东西，到这会，大约四个小时过去了。不知道是IE6的BUG；还是我自已的BUG！有人问，你的CSS里边写的太麻烦了，呵呵， 你可以用简单的方法试一试；IE6，7，FIREFOX都走一次就知道了。



HTML代码：
div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"info\">
<ul>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/200892611262329377804.gif" alt=\"A\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/200892611262339377805.gif" alt=\"B\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/200892611262352377806.gif" alt=\"C\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/200892611262359377807.gif" alt=\"D\" align=\"absmiddle\" /></a></li>
<li><img src="../img/divcss/200892611262364377808.gif" alt=\"M\" align=\"absmiddle\" /></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/200892611262370377809.gif" alt=\"E\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112623813778010.gif" alt=\"F\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112623863778011.gif" alt=\"G\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112623934778012.gif" alt=\"H\" align=\"absmiddle\" /></a></li>
<li><img src="../img/divcss/200892611262364377808.gif" alt=\"M\" align=\"absmiddle\" /></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112625536778013.gif" alt=\"I\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112625616778014.gif" alt=\"J\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112625666778015.gif" alt=\"K\" align=\"absmiddle\" /></a></li>
<li><a href=\"#\" hidefocus=\"true\"><img src="../img/divcss/2008926112625736778016.gif" alt=\"L\" align=\"absmiddle\" /></a></li>
</ul>
</div>

加了hidefocus，是为了去掉点击链接时的虚线。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
hidefocus=\"true\"

CSS代码：

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}

#info{ background:#5F768B; padding:10px;}
#info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
#info li{float:left;padding:2px;}

a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}

看最终的运行效果：

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

[ 可先修改部分代码 再运行查看效果 ]

　　说实话，直到写到这里，直到我再次修改这篇文章的时候，这个BUG我才终于处理完。但正常使用是不会有问题的！
　　本文作者：zishu
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058