为导航栏的图像添加文本

时间：2013-02-05 20:10:17

标签： html css image navigation

我有一个导航栏，但想要添加图像，因此导航栏不是文本链接，而是由图像和具有悬停效果等的文本组成的按钮组成。

但由于一些链接名称是动态的，我无法在photoshop中制作按钮，因此想知道如何在html和css中制作这种类型的导航栏。

有什么想法吗？

EDIT 为了澄清我有以下图像sample nav button

并希望在此下方添加文字以形成导航栏上的按钮，如果这样可以更清晰。

2 个答案:

答案 0 :(得分：0)

你可以用CSS做很多事情

基本思想是使用伪类.cssclass:hover更改按钮的每个状态的属性以将鼠标悬停在状态上，并将.cssclass:active更改为鼠标按下。

Normal button state的正常 

    /* style of the button in normal state */
button.css3button{
    padding: 0.5em;
    background-color: lightblue;
    border: 4px outset green;
    color: green;
    border-radius: 4px;
}

when mouse is over the button的：悬停 

/* properties that change when mouse over */
button.css3button:hover {
    background-color: lightgreen;
}

when mouse is down的：活性 

/* properties that change when mouse down */
button.css3button:active {
   color: yellow;
   border: 4px inset red;
}

现场演示：JSFIDDLE

使用CSS3的更复杂的样式示例：

enter image description here 

<button type="button" name="" value="" class="css3button">submit</button>

button.css3button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #bfc2ff 0%,
        #82b4ff 25%,
        #4664fa);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#bfc2ff),
        color-stop(0.25, #82b4ff),
        to(#4664fa));
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    border: 3px solid #ffffff;
    -moz-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    -webkit-box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    box-shadow:
        0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(49,141,212,1);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);
}

演示：JSFIDDLE

你可以根据自己的喜好改变每个州:hover :active :visited的尺寸，颜色，渐变，你几乎可以设置任何样式<a> <span> <div> <button>

答案 1 :(得分：0)

这个问题并不适合这个论坛。这是针对特定问题，而不是基本教程。你可以通过一个简单的谷歌搜索找到很多很好的教程，它们将引导你完成基本的CSS以及如何实现这一目标。

但是为了让你开始，你可以这样做：http://jsfiddle.net/wgBTZ/

<强> HTML： 

<ul>
    <li><a href="#" >One</a></li>
    <li><a href="#" >Two</a></li>
    <li><a href="#" >Three</a></li>
    <li><a href="#" >Four</a></li>
</ul>

<强> CSS： 

li {
    float:left;
    width: 100px;
    height: 40px;
    background:#CCC;
    margin:0 0 0 15px;

}

a {
    color: black;
    text-decoration:none;
    float:left;
    width: 100px;
    height: 40px;
    background:#CCC;
}

a:hover {
    background:#000;
    color:white
}

编辑：这只是基本的机制。使用CSS3，你可以采取我上面所做的，并实际构建一些非常酷的东西。

相关问题
最新问题