相対位置とオフセットを使用して美しい入力インターフェイスを作成する_CSS/HTML

相対位置とオフセット属性を使用すると、以前は画像が必要だったインターフェイスをうまく実装でき、実装も非常に便利です。たとえば、ユーザーが特定の情報を入力する必要がある場合、タイトル バー - コンテンツ - OK ボタンの構造がよく使用されます。以下は、CSS スタイルの相対位置とオフセットを使用して作成された入力インターフェイスです。主な機能は次のとおりです:

タイトル バーの画像は上向きにオフセットされています。 style: top:-10px;position:relative; を使用して、画像をコンテナから分離し、コンテナの外側に配置します (この例では、画像コンテナは class="main" の div です)。ただし、注意すべき点が 1 つあります。画像の位置はコンテナーの外にありますが、この例では、.main セレクターの高さ属性 (緑の高さ) がどのように設定されているかに関係なく、依然としてコンテナー内の一定のスペースを占めているということです。ストライプが 20px (画像の高さ) 未満になることはありません。
タイトル バーのテキストに、top、bottom、left、right の offset 属性も使用しました。最初は、テキストを垂直方向に中央揃えするために、vertical-align:middle; 属性のみを使用したかったのですが、テキストは常に最後の行に揃えられましたが、オフセットが再度使用されました。
緑のストライプは CSS フィルターを使用してグラデーション効果を生成していますが、残念ながら IE だけがそれをサポートしていると言われています:-(
最後の「OK」ボタンも相対位置決めとオフセット技術を使用しています。

CSS コード:

a:link,a:active,a:visited{}{
color: #2D4D97;
text-decoration: none;
}
a:hover {}{
テキスト装飾: なし;
カラー: #FF9900;
}
.title{}{
カラー:#006600;
表示:ブロック;
高さ:20px;
width:65%;
border:none;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.titleスパン{}{
表示:インライン;
位置:相対;
トップ:-4px;
}
.title img{}{
位置:相対;
トップ: -10px;
左: 5px;
表示:インライン;
マージン:0px 10px 0px 0px;
パディング:0px;
高さ:20px;
}
。メイン{}{
マージン:10px 20px 30px 20px;
パディング: 10px 20px 10px 20px;
幅:100%;
ボーダー:#CCCCCC 1px ソリッド;
}
。 main .item{}{
vertical-align:middle;
margin:5px 0 5px 0;
}
.main .foot{}{
position:relative;
bottom :-10px;
左:80%;
表示:ブロック;
ボーダー:#CCCCCC 1px ソリッド;
ボーダー下:なし;
幅:15%;
テキスト-align:center;
}
.main .foot a{}{
背景色:#F3FCE0;
パディング:2px;
幅:100%;
}
.main .foot a:hover{}{
背景色:#D8EBFE;
パディング:2px;
幅:100%;
}
html コード:

http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> ロールの基本情報を入力してください

🎜>

OK