我正在努力设计一个像这样的垂直 CSS 菜单。 on the right of this site
.我有两个问题。
如何在菜单项中添加图像。
如何制作顶部和底部所有元素的边界半径 不是每个元素。
这是我的代码
<!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>
最佳答案
首先，您应该调整您的 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。
关于html - 帮助垂直 CSS 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4418763/