今天小编跟大家讲解下有关用html的ul和li标签做图片展示功能示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关用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样式 包括一个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="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li> <li><a href=""><img src="https://www.aidi.net.cn//web/images/001.jpg"width="70"height="70"/>三亚</a></li></span> </ul> </div> </body> </html>来源：爱蒂网
