HTML ul および li タグを使用して画像を表示するサンプルコード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され、画像表示機能が実現します。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<スタイルタイプ="text/css">

コードをコピー

コードは次のとおりです。

<span style="color:#990000;">#layout{width:700px;border:2px solid #ccc;padding:2px;overflow:auto;zoom:1;diaplay:inline;}
#レイアウト ul{リストスタイル:なし;}
#レイアウト li {
リストスタイルタイプ: 正方形;
繰り返しなし 0px 4px;
パディング左:20px;
}
本文{マージン:0 自動;フォントサイズ:12px;フォントファミリー:Verdana;行の高さ:1.5;}
ul、dl、dt、dd、h1、h2、h3、h4、h5、h6、フォーム{パディング:0;マージン:0;}
画像{ボーダー:0px;}
#レイアウト ul li a img {
パディング: 1px;
境界線: 1px 実線 #elelel;
下マージン:3px;
表示:ブロック;
}
{色:#05a;テキスト装飾:なし;}
ホバー{color:#f00;}
#レイアウト ul li {
フロート: 左;
幅: 72px;
上マージン: 20px;
右マージン: 0px;
下マージン: 0px;
左マージン: 20px;
テキスト配置: 中央;
}
#レイアウト ul li a {
表示: ブロック;
}
#レイアウト ul li a:hover img {
パディング: 0px;
境界線: 2px 実線 #FF6600;
</span>
</スタイル>
</head>
<本文>
<div id="レイアウト">

コードをコピー

コードは次のとおりです。

<ul>
<span style="color:#993300;"><li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>サンヤ</a></li></span>
</ul>
</div>
</本文>
</html>