美文网首页
图片列表

图片列表

作者: 沙子_32c6 | 来源:发表于2018-09-12 21:42 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
<title>图片列表</title>
<style type="text/css">
    *{
        padding:0px;
        margin:0px;
    }
    .box1{
        width:958px;
        height:267px;
        border:1px black solid;
        margin:100px auto;
       
    }
    .s{
        display:block;
        font:bold 18px 雅黑 ;
        color:#000;
        padding:15px;
        
       
    }
    .box2{
        width:918px;
        height:216px;
        margin:0px auto;
        border-top:1px black solid;
    }
    ul{
       list-style: none;
        margin:20px auto;
        float:left;
    }
    img{
        display:block;
    }
    /* .s1{
        display: block;
        float:left;
    } */
    li{
        float:left;
        padding-right:0px;
        margin:15px 10px;
    }
  
    
</style>
  </head>
  <body>
     <div class="box1">
    <span class=s>图片展示</span>
    <div class="box2">
          <ul>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
            <li><img src="img/01.jpg"></li>
        </ul>
    </div> 
</div>
    </body>
    </html>
选区_045.png

相关文章

  • 08.HTML列表

    无序列表 展示图片 有序列表 展示图片 定义列表 示例图片

  • 2018-08-15

    标题 这是一段文字 无序列表 列表1 列表2 有序列表 列表1 列表2 链接 google 图片 图片查看[图片上...

  • 06.CSS列表

    无序列表 运行图片 有序列表 运行图片 列表图像 运行图片 列表标记位置 运行图片 简写语法

  • Flutter Hero/FadeTransition动画

    图片列表 --> 图片详情的 Hero动画 图片列表页 图片详情页

  • MarkDown语法(有图片对比更易学)

    标题 列表 无序列表: 有序列表: 链接、图片 链接 图片 引用 粗体、斜体 换行、分段 水平标尺 下面是图片显示...

  • 图片列表

  • 图片列表

    运用:盒模型、浮动

  • 图片列表

    图片分享按钮改造 新建PhotoList 组件,导入路由组件 绘制图片列表组件页面结构 滑动条无法滑动的问题在Ph...

  • ul

    在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。 新闻列表 图片列表 这些列表就可...

  • MarkDown语法

    name name 行内代码 引用图片.png 有序列表 有序列表二图片.png 无序列表1 无序列表2 无序列表...

网友评论

      本文标题:图片列表

      本文链接:https://www.haomeiwen.com/subject/wszbgftx.html