Question

我想创建一个与此类似的页面：

Sample Image

我试图做以下事情而无法继续前进。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="header">
        <!--menu-->
    </div>

    <div class="container">
        <form>
            <div class="group">
                <input type = "text" placeholder = "Your Name" id = "name"/>
            </div>
            <div class="group">
                <input type = "email" placeholder = "Enter Your Email" id = "email"/>
            </div>
            <div class="group">
                    <input type = "password" placeholder = "Password" id = "password"/>
                    <input type = "password" placeholder = "Confirm Password" id = "password"/>
            </div>

                <div class="submit"><input id = "submit" type="submit" name= "formSubmit" value="CREATE A FREE ACCOUNT" class="btn"/></div>   
        </form>
    </div>
</body>
</html>

CSS：

body{
    background-image: url(images/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Roboto', sans-serif;
}
.container{
    width: auto;
    background-color: #FFFFFF;
    height: 300px;
    padding: 30px;
    border-radius: 30px;
}
.forms{
    background-color: #FCFCFC;
}
input{
    font-family: 'Roboto', sans-serif;
    border-radius: 2px;
}
input#name{
    background-image: url(images/name.jpg);
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: center left;
    border:none;
    padding-left: 50px;
    margin-top: 10px;
    width: 400px;
    height: 40px;
}
input#email{
    margin-top: 10px;
    background-image: url(images/mail.jpg);
    background-size: 7%;
    background-repeat: no-repeat;
    background-position: center left 6px;
    border:none;
    padding-left: 50px;
    width: 400px;
    height: 40px;
    font-size: :16px;
}
input#password{
    margin-top: 20px;
    background-image: url(images/pass.png);
    background-size: 7%;
    background-repeat: no-repeat;
    background-position: center left 6px;
    border:none;
    padding-left: 50px;
    width: 170px;
    height: 40px;
    margin-right: 4px; 
}

input#submit{
    margin-top: 10px;
    background-color: #A5ABB0;
    border: none;
    height: 50px;
    width: 447px;   
     cursor: pointer;
    font-weight: 400;
    font-size: 17px;
    color: white;

}

.group{
    margin: 18px auto;
    border-bottom: 2px solid #BEBEBE;
    overflow: hidden;
}

我尝试了几件事，但他们不会发生，并不是一切都按预期进行。

请帮帮我

Answer 1

如果您尝试在输入区域应用css，则将选择器写为...

input[type="text"]

或

input [type="password"]

或

input [type="submit"]

- 如果您在css上面临另一个问题，请正确描述.... thx。

Answer 2

你几乎得到了它。您只需要为width提供margin和<form>：

<!DOCTYPE html>
<html>
  <head>
    <title>Sign Up</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <!--menu-->
    </div>

    <div class="container">
      <form>
        <div class="group">
          <input type = "text" placeholder = "Your Name" id = "name"/>
        </div>
        <div class="group">
          <input type = "email" placeholder = "Enter Your Email" id = "email"/>
        </div>
        <div class="group">
          <input type = "password" placeholder = "Password" id = "password"/>
          <input type = "password" placeholder = "Confirm Password" id = "password"/>
        </div>

        <div class="submit"><input id = "submit" type="submit" name= "formSubmit" value="CREATE A FREE ACCOUNT" class="btn"/></div>   
      </form>
    </div>
  </body>
</html>

和CSS

body{
  background-image: url(images/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Roboto', sans-serif;
  background-color: #00f;
}
.container{
  width: 50%;
  margin: 125px auto 0;
  background-color: #FFFFFF;
  height: 300px;
  padding: 30px;
  border-radius: 30px;
}
.forms{
  background-color: #FCFCFC;
}
input{
  font-family: 'Roboto', sans-serif;
  border-radius: 2px;
}
input#name{
  background-image: url(images/name.jpg);
  background-size: 10%;
  background-repeat: no-repeat;
  background-position: center left;
  border:none;
  padding-left: 50px;
  margin-top: 10px;
  width: 400px;
  height: 40px;
}
input#email{
  margin-top: 10px;
  background-image: url(images/mail.jpg);
  background-size: 7%;
  background-repeat: no-repeat;
  background-position: center left 6px;
  border:none;
  padding-left: 50px;
  width: 400px;
  height: 40px;
  font-size: :16px;
}
input#password{
  margin-top: 20px;
  background-image: url(images/pass.png);
  background-size: 7%;
  background-repeat: no-repeat;
  background-position: center left 6px;
  border:none;
  padding-left: 50px;
  width: 170px;
  height: 40px;
  margin-right: 4px; 
}

input#submit{
  margin-top: 10px;
  background-color: #A5ABB0;
  border: none;
  height: 50px;
  width: 447px;   
  cursor: pointer;
  font-weight: 400;
  font-size: 17px;
  color: white;

}

.group{
  margin: 18px auto;
  border-bottom: 2px solid #BEBEBE;
  overflow: hidden;
}

输出：http://jsbin.com/zorelitema

CSS中的某些元素不起作用

2 个答案: