HTMLページのNavbarで簡単なログインセクションを設計しますか？

私はCSSを初めて使用しており、navbarにログインセクションを持つようこそページを作成しています。ページのdivセクション全体を作成することができましたが、navbarをコーディングするCSSのヘルプが必要です。HTMLページのNavbarで簡単なログインセクションを設計しますか？

私が今持っているものの

CSS：

div.col-4 
{ 
    width:41%; 
    float:left; 
    background: #ffffff; 
    height: 100%; 
} 

div.col-6 
{ 
    width:58%; 
    float:right; 
    background: #ffffff; 
    height: 100%; 
} 

#topbar-hello{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:80px; 
    background-color:#0084fd; 
}

HTML：

<body> 

    <div id="topbar-hello"> 
      <!-- This is where I need to add the login section --> 
    </div> 

    <div class="col-4"> 

    </div> 

    <div class="col-6"> 

    </div> 
</body>

これは私が今持っているものです：

は私がナビゲーションバーに（2つのテキストボックスおよびスパン下記のとおり）ログインエリアを追加する必要があります。

私はこれら二つのテキストボックス、3枚のラベルやチェックボックスをフィットする方法を理解する難しさを持っていますnavbarに。

上記のログイン領域を達成するためにnavbarのCSSコードを指摘できますか？

出典

2016-03-24 Dinuka

[Bootstrap Navbar]（http://getbootstrap.com/components/#navbar）が大いに役立つかもしれません。 – rmondesilva

私は学習目的のためにブートストラップを使用せずに書き込もうとしています:) @rmondesilva – Dinuka

navbarのdivの中にコードを書くだけです。そのスタイルのログインフォームでtableを使用することができます。

<div id="topbar-hello"> 
    <table> 
    <tr> 
     <td> 
     Email 
     </td> 
     <td> 
     Password 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text" /> 
     </td> 
     <td> 
     <input type="password" /> 
     </td> 
     <td> 
     <button> 
     Log In 
     </button> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="checkbox" /> Remember me 
     </td> 
     <td> 
     Forgot Password 
     </td> 
    </tr> 
    </table> 
     <!-- This is where I need to add the login section --> 
</div> 

<div class="col-4"> 

</div> 

<div class="col-6"> 

</div>

ここにはjsFiddleと表示されます。

出典

2016-03-24 14:11:39 rmondesilva

ナビゲーションバーの高さを上げる必要があります。次に、HTMLを使用してログイン領域を追加します。

は、それは少し次のようになります。あなたが望むよう

<body> 

    <p>Email</p> 
    <p>Password</p> 

    <p> 
     <input type="text" placeholder="Email"> 
     <input type="text" placeholder="Password"> 
     <button>Log in</button> 
    </p> 

</body>

あなたはそれをスタイルすることができます。

出典

2016-03-24 11:26:43

はい私は2番目の写真でその外観を達成するためにスタイリングを知りたかったです。それは質問だった:) – Dinuka

@Earthling入力/ pタグのそれぞれのmargin-left/margin-topの値を変更するだろう。 –

HTMLページのNavbarで簡単なログインセクションを設計しますか？

答えて

関連する問題