0

我在编写 CSS 鱼眼菜单时遇到了一些问题。

这是我的代码：

CSS 部分

/* dock */
.dock {
position: relative; 
height: 40px; 
text-align: center;
}


.dock-container {
    width: 500px;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-top:40px;
margin-bottom: 100px;
bottom: 100px;
padding: 0px;

}
a.dock-item {
display:initial;
width: 20px;
color: #ffffff;
position: absolute;
margin-right: auto;
margin-left: auto;
padding: 2px;
border: none;
text-align: center;
text-decoration: none;
font: 500 14px Arial, Helvetica, sans-serif;
}


a:visited.dock-item{color:#555; text-decoration:none;}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%; 
}
.dock-item span {
display: none; 
padding-left: 0px;
}

HTML 部分

$(document).ready(
    function()
    {
        $('#dock').Fisheye(
            {
                maxWidth: 0,
                items: 'a',
                itemsText: 'span',
                container: '.dock-container',
                itemWidth: 150,
                proximity: 100,
                halign: "center", 

            }
        )
    }
);

</script>



 <td id="right" valign="top">
 <div id="menu_container">
    <div class="dock" id="dock">
   <div class="dock-container"> 



    <a class="dock-item" href="<?php echo $bluedock_page2_url; ?>">
    <img src="<?php bloginfo('template_directory'); ?>/icons/<?php echo $bluedock_page2_icon; ?>" alt="" />
    <span><?php echo $bluedock_page2_text; ?></span>
    </a>

    <a class="dock-item" href="<?php echo $bluedock_page3_url; ?>">
    <img src="<?php bloginfo('template_directory'); ?>/icons/<?php echo $bluedock_page3_icon; ?>" alt="" />
    <span><?php echo $bluedock_page3_text; ?></span>
    </a>

    <a class="dock-item" href="<?php echo $bluedock_page4_url; ?>">
    <img src="<?php bloginfo('template_directory'); ?>/icons/<?php echo $bluedock_page4_icon; ?>" alt="" />
    <span><?php echo $bluedock_page4_text; ?></span>
    </a>

    <a class="dock-item" href="<?php echo $bluedock_page5_url; ?>">
    <img src="<?php bloginfo('template_directory'); ?>/icons/<?php echo $bluedock_page5_icon; ?>" alt="" />
    <span><?php echo $bluedock_page5_text; ?></span>
    </a>

    <a class="dock-item" href="<?php echo $bluedock_page6_url; ?>">
    <img src="<?php bloginfo('template_directory'); ?>/icons/<?php echo $bluedock_page6_icon; ?>" alt="" />
    <span><?php echo $bluedock_page6_text; ?></span>
    </a>

我需要什么：我不想在每个项目之间有填充。事实上，我希望主要项目（中心项目）更大，而另一个项目在下方并且不透明度更低。

4

0 回答 0