Question

所以我开始学习CSS，我无法解决这个问题。我想制作一个由3个图像组成的水平导航栏。这些是打印图像，“填充图像”和结束图像。

这是一张图片供进一步参考： enter image description here

我真的不知道如何去做这件事，我也无法在网上找到任何这样的例子。

提前致谢！

Answer 1

我正在为你准备一个jsfiddle演示，坚持下去。它非常难看，但它应该为你提供一个如何调整它的起点，以便它可以按你的需要工作。 http://jsfiddle.net/T9FXD/

标记：

<div>
 <div class="first"></div>
 <nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
 </nav>
 <div class="last"></div>

CSS：

div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}

Answer 2

我在这个派对上迟到了一个小时，但这些答案中的大多数都是标记过度杀伤力。无序的链接列表包含您需要的所有样式挂钩。基本上，在第一个li上留下填充并放入左图像。在最后一个li上填充并放入右图。 a上的主要图片。

html：

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

css：

    ul.example {
        margin:0;
        padding:0;    
        font-size:0; /*this gets rid of the gaps between the items*/
    }
    ul.example li {
        display:inline-block; /*this puts them all in a row*/
        margin:0;
    }
    ul.example li:first-child {
        padding-left:10px; /*set this to the width of your left image*/
        background-image: url(http://dummyimage.com/10x61/f00/fff);
        background-repeat:no-repeat;
    }
    ul.example li:last-child {
        padding-right: 10px; /*set this to the width of your right image*/
        background-image: url(http://dummyimage.com/10x61/00f/fff);
        background-repeat:no-repeat;    
        background-position: top right;
    }
    ul.example li a {
        font-size:16px; /*important to set this, as the ul has 0 height text*/
        display:block;
        height:61px;
        line-height:61px;
        text-align:center;
        width:100px;
        background-image: url(http://dummyimage.com/1x61/0f0/fff);
    }

http://jsfiddle.net/EKacC/

Answer 3

HTML：

<div class="wrapper">
    <div class="firstImage">
    <!-- no content, simply assign a background-image -->
    </div>

    <div class="headerContent">
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <div class="headerElement"></div>
        <!-- as many as items as you have -->
    </div>

    <div class="lastImage">
        <!-- no content, simply assign a background-image -->
    </div>
</div>

CSS：

.firstImage {
    float: left;
    background-color: red;
    width: 50px;
    height: 150px;
}

.lastImage {
    background-color: blue;
    float: left;
    min-width: 50px;
    height: 150px;
}

.headerElement {
    float: left;
    background-color: yellow;
    width: 50px;
    height: 150px;   
    border: 1px solid black;
}

不是最优雅的解决方案，但应该从头开始。当然 - 有更复杂的解决方案......但我认为这对你来说也许有用。

修改

Here是以上标记和css作为工作示例。我在内部（黄色）细胞周围放置了边框，以提高可视性。

Answer 4

坚持使用<div>元素。尽管表处理得很好，但由于加载速度较慢，因此会更加折旧。

就像你描绘的图像一样，有3个主框。

<强> HTML：

<div class="element1"></div>
<div class="element2">
 <ul>
   <li>Home</li>
   <li>About</li>
   <li>Forum</li>
   <li>Content</li>
  </ul>
</div>
<div class="element3"></div>

<强> CSS：

如果您有空div元素，请务必在CSS中设置尺寸，以便它可以显示您想要显示的图像。

.element1, .element2 {
 width:10px; height:100px;
}

对于图像本身。

background:url('...') no-repeat;

带图像的水平导航栏

4 个答案: