Use relative positioning and offset to make fine input interface _css/html

With the relative positioning and offset properties, it is very good to realize the interface which needs to be realized by the image before, and it is very convenient to realize it. For example, when a user is required to enter some information, we often use: Title bar-Content-to determine the structure of the button, the following is the use of CSS style relative positioning and offset input interface. The main features are:

The title bar picture has an upward offset. Use style: top:-10px;position:relative; You can leave the picture out of the container and position it outside the container (the container for the picture in this example is the div class= "main"). One thing to note, though, is that the image position is out of the container, but it still occupies a certain amount of space in the container, in this case, regardless of how it is set. The Height property of the main selector will always be less than 20px (the height of the image).
The text of the title bar I also used the top,bottom,left,right these offset properties, initially want to only use vertical-align:middle; Attributes let the text vertically center, but failed, the text has been aligned with the bottom line, but also used the offset.
The green stripe uses CSS filters to produce gradients, but it is said that only IE supports:-(
The end "OK" button is also used for relative positioning and offset techniques.

CSS code:

a:link,a:active,a:visited{}{
Color: #2D4D97;
Text-decoration:none;
}
A:hover {} {
Text-decoration:none;
Color: #FF9900;
}
. title{}{
Color: #006600;
Display:block;
height:20px;
width:65%;
Border:none;
Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=1,startcolorstr= #FFD9E7CB, endcolorstr= #00FFFFFF );
}
. Title span{}{
Display:inline;
position:relative;
top:-4px;
}
. Title img{}{
position:relative;
Top: -10px;
left:5px;
Display:inline;
margin:0px 10px 0px 0px;
padding:0px;
height:20px;
}
. main{}{
margin:10px 20px 30px 20px;
padding:10px 20px 10px 20px;
width:100%;
border: #CCCCCC 1px solid;
}
. Main. item{}{
Vertical-align:middle;
margin:5px 0 5px 0;
}
. Main. foot{}{
position:relative;
bottom:-10px;
left:80%;
Display:block;
border: #CCCCCC 1px solid;
Border-bottom:none;
width:15%;
Text-align:center;
}
. Main. Foot a{}{
Background-color: #F3FCE0;
padding:2px;
width:100%;
}
. Main. Foot a:hover{}{
Background-color: #D8EBFE;
padding:2px;
width:100%;
}
HTML code:

please fill in the role basic information


Role Name:


Role Description:



Are you sure

