Question

我想设置导航栏的样式，所以它在图片上看起来像nav bar。我已经开始了，在下面的jsfiddle链接中，您可以看到我到目前为止所拥有的内容，您还可以看到，还有一些问题需要解决。

对我来说，将所有元素对齐到同一行非常重要，因为我可能会为它添加更多元素（例如输入字段和按钮）

我还希望有两种颜色的背景，如图片所示。可以说30％紫色，70％黑色。

我故意选择了T-Mobile徽标图片，因为它原本非常大。我已成功调整大小并使其适合导航，但我还想问这是否是正确/最好的事情。

提前谢谢

body {
     background: #EEE;
}

div#wrapper{
    margin: auto;
    background: white;
    width: 800px;
    height:2000px;
}

#horizNav {
    display: block;
    padding: 10px 10px 10px 10px;
    background: black;
}

img {
    max-height: 50px;
    vertical-align: middle;
}

h3 {
    color: white;
    display: inline-block;
    float: right;
 }

<body>
    <div id="wrapper">
        <nav id="horizNav">
            <img id="pageLogo" src="http://intranet.t-mobile.at/intranet/arbeitsplatz/T_Logo_magenta_schwarz_Brandneu_RGB.jpg" />
            <h3>Title</h3>
        </nav> 
    </div>
</body>

Answer 1

我不是为你编写完整的html和css，而是按照这些例子

http://fortawesome.github.io/Font-Awesome/examples/

样式化html5导航栏

1 个答案: