Question

我有一个固定的透明导航栏，我正在尝试获取图像，甚至只是左边的文本。以下是我正在使用的html代码和css代码：

------------------------------------------- html code-- ----------------------------------------------

<!DOCTYPE html>
<html lang="en-US">
<head>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <title>Home</title>
</head>
<body>
    <div id="navigation">
        <b>
            <a href="#">Home</a>
            <a href="#">Portfolio</a>
            <a href="#">Our Apps</a>
            <a href="#">Support</a>
            <a href="#">Press</a>
            <a href="#">About</a>
        </b>
    </div>

    <div id="content">
        Content Here!
    </div>
</body>
</html>

----------------------------------------------- --CSS代码------------------------------------------

body {
    padding: 0; /* Gets rid of the automatic padding */
    margin: 0;  /*  on HTML documents */
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

#navigation {
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 20px;
    padding-top: 5px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: rgba(1, 1, 1, 0.8);
    color: rgba(1, 1, 1, 0.8);
}

#navigation a {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
}

#navigation a:hover {
    color: grey;
}

#navigation a:visited {
    color: white;
}
#content {
    width: 80%;
    padding-top: 70px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

感谢您的帮助！ -Aaron

Answer 1

我想你需要进一步解释，但如果我正确地理解了你想要的东西，你可以试试这个：

#navigation {
    background-image: url('path/to/img.gif');
}

Answer 2

你可以使用css浮动。

CSS

#navigation div.block-left {
   float: left;
}

#navigation div.block-right {
   float: right;
}

HTML

   <div id="navigation">
   <div class="block-left">
     Put stuff here!
   </div>
    <div class="block-left">
      <b>
        <a href="#">Home</a>
        <a href="#">Portfolio</a>
        <a href="#">Our Apps</a>
        <a href="#">Support</a>
        <a href="#">Press</a>
        <a href="#">About</a>
      </b>
    </div>

因为两个块都是左浮动的，所以它们将按从左到右的顺序堆叠。

此外，你不应该再使用afaik它已被弃用。更好的选择是

将图像左侧对齐固定导航栏

2 个答案: