用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 更新图片颜色示例代码