ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSリストグリッドレイアウト画像縦中央_Experience Exchange

CSSリストグリッドレイアウト画像縦中央_Experience Exchange

WBOYオリジナル: 2016-05-16 12:05:332121ブラウズ

<title>CSS リスト グリッド ビューのレイアウト</title>
体{
   フォントファミリー:Arial;
   テキスト整列:中央;
}

}

.img-grid{
    幅:603ピクセル;
    マージン:自動;
    オーバーフロー:非表示;
    位置:相対;
    ボーダー:実線 20px #CCCCCC;
}

.img-grid h3{
    パディング:0 0 12px 0;
    背景:#ccc;
    マージン:0;
    フォント:通常通常太字 3em/通常「ジョージア」;
    文字間隔:-0.1em;
    テキスト整列:中央;
}

.img-grid ul{
  リストスタイルタイプ:なし;
  マージン:-1px 0 0 -1px;
  パディング:0;
  幅:100%;
  ボーダー幅:0px 1px 0 0;
  位置:相対;
}

.img-grid li{
    ズーム:1;
    リストスタイルタイプ:なし;
    マージン:0;
    パディング:0;
    垂直配置:中央;
    幅:200ピクセル;
    パディング:0 0 30px 0;

テキスト整列:中央;
    位置:相対;
    ボーダー:solid 1px #dedede;
    ボーダートップカラー:#CCCCCC;
    マージン:-1px -1px 0 0;
    ボーダー幅:1px 0 0px 1px;
    フロート:左;
    表示:インライン;
    フォント:150px/normal "タイムズ ニュー ローマン";
    *パディング:0;
    *フォントサイズ:180ピクセル;
}

.img-grid li img {
  垂直配置:中央;
  背景:#fff;
  フォントサイズ:12px;
  パディング:2px;
  境界線:実線 1px #555;

}

.img-grid li a:hover{
  text-indent:0;/*IE6 で :hover をトリガーするにはこれが必要です*/
}

.img-grid li a:hover img{
  パディング:1px;
  境界線:実線 2px #336699;
}

.img-grid li 強い{
   表示ブロック;
   フォント:small/1.1 Arial;
   背景:#fff;
   位置:絶対;
   下:0;
   左:0;
   幅:100%;
    
}
.img-grid listrong a{
    表示ブロック;
    パディング:8px 4px;
    色:#336699;
    テキスト装飾:なし;
    ズーム:1;
}

.img-grid li Strong a:hover{
    テキスト装飾:下線;
}

スタイル>

<h1>CSS リスト グリッド レイアウト</h1>
<p>IE6、IE7、Safari 2、Safari 3、Firefox 2、Opera 9.21 と互換性があり、テスト済み</p>
<div class="img-grid">

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーが連れてきました。今ではフットボールは酒を飲むのが苦痛のように笑う。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーシップ ポータルは無料です。徹底したコーチング。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーシップ ポータルは無料です。完全なコーチング。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーシップ ポータルは無料です。彼は完全な威厳のあるシェイクでした。今ではフットボールは酒を飲むのが苦痛のように笑う。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーシップ ポータルは無料です。整数のディグニッシム scelerisque Massa.ndum adipiscing。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">メンバーは無料のポータルを利用できます。整数の精度今、フットボールは酒を飲んだときのように笑っている。プロイン</a></strong>

<a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg"    style="max-width:90%" alt="CSSリストグリッドレイアウト画像縦中央_Experience Exchange"></a>
        <strong><a href="#">ポータルのメンバーは自由に飲酒できます。プロイン</a></strong>

</ul>
</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLページにおける画像形式の選択についての私の意見_体験交流次の記事：HTMLページにおける画像形式の選択についての私の意見_体験交流

続きを見る

CSSリストグリッドレイアウト画像縦中央_Experience Exchange

関連記事