Use relative positioning and offset to create a beautiful input interface_CSS/HTML

Using relative positioning and offset attributes, you can well implement interfaces that previously required pictures, and it is also very convenient to implement. For example, when users are required to input certain information, we often use the structure of title bar - content - OK button. The following is an input interface made using the relative positioning and offset of CSS styles. The main features are:

The title bar image has an upward offset. Use the style: top:-10px;position:relative; to separate the image from the container and position it outside the container (in this example, the image container is a div with class="main"). But one thing to note is that although the image position is out of the container, it still occupies a certain space in the container. In this example, no matter how the height attribute of the .main selector is set, the height of the green stripe will never be less than 20px ( the height of the image).
I also used the offset attributes of top, bottom, left, and right for the text in the title bar. At first, I wanted to only use the vertical-align:middle; attribute to center the text vertically, but it failed. The text was always aligned with the bottom line. , but the offset was used again.
The green stripe uses a CSS filter to produce a gradient effect, but unfortunately it is said that only IE supports it:-(
The "OK" button at the end also uses relative positioning and offset technology.

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:

http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> Please fill in the basic information of the role