Question

我对在css和html中编写以下设计感到非常沮丧。我需要两个导航（一个是灰色，另一个是黑色），它们拥有一个简单的段落标记，用于“呼叫我们”，然后是2个按钮（在右上角看到）。第一个按钮很简单，它打开了查看器电子邮件客户端，但其次是一个需要在点击时展开的搜索栏。我不知道如何在javascript / css中执行此操作。在第二个导航中，我只能让h1标签浮动在导航（主页）旁边。我如何在html和css中编写这两个导航？

我已经知道如何格式化渐变和颜色的背景，我需要帮助的内容放置

非常感谢所有帮助！：）

Photoshop Design

编辑：已添加代码（附近无法正确使用）

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

Answer 1

我认为此代码可以帮助您提前开发您的网站。古德勒克，如果你有任何问题，请写信给我。

<强> HTML

<div class="top-menu">
    <h1>Call on 5455234523523</h1>
    <div>
        <a href="">mail</a>
        <div class="search-box">
            <span id="search">search</span>
            <input id="search-input" type="text" />
        </div>    
    </div>
</div>
<div class="bottom-menu">

</div>

<强> CSS

body {
    font-size: 10px;
    font-family: tahoma;
    color: #fff;
}
a {
    color: #999;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;    
}
.top-menu, .bottom-menu {
    clear: both;
    width: 100%;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.top-menu {
    background-color: #000;
}
.bottom-menu {
    background-color: #999;    
}
.top-menu h1 {
    float: left;
    font-size: 11px;
    margin: 0 0 0 10px;
    font-weight: normal;
    padding: 0;
}
.top-menu > div {
    float: right;
    width: 200px;
}
.top-menu > div * {
    float: left;
    margin: 0 5px;
}
.top-menu input {
    display: none;
    width: 100px;
}
.top-menu #search {
    cursor: pointer;
}

<强>的jQuery

$('#search').click(function(){
    $('#search-input').toggle();
});

<强>样本

http://jsfiddle.net/LZYsA/

HTML：2个导航导致问题

1 个答案: