用html的ul和li標簽做圖片展示功能示例代碼

2020-03-24 15:49:16

字體：大中小

來源：轉載

供稿：網友

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

代碼如下:



<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">

代碼如下:



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

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML拖、放表格

下一篇：-html5 更新圖片顏色示例代碼