首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

淘宝导航栏成效_求大牛指导

2013-09-29 
淘宝导航栏效果_求大牛指导请问各位大牛这种效果如何实现,主要不明白border那里是如何弄成多边形的,ul?li?

淘宝导航栏效果_求大牛指导
淘宝导航栏成效_求大牛指导
请问各位大牛这种效果如何实现,主要不明白border那里是如何弄成多边形的, ul?li?hover 导航栏 淘宝 css
[解决办法]
上下两个div拼的,上面一个border-bottom:none;下面一个正常border,然后用绝对定位上面覆盖下面的。
另外这个世界有款神器叫firebug,你可以试试。
[解决办法]
首先要保证正确的dtd,不知道是笔误,还是没有粘贴上来,然后才是代码的有机分离与效果的整合。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        .dpnone{ display:none;}
        #nav{
            position:relative;
            z-index:999;
        }
        #nav_child{
            width:200px;
            height:100px;
            border:2px solid #C1C1C1;
            background-color:#F90;
            position:absolute;
            z-index:10;
            top:48px;
        }
        #nav:hover #nav_child{ display:block;}
        .first{ 
            position:absolute;
            top: 0;left: 0; 
            display:block; 
            z-index:12;
            width:100px;
            height:50px;
            border-left:2px solid #C1C1C1;
            border-right:2px solid #C1C1C1;
            border-top:2px solid #C1C1C1;
            background-color:#09F;
        }
    </style>
</head>

<body>
<div id="nav">
    <a class="first">adc</a>
    <div id="nav_child" class="dpnone">
        <a>def</a>
    </div>
</div>
</body>
</html>

热点排行