gpt4 book ai didi

html - 在面板中登录的标题 CSS

转载 作者:行者123 更新时间:2023-11-28 12:01:21 25 4
gpt4 key购买 nike

我想知道怎么写CSS才能得到这个网站的header效果:

http://www.seek.com.au/

我复制了它的 HTML 但没有编写具有相同效果的 CSS。任何人都可以帮助 CSS 吗?

微型开发公司

<div class="Login">
<form id="LoginForm" method="POST" action="">
<div class="HeaderLogin">
<ul class="hd-login">
<li>
<ul>
<li><input type="text" id="email" name="email" placeholder="Email" size=40 maxlength=60></li>
<li><input type="password" id="password" name="password" placeholder="Password"></li>
<li class="l-column mod-multi-button">
<input type="submit" name="submit" id="submit" value="Login"></li>
</ul>
</li>
<li>
<ul class="">
<li class="">
<input checked="checked" id="RememberMe" name="RememberMe" type="checkbox" value="true">
<input name="RememberMe" type="hidden" value="false">
<label for="RememberMe">Remember me</label>
</li>
<li class="">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column mod-multi-button">
<button type="submit" id="hiddenLogInButton" name="action" value="SignIn" style="display: none">Standalone</button>
</li>
</ul>
</li>
</ul>

</form>

附言我只是想知道如何在页面标题中对齐和定位这些字段。比如header的login部分就很工整,没有用到对齐。我对 css 比较陌生,只想模仿这种风格。当我查看网站的 css 时,它看起来很复杂,有很多类之类的东西。我们可以简化 css 吗?我的意思是,我们只保留 HTML 并简化 css,因此它没有不必要的规则。

最佳答案

好的,如果您只想登录元素位置,则必要的代码是:

index.html

<html>
<head>
<title>LLM Title</title>
<link href="head.css" rel="stylesheet">
</head>
<body>
<div id="Header">
<div class="mod-banner">
<h1 class="AU-Main mod-logo">logo</h1>
</div>
<div>
<form>
<div class="mod-caption">
<ul class="mod-login">
<li>
<ul>
<li class="l-column">
<input type="text" id="username" name="email" class="state-inp-sign-in hasPlaceholder" placeholder="Email" title="Email" tooltip="Email" clickev="true"></li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in hasPlaceholder" placeholder="Password" title="Password" tooltip="Password" clickev="true"></li>
<li class="l-column">
<button type="submit" id="logInButton" name="action" value="SignIn" class="mod-button state-button-alternate state-button-exception">Sign in</button>
</li>
</ul>
</li>
<li>
<ul>
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label for="RememberMe">Remember me</label>
</li>
<li class="l-column">
<a href="./SEEK - Australia's no. 1 jobs, employment, career and recruitment site_files/SEEK - Australia's no. 1 jobs, employment, career and recruitment site.htm" data-lightbox-url="https://www.seek.com.au/Login/RestorePassword" data-lightbox-required="true">Trouble signing in?</a>
</li>
<li class="l-column">
<button type="submit" name="action" value="Register" class="mod-like-a-link" id="RegisterLinkStandalone">or register</button>
<button type="submit" name="action" value="SignIn" style="display: none">Standalone</button>
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
</div>
</body>
</html>

头部.css

body 
{
margin: 0;
}

#Header
{
position: relative;
}

.mod-caption
{
position: absolute;
top: 50%;
right: 20px;
}

.mod-login
{
display: inline-block;
margin-top: 30px;
list-style: none;
}

dl, menu, ol, ul
{
margin: 9px 0;
}

.mod-login li
{
height: 33px;
list-style: none;
}

.l-column, .l-column-overflow
{
margin-left: 18px;
overflow: hidden;
float: left;
}

.state-inp-sign-in
{
-moz-outline: none;
outline: none;
width: 130px;
height: 28px;
line-height: 24px;
}

button, input, select, textarea
{
font-size: 100%;
margin: 0;
vertical-align: baseline;
}

html, button, input, select, textarea
{
font-family: Helvetica,Arial,sans-serif;
}
.mod-banner
{
float:left;
}

希望对您有所帮助。

关于html - 在面板中登录的标题 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19861169/

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