0

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

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

非常感谢所有帮助！:)

Photoshop设计

编辑：添加代码（它几乎不正确）

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

4

1 回答 1

0

我认为这段代码可以帮助您提前开发您的网站。祝你好运，如果您有任何问题，请写信给我。

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/

于 2013-04-24T07:57:56.260 回答