• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    用html的ul和li标签做图片展示功能示例代码
    POST TIME:2021-10-16 22:36
    把下面代码拷贝到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.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>

  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信