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

Fireworks抠图一直很多人认为不是很好,大家也都热衷于Photoshop抠图,本文我们来汇总一下Fireworks抠图的各种方法,通过实例让大家更好的掌握Fireworks抠图。

文章类别:div+css | 发表日期:2011-5-28 9:25:52

<style type="text/css">
#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;}
.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}
.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}
.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}
.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}
.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}
.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}
.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}
#menu a.switch:visited {text-decoration:none;}
#menu a.switch {color:#c00; text-decoration:none; position:absolute;}
#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}
#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}
#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}
</style>
<div id="menu">
<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item one">ITEM ONE</span></span></a>
</div></div></div></div></div>
<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item two">ITEM TWO</span></span></a>
</div></div></div></div></div>
<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item three">ITEM THREE</span></span></a>
</div></div></div></div></div>
<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item four">ITEM FOUR</span></span></a>
</div></div></div></div></div>
<div class="cond"><div class="conc"><div class="conb"><div class="cona"><div class="black">
<a class="switch" href="#nogo"><span class="white"><span class="blackc" title="Item five">ITEM FIVE</span></span></a>
</div></div></div></div></div>

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058