用html的ul和li标签做图片展示功能示例代码
导读：收集整理的这篇文章主要介绍了用html的ul和li标签做图片展示功能示例代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 把下面代码拷贝到dreamweaver 的代码区域，预览时可以显示下面图片，实现了图片展示的功能 复制...
收集整理的这篇文章主要介绍了用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="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>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用html的ul和li标签做图片展示功能示例代码
本文地址： https://pptw.com/jishu/588077.html