Question

我正在尝试设计像这样的垂直CSS菜单。 on the right of this site
alt text

。我有两个问题。

如何在菜单项中添加图像。
如何制作顶部和底部所有项目的BORDER RADIUS 不是每个

。

这是我的代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Buttons</title> <style> .button { width: 400px; height: 100px; line-height: 100px; color: #C0C0C0; text-decoration: none; font-size: 50px; font-family: helvetica, arial; font-weight: bold; display: block; text-align: center; position: relative; padding-bottom:1px; /* BACKGROUND GRADIENTS */ background: #F5F3F4; /* BORDER RADIUS */ /* -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; */ /* TEXT SHADOW */ text-shadow: 1px 1px 1px black; /* BOX SHADOW */ -moz-box-shadow: 0 1px 3px black; -webkit-box-shadow: 0 1px 3px black; box-shadow: 0 1px 3px black; } /* WHILE HOVERED */ .button:hover { color: #A8A8A8; -moz-box-shadow: 0 2px 6px black; -webkit-box-shadow: 0 2px 6px black; } /* WHILE BEING CLICKED */ .button:active { -moz-box-shadow: 0 2px 6px black; -webkit-box-shadow: 0 2px 6px black; } </style> </head> <body> <a href="#" class="button"> Profile </a> <a href="#" class="button"> Privacy </a> <a href="#" class="button"> Services </a> <a href="#" class="button"> Avatar </a> <a href="#" class="button"> Language </a> </body> </html>

Answer 1

首先，您应该调整html以包含如下列表（注意我还添加了id属性）：

<ul>
 <li><a href="#" class="button" id="profile-btn"> Profile  </a></li>
 <li><a href="#" class="button" id="privacy-btn">  Privacy </a></li>
 <li><a href="#" class="button" id="services-btn"> Services </a></li>
 <li><a href="#" class="button" id="avatar-btn"> Avatar </a></li>
 <li><a href="#" class="button" id="language-btn"> Language </a></li>
</ul>

然后，要添加图像，请使用以下css：

 a#profile-btn {
   background-image:url(/image_path/profile.png);
 }
 a#privacy-btn {
   background-image:url(/image_path/privacy.png);
 }
 a#services-btn {
   background-image:url(/image_path/services.png);
 }
 a#avatar-btn {
   background-image:url(/image_path/avatar.png);
 }
 a#language-btn {
   background-image:url(/image_path/language.png);
 }

最后是圆形边框：

ul {list-style:none;}
ul li:first-child a {
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;
  -webkit-border-radius-topleft:25px;
  -webkit-border-radius-topright:25px;
  border-top-right-radius:25px;
  border-top-left-radius:25px;
 }
 ul li:last-child a {
   -moz-border-radius-bottomleft: 25px;
   -moz-border-radius-bottomright: 25px;
   -webkit-border-radius-bottomleft:25px;
   -webkit-border-radius-bottomright:25px;
   border-bottom-right-radius:25px;
   border-bottom-left-radius:25px;
 }

编辑：此代码旨在与您提供的所有其他css一起使用，只要您替换所示的HTML。

Answer 2

使用像这样的伪类：（如果您的导航是一个列表，按钮类在列表元素上）

li.button：first-child { -moz-border-radius：4em 4em 0 0; border-radius：4em 4em 0 0; }

li.button：last-child { -moz-border-radius：0 0 4em 4em; border-radius：0 0 4em 4em; }

Answer 3

使用列表：

<ul id="main-menu">
    <li><a href="" title="">Link 1</a></li>
    <li><a href="" title="">Link 2</a></li>
    <li><a href="" title="">Link 3</a></li>
</ul>

CSS：

ul li {
    float: left;
    display: inline; 
    text-decoration: none;
    font-size: 20px;
    font-family: helvetica, arial;
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
    margin: 0 0 0 30px;
    background: #F5F3F4;
    -moz-border-radius: 10px 10px 0 0; /* 10 top left, 10 top right. 0 for the rest */
    -webkit-border-top-radius: 10px; /* This will select only the top part */
    border-radius: 10px 10px 0 0;
    text-shadow: 1px 1px 1px black;
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
    padding: 15px 30px;
}

ul li a { color: #C0C0C0; text-decoration: none; }

希望你明白这一点。您可以在此处预览：http://www.jsfiddle.net/UtNA8/

Answer 4

您可以为链接使用包含元素，理想情况下可以对其内容应用语义关系，我使用了ul（因为它基本上是一个非有序列表）和样式，而不是而不是尝试设置其他非分组元素的特定实例的样式：

HTML

<ul>
    <li><a href="#" class="button"> Profile  </a></li>
     <li><a href="#" class="button">  Privacy </a></li>
     <li><a href="#" class="button"> Services </a></li>
     <li><a href="#" class="button"> Avatar </a></li>
     <li><a href="#" class="button"> Language </a></li>
</ul>

CSS

ul {
    width: 12em;
    border-radius: 1em;
    overflow: hidden;
}
ul li {
    padding: 0.5em;
    background-color: #eee;
}

JS Fiddle demo

如果您使用last-child的可靠实施定位浏览器，您还可以使用:first-child和:last-child伪元素：

的CSS：

ul li {
    width: 12em;
    padding: 0.5em;
    background-color: #eee;
}
ul li:first-child {
    -webkit-border-top-radius: 1em;
    -moz-border-radius: 1em 1em 0 0;
    border-radius: 1em 1em 0 0;
}
ul li:last-child {
    -webkit-border-bottom-radius: 1em;
    -moz-border-radius: 0 0 1em 1em;
    border-radius: 0 0 1em 1em;
}

JS Fiddle demo

Answer 5

我会对第一胎，最后一个孩子的伪选择者保持警惕。显然它们是很好的想法，你应该使用它们，因为它们是标准的一部分，但同时你需要为那些没有正确遵守标准的浏览器做一些限制 - 嗯MS。显然，border-radius属性也是如此。哦，最后，您可能希望将图标图形作为标记包含在链接内（也就是说，如果您希望它们显示在任何不支持css的浏览器上，并且您认为其内容特别值得注意）

帮助垂直CSS菜单

5 个答案:

HTML

CSS

的CSS：