用html的ul和li标签做图片展示功能示例代码
2016-06-14来源:易贤网

把下面代码拷贝到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.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li>

<li><a href=#><img src=images/001.jpgwidth=70 height=70/>三亚</a></li></span>

</ul>

</div>

</body>

</html>

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息