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>
  • 相关阅读:
    ubuntu16.04使用anaconda创建python虚拟环境
    Ubuntu16.04里安装anaconda3后将python第三方包安装到指定目录下
    conda把包安装到当前激活的环境中
    ubuntu修改环境变量
    conda安装tensorflow
    ASP VNext 开源服务容错处理库Polly
    EntityFramework实现指定字段的通用赋值
    NET流行高性能JSON框架-Json.NET
    .NET网站国际化策略
    软件开发工作流-GitFlow
  • 原文地址:https://www.cnblogs.com/kogmaw/p/12423866.html
Copyright © 2011-2022 走看看