Question

我必须创建一个导航栏，完全如下图所示。我试着整整一天。你可以看到我在下面写的唯一代码。问题是我使用了这里的方法：Separators For Navigation，但我不知道如何放置链接和边框使其看起来像在图片中。导航栏下方的橙色线不属于它。我有一个PSD Photoshop文件，我可以从中提取导航栏的元素。这是nav_border.png的来源。

target navigation bar image

my result

我的HTML代码：

<div id="navbar">
    <ul>
        <li><a href="index.html">First time at auction ?</a></li>
        <li><a href="index.html">Next auctions</a></li>
        <li><a href="index.html">Rules</a></li>
        <li><a href="index.html">Terms of use</a></li>
        <li><a href="index.html">FAQ</a></li>
        <li><a href="index.html">Contacts</a></li>
        <li></li>
    </ul>
  </div>

我的CSS代码（到目前为止）：

#navbar {
    float: left;
    width: 776px;
    height: 40px;
    border-radius: 8px 8px 0 0;
    background-color: #003366;
}
#navbar ul {
    list-style-type: none;
}
#navbar li {
    float: left;
}
#navbar a {
    color: white;
    text-decoration: none;
}
#navbar li + li{
    background:url('nav_border.png') no-repeat top left;
    padding-left: 10px;
    margin-left: 30px;
}

Answer 1

这是一个小提琴，应该让你朝着正确的方向前进

here

        // Blank Document
        @SuppressWarnings("resource")
        XWPFDocument document = new XWPFDocument();
        // Write the Document in file system
        FileOutputStream out = new FileOutputStream(new File(file_address));
        // create Paragraph
        XWPFParagraph paragraph = document.createParagraph();
        paragraph.setAlignment(ParagraphAlignment.RIGHT);

        XWPFRun run = paragraph.createRun();
        run.setFontFamily(font_name);
        run.setFontSize(font_size);
        // This only set text color not background!
        run.setColor(hex_color);

        for (String s : text_array) {
            run.setText(s);
            run.addCarriageReturn();
        }

        document.write(out);
        out.close();

没有理由使用实际模型中的任何图像，您可以使用CSS完成所有操作

如何处理导航栏使其看起来像在图片中？

1 个答案: