1

so I am starting to learn CSS and I can't wrap my head around this. I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.

Here is a picture for further reference: enter image description here

I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.

Thanks in advance!

4

4 回答 4

2

我正在为你准备一个 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;}
于 2013-07-20T23:34:48.863 回答
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/

于 2013-07-21T00:28:01.643 回答
1

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;
}

不是最优雅的解决方案，但应该在一开始就这样做。有 - 当然 - 更复杂的解决方案......但我认为这对你来说可能也适用。

编辑

这是上面的标记和 css 作为一个工作示例。我在内部（黄色）单元格周围设置了边框，以提高可见度。

于 2013-07-20T23:37:36.343 回答
0

<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;
于 2013-07-20T23:47:44.323 回答