我对用 css 和 html 编写以下设计感到非常沮丧。我需要两个导航(一个灰色,另一个黑色),它们拥有一个简单的“呼叫我们”段落标签,然后是 2 个按钮(见右上角)。第一个按钮很简单,它打开查看者的电子邮件客户端,但第二个按钮是一个搜索栏,点击后需要展开。我不确定如何在 javascript/css 中执行此操作。在第二个导航中,我只能让 h1 标签浮动在导航(主页)旁边。我将如何在 html 和 css 中对这两个导航进行编码?
我已经知道如何以渐变和颜色格式化背景,这是我需要帮助的内容的放置
非常感谢所有帮助!:)
编辑:添加代码(它几乎不正确)
<div id="top-nav-bar">
<div class="container">
<ul class="top-nav">
<li><p>Call us 1234 567 891</p><li>
<li> <a href="mailto:"><img src="img/mail.png"/></a></li>
<li><form class="sidebar-search"><div class="input-box"><a class="remove"href="javascript:;"></a><input type="text"></input><input class="submit" type="button" value="text"></input></div></form></li>
</ul>
</div>
</div>
<header id="header">
<div class="container">
<div class="sixteen columns">
<nav id="nav">
<ul>
<li class="h1-logo"><h1>Logo</h1></li>
<li><a href="index.html">home</a></li>
<li><a href="properties.html">lease</a></li>
<li><a href="manage.html">manage</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</div>
</div>