css里面li标签怎么加图片_用html的ul和li标签做图片展示功能示例代码

把下面代码拷贝到dreamweaver 的代码区域，预览时可以显示下面图片，实现了图片展示的功能

复制代码代码如下:

复制代码代码如下:

#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;

}

复制代码代码如下:

三亚

三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚 三亚