用html的ul和li标签做图片展示功能示例代码
用html的ul和li标签做图片展示功能示例代码
发布时间:2016-12-27 来源:查字典编辑
摘要:把下面代码拷贝到dreamweaver的代码区域,预览时可以显示下面图片,实现了图片展示的功能#layout{width:700px;bor...

把下面代码拷贝到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>#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><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>

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

</ul>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新XHTML学习
热门XHTML学习
网页设计子分类