用html的ul和li標籤做圖片展示功能範例程式碼_HTML/Xhtml_網頁製作

把下面代碼拷貝到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-bot-bot-bot : 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;
}

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼

• 三亞


• 三亞


• 三亞


• 三亞


• 三亞

三亞

• 三亞


• 三亞


• 三亞


• 三亞


• 三亞


• 三亞


• 三亞


• 三亞


• 三亞 a>