用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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">



拷贝编码
编码以下:

<!--下面界定了css款式,包含1个div即layout,和ul,li,img等标识-->
<span style="color:#990000;">#layout{width:700px;border:2px solid #ccc;padding:2px;overflow:auto;zoom:1;diaplay:inline;}
#layout ul{list-style:none;}
#layout li {
list-style-type: square;
no-repeat 0px 4px;
padding-left:20px;
}
body{margin:0 auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{padding:0;margin:0;}
img{border:0px;}
#layout ul li a img {
padding: 1px;
border: 1px solid #elelel;
margin-bottom:3px;
display:block;
}
a{color:#05a;text-decoration:none;}
a:hover{color:#f00;}
#layout ul li {
float: left;
width: 72px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
text-align: center;
}
#layout ul li a {
display: block;
}
#layout ul li a:hover img {
padding: 0px;
border: 2px solid #FF6600;
}</span>
</style>
</head>
<body>
<div id="layout">


拷贝编码
编码以下:

<!--下面是把照片界定成li标识,并设定了高宽比和宽度,只必须把照片所放部位src的相对路径和照片名字001.jpg改动便可-->
<ul>
<span style="color:#993300;"><li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>3亚</a></li></span>
</ul>
</div>
</body>
</html>