gpt4 book ai didi

css - 使用 CSS/HTML5 的横向组织

转载 作者:太空宇宙 更新时间:2023-11-04 00:23:08 26 4
gpt4 key购买 nike

the goal

以上是我试图创建的登录表单(尽管在右括号“注册”之后应该有一个“登录”的镜像)。我无法让对象按照我的意愿水平排列。第二张图片(下图)显示了我所拥有的。哎呀。

hmmm, we've got work to do

我显然不想要它周围的字段集,但我在那里尝试对用户名和密码字段进行分组。到目前为止,这是我的代码。 HTML:

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery1-6.4.min.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}login.css" type="text/css"/>
</head>
<script>
function login(){
if($('username').text === '') alert('Please enter your username');
else if($('password') === '') alert('Please enter your password');
$('loginForm').submit();
}
</script>

<body>
<img src="{{ STATIC_URL}}logo.png" class='center'>
<br/>
<span class='login_signup_button'>
<a title='click to login' onClick='login()'>
login
</a>
</span>
<form method = 'POST' action='login' id='loginForm'>
<fieldset>
<label for="username">username</label>
<input type="text" id="username" face="helvetica"/>
</br>
<label for="password">password</label>
<input type="password" id="password" face="AmericanTypewriter"/>
</fieldset>
</form>
<span class='login_signup_button' value='submit'>
<a title='signup for omnicloud' href='signup' class='login_signup_button'>
signup
</a>
</span>
</body>

和 CSS(导入到 HTML 中):

@font-face{
font-family:AmericanTypewriter;
src:url('AmericanTypewriter.TTF');
}

body{
background-color:rgb(48,94,255);
}

image.center{
/*display: block; */
margin-left: auto;
margin-right: auto;
width:500px;
}

/* Used for braces */
h1{
font-family:AmericanTypewriter;
font-size:234pt;
color:rgb(249,255,41);
}

/* Used for login, signup, username, password */
p{
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}

fieldset{
border: 10px solid rgb(255,255,255);
width: 500px;
margin: auto;
}

a{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}

.login_signup_button button{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255)
border-bottom:0;
border-right:0;
border-top:0;
border-left:0;
display:block;
}
.login_signup_button a:hover{
background-color:rgb(249,255,41);
color:rgb(48,94,255);
}

编辑:更新代码以修复登录操作,添加 js 函数,为 s 格式化标签

最佳答案

类似于 this . (只是一个粗略的开始)。

请注意,我在括号中使用了图像(此处未显示)。我不知道您使用的是哪个版本的 American Typewriter,但我怀疑它在那个尺寸下看起来会那么薄,而且可能不值得为这两个字符加载整个字体重量。有时图像更好,即使它可能看起来不那么优雅。

请注意,我是 Logo 的常用图像替换技术。这对 SEO 来说比简单地使用 <img> 更好。与替代文字。 (如果您选择该路线,则应始终包括在内。)

编辑:如果你确实想使用括号的字体,你可以尝试使用 CSS :before and :after pseudo-classes添加字段集周围的内容或您用作这些表单元素容器的任何内容。

关于css - 使用 CSS/HTML5 的横向组织,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8130333/

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