gpt4 book ai didi

html - 在 HTML 页面的导航栏中设计一个简单的登录部分?

转载 作者:太空宇宙 更新时间:2023-11-04 10:35:03 25 4
gpt4 key购买 nike

我是 CSS 的新手,我正在创建一个在导航栏上带有登录部分的欢迎页面。我设法创建了整个页面的 div 部分,但是我需要有关对导航栏进行 CSS 编码的帮助。

我现在拥有的 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>

这是我现在拥有的:

enter image description here

我需要向导航栏添加一个登录区域(如下所示的 2 个文本框和跨度):

enter image description here

我很难理解如何使这两个文本框、3 个标签和复选框适合导航栏。

能否指出导航栏的CSS代码来实现上述登录区域?

最佳答案

只需在导航栏的 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 .

关于html - 在 HTML 页面的导航栏中设计一个简单的登录部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36198855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com