0

次のデザインを css と html でコーディングすることに非常に不満を感じています。「Call us」用の単純な段落タグと 2 つのボタン (右上に表示) を持つ 2 つのナビゲーション (1 つはグレー、もう 1 つは黒) が必要です。最初のボタンはシンプルで、閲覧者の電子メール クライアントを開きますが、2 番目のボタンはクリックすると展開する必要がある検索バーです。javascript/css でこれを行う方法がわかりません。2 番目のナビゲーションでは、h1 タグをナビゲーション (ホーム) のすぐ隣に浮かせることしかできません。これら 2 つのナビゲーションを 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>

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 に答える