CSS: Using relative positioning and offset to make exquisite input interface

Css

Using relative positioning and offset attributes, we can realize the interface that needs to be realized by picture before, and it is very convenient to realize it. For example, when users are required to enter some information, we often use the title bar-content-to determine the structure of the button, the following is the use of CSS style relative positioning and offset to do the 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 for class= "main"). But one thing to be aware of is that the picture position is out of the container, but it still occupies a certain space in the container, in this case, no matter how the setting. Main Selector's Height property, the green stripes are never less than 20px (the height of the picture).

The text of the title bar I also used top,bottom,left,right these offset attributes, at first want to use only vertical-align:middle; attribute to the vertical center of the text, but failed, the text has been aligned with the bottom line, but also used the offset. Green stripes Use a CSS filter to produce a gradient effect, but it is said that only IE support:-( The end "OK" button is also a technique with relative positioning and offset.

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:

<div class= "title" >
<span> please fill in the role basic information </span>
</div>
<div class= "Main" >
<div class= "Item" > Role name:
<input name= "TextField" type= "text" size= "/>"
</div>
<div class= "Item" > Role Description:
<textarea name= "Textfield2" cols= "rows=" 5 "></textarea>
</div>
<div class= "Foot" >
<a href= "#nogo" > OK </a></div>
</div>