CSS实现登陆页面透明度的示例
前几天想着练练透明度，结果从此踏上了各种不归路。
先简单的扯两句透明度吧：
background: rgba(255, 255, 255, 0.3);
这里的最后一个就是透明度啦，满值为1，表示不透明 0代表完全透明。
透明度问题轻松解决，然后试图将button和inputbox调整为同一大小的时候却遇到了问题，为了美观，我在inputbox内设置了padding，试图将文字向右靠一些，以起到美观的作用，结果padding却不算在width内，换言之，你可能需要计算来得出你要的宽度，但这明显违背了百分比定位的原则。
关于此，可以再这里看到：盒模型-学习CSS布局
之后师匠在我的苦求之下给我写了一个示例发给我：登陆页面
顺势读了一下发现了不少好货：box-sizing: border-box;，这一点就可以解决我们计算宽度的问题，在w3school和FF出的布局教程中均有记录。
border-box:
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
如果需要取消的话，使用unset即可（或者说content-box）。
然后说说关于transform，transform是CSS3，但就表现力而言，却不仅仅是定位，可以看到，他还能旋转，xyz三个方向都可以呢，可神奇了。
transform: translateY(-38.2%);这句话就是Y轴向上38.2%（相对自己），transform可??/p>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style type="text/css">
html, body {
margin: 0 auto;
padding: 0;
height: 100%;
}
body {
background-image: url('bg.jpg');
}
.container.duel {
width: 100%;
height: 100%;
/*background: rgba(255, 255, 255, 0.2);
*/ }
.container {
margin: 0 auto;
padding: 0;
}
h1 {
margin: 0 auto;
padding: 0;
}
.input-box-line {
margin: 20px auto;
padding: 100px;
width: 15%;
/* border: 2px solid #fff;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);*/
}
.input-box-line>h1 {
margin-top: -20px;
margin-bottom: 20px;
text-align: center;
font-family: 'Microsoft Yahei';
}
input[type=text], input[type=password] {
color: #fff;
font-family: 'Microsoft Yahei Light';
margin: 5px auto;
/* padding-left: 20px;
*/ display: block;
border: 1px solid #fff;
border-radius: 5px;
background: rgba(255, 255, 255, 0);
height: 40px;
width: 100%;
}
input[type=button], input[type=submit] {
color: #fff;
font-family: 'Microsoft Yahei Light';
margin: 5px auto;
display: block;
border: 1px solid #fff;
border-radius: 5px;
background: rgba(255, 255, 255, 0);
height: 40px;
width: 100%;
}
input[type=button]:hover, input[type=submit]:hover {
background: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="container duel">
<div class="input-box-line">
<input type="text" name="usrname" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="登录">
<input type="button" value="注册">
</div>
</div>
</body>
</html>
您可能感兴趣的文章：