让我的登录页面响应？ [英] Made my login page responsive ?
本文介绍了让我的登录页面响应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有非常简单的登录页面，因为我是网页设计师的初学者，这是我的代码
style.css文件
* {
保证金：0;
填充：0;
-webkit-box-sizing：border-box;
-moz-box-sizing：border-box;
box-sizing：border-box;
}
body
{
保证金：100px auto;
background-image：url（'../ img / bg.jpeg'）;
-webkit-background-size：cover;
background-repeat：no-repeat;
background-size：cover;
background-repeat：no-repeat;
}
.container {
宽度：500px;
身高：400px;
text-align：center;
background-color：rgba（51,51,51,0.2）;
保证金：0自动;
margin-top：150px;
border-radius：4px;
}
.container img {
宽度：120px;
身高：120px;
margin-top：-60px;
保证金底部：30px;
}
输入[type =text]，输入[type =password] {
height：45px;
宽度：300px;
字体大小：18px;
border：none;
margin-bottom：20px;
background-color：#fff;
padding-left：40px;
border-radius：4px;
}
.form-input :: before {
content：\ f007;
仓位：绝对;
font-family：FontAwesome;
padding-left：5px;
颜色：＃999999;
padding-top：7px;
字体大小：35px;
}
.form-input：nth-child（2）:: before {
content：\ f023;
}
.btn-login {
padding：15px 30px;
cursor：pointer;
color：#fff;
background-color：＃006600;
border-radius：4px;
border：none;
border-bottom：4px solid＃004d00;
margin-bottom：20px;
}
a {
color：#fff;
}
这是我的index.html文件
<！DOCTYPE html>
< html>
< head>
< title>
< / title>
< link rel =stylesheettype =text / csshref =css / style.css>< / link>
< link rel =stylesheethref =http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css>
< / head>
< body>
< div class =container>
< img src =img / login.png/>
< form>
< div class =form-input>
< input type =textname =usernameplaceholder =Enter Username>
< / div>
< div class =form-input>
< input type =passwordname =paswwordplaceholder =Enter Password>
< / div>
< input type =submitname =submitvalue =LOGINclass =btn-login>
< br />
< a href =＃>忘记密码？< / a>
< / form>
< / div>
< / body>
< / html>
我尝试过：
我只需要你让我正确的方式，因为我是初学者，请帮助我：）
解决方案
检查这些out：
1. 响应式网页设计基础知识 [ ^ ]
2. 三响应网页设计 [ ^
I have very simple login page as I'm beginner in web designer and this is my code
the style.css file
*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body
{
margin: 100px auto;
background-image:url('../img/bg.jpeg');
-webkit-background-size:cover;
background-repeat:no-repeat;
background-size:cover;
background-repeat:no-repeat;
}
.container{
width:500px;
height:400px;
text-align:center;
background-color:rgba(51, 51, 51,0.2);
margin:0 auto;
margin-top:150px;
border-radius:4px;
}
.container img{
width:120px;
height:120px;
margin-top:-60px;
margin-bottom:30px;
}
input[type="text"],input[type="password"]{
height:45px;
width:300px;
font-size:18px;
border:none;
margin-bottom:20px;
background-color:#fff;
padding-left:40px;
border-radius:4px;
}
.form-input::before{
content:"\f007";
position:absolute;
font-family:"FontAwesome";
padding-left:5px;
color:#999999;
padding-top:7px;
font-size:35px;
}
.form-input:nth-child(2)::before{
content:"\f023";
}
.btn-login{
padding :15px 30px;
cursor:pointer;
color:#fff;
background-color:#006600;
border-radius:4px;
border:none;
border-bottom:4px solid #004d00;
margin-bottom:20px;
}
a{
color:#fff;
}
and this is is my index.html file
<!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="css/style.css"></link> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css"> </head> <body> <div class="container"> <img src="img/login.png"/> <form> <div class="form-input"> <input type="text" name="username" placeholder="Enter Username"> </div> <div class="form-input"> <input type="password" name="paswword" placeholder="Enter Password"> </div> <input type="submit" name="submit" value="LOGIN" class="btn-login"> <br/> <a href="#">Forget Password?</a> </form> </div> </body> </html>
What I have tried:
I just need you to put me to right way as I'm beginner , help me please :)
解决方案
Check these out:
1. Responsive Web Design Basics[^]
2. The Three R’s of Responsive Web Design[^]
这篇关于让我的登录页面响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
