首頁 > web前端 > html教學 > 用html的ul和li標籤做圖片展示功能範例程式碼_HTML/Xhtml_網頁製作

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

WBOY
發布: 2016-05-16 16:38:44
原創
2835 人瀏覽過

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







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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板