zoukankan      html  css  js  c++  java
  • 第四十六节 图片列表布局

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>图片展示</title>
     6     <style type="text/css">
     7         
     8         .pic_list_con{
     9             width: 958px;
    10             border: 1px solid #666;
    11             margin: 50px auto 0;
    12         }
    13 
    14         .pic_list_title{
    15             width: 918px;
    16             height: 50px;
    17             border-bottom: 1px solid #666;
    18             margin: 0 auto;  /* 让这个div相对父级div水平居中*/
    19 /*            background-color: gold;*/
    20         }
    21         
    22         .pic_list_title h3{
    23             float: left;  /* 解决top塌陷的问题同时将其转换成行内块,让其自动撑开父级*/
    24             font: normal 18px/50px 'Microsoft Yahei';
    25             margin: 0;
    26             padding: 0 10px;
    27             border-bottom: 2px solid red;
    28         }
    29 
    30         .pic_list_wrap{
    31             width: 918px;
    32             margin: 20px auto 13px ;
    33             overflow: hidden;
    34         }
    35 
    36         .pic_list{
    37             list-style: none;
    38             padding: 0;
    39             width: 950px;
    40             /*background-color: gold;*/
    41             margin: 0;
    42             overflow: hidden;
    43         }
    44 
    45 
    46         .pic_list li{
    47             width: 160px;
    48             height: 68px;
    49             float: left;
    50             margin: 0 29px 25px 0;
    51         }
    52 
    53     </style>
    54 </head>
    55 <body>
    56     <div class="pic_list_con">
    57         
    58         <div class="pic_list_title">
    59             <h3>图片展示</h3>
    60         </div>
    61         
    62         <div class="pic_list_wrap">
    63             <!-- ul.pic_list>(li>a>img)*10 -->
    64             <ul class="pic_list">
    65                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    66                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    67                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    68                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    69                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    70                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    71                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    72                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    73                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    74                 <li><a href="#"><img src="未标题-2.jpg" alt="图片"></a></li>
    75             </ul>
    76         </div>
    77     </div>
    78 </body>
    79 </html>
  • 相关阅读:
    Collection与Collections的区别
    Java容器基础概况
    IO与NIO的区别
    BIO、NIO、AIO的区别
    Java中的IO流
    Java中的抽象类
    String常用方法解析
    字符串反转
    vue路由传参
    flask框架(八)—自定义命令flask-script、多app应用、wtforms表单验证、SQLAIchemy
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12423866.html
Copyright © 2011-2022 走看看