Utilisez le positionnement relatif et le décalage pour créer une belle interface d'entrée_CSS/HTML

En utilisant les attributs de positionnement relatif et de décalage, l'interface qui devait auparavant être réalisée avec des images peut être bien réalisée, et elle est également très pratique à mettre en œuvre. Par exemple, lorsque les utilisateurs doivent saisir certaines informations, nous utilisons souvent la structure barre de titre - contenu - bouton OK. Voici une interface de saisie réalisée en utilisant le positionnement relatif et le décalage des styles CSS. Les principales fonctionnalités sont :

L'image de la barre de titre a un décalage vers le haut. Utilisez le style : top:-10px;position:relative; pour séparer l'image du conteneur et la positionner à l'extérieur du conteneur (dans cet exemple, le conteneur d'image est un div avec class="main"). Mais une chose à noter est que même si la position de l'image est hors du conteneur, elle occupe toujours un certain espace dans le conteneur. Dans cet exemple, quelle que soit la manière dont l'attribut height du sélecteur .main est défini, la hauteur du vert. la bande ne sera jamais inférieure à 20px (la hauteur de l'image).
J'ai également utilisé les attributs offset top, bottom, left et right pour le texte dans la barre de titre. Au début, je voulais simplement utiliser l'attribut vertical-align:middle pour centrer le texte verticalement, mais cela a échoué. . Le texte était toujours aligné avec la ligne du bas, mais le décalage était à nouveau utilisé.
La bande verte utilise un filtre CSS pour produire un effet de dégradé, mais malheureusement, il est dit que seul IE la prend en charge :-(
Le bouton "OK" à la fin utilise également la technologie de positionnement relatif et de décalage.

Code CSS :

a:link,a:active,a:visited{}{
couleur : #2D4D97;
text-decoration : none;
}
a:hover {}{
décoration de texte : aucun ;
couleur : #FF9900;
}
.title{}{
couleur :#006600;
affichage:bloc;
hauteur: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;
gauche : 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;
gauche:80%;
display:block;
border:#CCCCCC 1px solid;
border-bottom:none;
width:15%;
texte -align:center;
}
.main .foot a{}{
background-color:#F3FCE0;
padding:2px;
width:100%;
}
.main .foot a:hover{}{
background-color:#D8EBFE;
padding:2px;
width:100%;
}
code html :

http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> Veuillez remplir les informations de base du rôle

                                                                                                                                                         🎜> 
 

OK