一些关于职位的问题在形式，css [英] some questions about positions in form, css
问题描述
我想学习HTML& CSS并尝试使用CSS3效果创建一个基本的登录表单。
演示 - http://codepen.io/anon/pen/PwaLBE
HTML
< form action =method =>
< input type =textname =usernameplaceholder =Användarnamn>
< input type =passwordname =passwordplaceholder =Lösenord>< br>
< input type =submitname =loginvalue =Logga in>
< a href =＃>Glömtlösenord？< / a>
< a href =＃>注册表< / a>
< / form>
CSS
body {
margin：0;
padding：0;
}
form {
margin-top：200px;
font-family：Helvetica，sans-serif;
text-align：center;
}
/ *输入文本动作* /
input [type =text] {
width：150px;
padding：10px;
border：solid 1px #dcdcdc;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =text]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
input [type =text]：focus {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *输入密码动作* /
input [type =password] {
width：150px;
padding：10px;
border：solid 1px #dcdcdc;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =password]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
input [type =password]：focus {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *输入提交按钮操作* /
输入[type =submit] {
margin-top：5px;
margin-left：-112px;
color：#FFFFFF;
background-color：＃16a085;
padding：10px;
border：solid 1px #FFFFFF;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =submit]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *链接操作* /
a {
font-size：12px;
transition：color 0.5s;
font-family：Helvetica，sans-serif;
text-decoration：none;
list-style：none;
color：＃3498db;
}
a：hover {
color：＃2980b9;
}
有一些问题：
$ b b
-
glömtlösenord& Registrera不在右侧的密码表中。如何正确地将链接向右移动到右边？
-
Logga in按钮似乎在左边的表单下，但放大一次或两次，位置会改变。
为什么我在输入提交时有margin-left：-112px;？ -
最后一个问题，链接Glömtlösenord& Registrera位于左侧按钮的中间，我如何将它们按下，使它们处于与左侧按钮相同的级别？
-
编辑：如果您点击按钮，将需要一些少量的时间点击，我怎么能改变这个时间，而不改变输入？
http：/ /codepen.io/anon/pen/LEraqb
body {
margin：0;
padding：0;
}
form {
margin-top：200px;
font-family：Helvetica，sans-serif;
text-align：center;
}
/ *输入文本动作* /
input [type =text] {
width：150px;
padding：10px;
border：solid 1px #dcdcdc;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =text]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
input [type =text]：focus {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *输入密码动作* /
input [type =password] {
width：150px;
padding：10px;
border：solid 1px #dcdcdc;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =password]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
input [type =password]：focus {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *输入提交按钮操作* /
输入[type =submit] {
margin-top：5px;
margin-left：-112px;
color：#FFFFFF;
background-color：＃16a085;
padding：10px;
border：solid 1px #FFFFFF;
transition：box-shadow 0.3s，border 0.3s;
}
input [type =submit]：hover {
border：solid 1px＃707070;
box-shadow：0 0 5px 1px＃969696;
}
/ *链接操作* /
a {
font-size：12px;
transition：color 0.5s;
font-family：Helvetica，sans-serif;
text-decoration：none;
list-style：none;
color：＃3498db;
}
a：hover {
color：＃2980b9;
}
1-如何将链接正确移动到表单下
=https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes =nofollow> flexboxes 可以是另一种方式。
2-缩放一次或两次，位置会改变。
一些尺寸是在像素中定义的，因此它是静态的，不会抵制所有布局。
- 关于负边距：
使用CSS阴性边缘 - 好的还是坏的做法？
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to - 使用负边距/
3-最后一个问题，链接Glömtlösenord& Registrera在左边的按钮的中间，我如何把它们按下，使它们与左边的按钮处于同一级别？
我喜欢那样！
4-如果您点击按钮，将需要一些少量的时间点击，我怎么能改变这个时间而不改变输入？ p>
css动画似乎必须在动作发生之前完成。
I'm trying to learn HTML & CSS and tried to make a basic login form with CSS3 effects. The link are here below to the code.
Demo - http://codepen.io/anon/pen/PwaLBE
HTML
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord"><br>
<input type="submit" name="login" value="Logga in">
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
There are some problems:
"glömt lösenord" & "Registrera" are not under the password form to the right. How can I move the links to the right precisely under the form to the right?
The "Logga in" button seems to be under the form to the left, but zoom once or twice and the position will change. Why do I have
margin-left: -112px;under the Input submit for? That value looks weird but its their it is under the form to the left.And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
EDIT: If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
http://codepen.io/anon/pen/LEraqb
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
1- How can I move the links to the right precisely under the form to the right?
I used a float:right
Using flexboxes could be another way.
2- zoom once or twice and the position will change.
some sizes was defined in pixel, so it is static and doesn't resists to all layouts.
- About negative margins: Using CSS Negative Margins - A Good or Bad Practice? http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
3- And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
I prefer like that!
4- If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
the css animation seems to have to finish before the action occurs.
这篇关于一些关于职位的问题在形式，css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
