A few days ago thinking about practicing transparency, the result set foot on a variety of no return.
Let's start with a simple two-sentence transparency:
Background:rgba (255, 255, 255, 0.3);
The last one here is transparency, with a full value of 1, which means that opaque 0 represents full transparency.
The transparency problem solves easily, then attempts to adjust the button and the InputBox to the same size time but encountered the question, in order to be beautiful, I set up in the InputBox inside the padding, attempts to put the text to the right by some, in order to play the esthetic function, The result padding is not in the width, in other words, you may need to calculate the width you want, but this is clearly contrary to the principle of percentage positioning.
About this, you can see here again: Box model-Learn CSS layout
Then the craftsman wrote an example to me under my bitter Request: landing page
Homeopathy read a few found a lot of good goods: Box-sizing:border-box, this can solve our calculation of the width of the problem, in the W3school and ff out of the layout tutorial are recorded.
Border-box:
The width and height of the element determines the bounding box of the element.
That is, any inner margin and border that you specify for an element will be drawn within the width and height you have set.
The width and height of the content can be obtained by subtracting the border and the inner margin from the set width and height respectively.
If you need to cancel, use unset (or Content-box).
Then say about Transform,transform is CSS3, but in terms of expressiveness, but not just positioning, you can see, he can also rotate, xyz three directions can be, but magical.
Transform:translatey (-38.2%); This sentence is the Y axis up to 38.2% (relative to oneself), transform?? /p>
Example
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Login Page </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>
<body>
<div class= "Container Duel"
& Nbsp;<div class= "Input-box-line" "
<input type=" text "name=" Usrname "placeholder=" username ""
<input type= "password" name= "password" placeholder= "password"
<input type= "Submit" value= "Login"
<input type= "button" value= "registration"
</div>
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
