自适应图片宽高的图文日期列表

作者：
发布时间：0000-00-00 00:00:00
浏览次数：742

精品收藏，第一个百变作业

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图文日期列表</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" />
  <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" />
  <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script>
    
    <style>
      
/*初始化*/
body{color: #333;font-size: 14px;font-family:"微软雅黑","Microsoft Yahei";background: #efefef;}
img{max-width: 100%;}
.wp{width: 90%;max-width: 1200px;margin: 0 auto;}

.ul-list1{
	    overflow: hidden; /*清li浮动*/
	    margin: 0 -10px; /*给ul加负左右margin*/
	}
	.ul-list1 li{
	    float: left; /*列浮动*/
	    width: 33.333%;
	    margin-bottom: 20px;
	}
	.ul-list1 .con{
	    background: #fff;
	    display: block;
	    margin: 0 10px; /*列之间左右间距，均分为左右margin，此时列之间的间距，看起来是20px*/
	}
	.ul-list1 .pic{
	    height: 0; /*高度必须为0*/
	    padding-top: 55%; /*图片自身高宽百分比*/
	    background: #ddd;
	    overflow: hidden;
	    position: relative;
	}
	.ul-list1 .pic img{    
	    max-width: 100%;
        max-height:100%;
	    display: block;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    /*图片向‘左、上’偏移自身一半‘宽、高’*/
	    transform: translate(-50%,-50%);
	    -webkit-transform: translate(-50%,-50%);
	}
	.ul-list1 .txt{
	    color: #333;
	    font-size: 14px;
	    line-height: 25px;
	    padding: 25px 20px;
	    overflow: hidden; /*清日期浮动*/
	}
	.ul-list1 .date{
	    color: #aaa;
	    line-height: 20px;
	    text-align: center;
	    padding-right: 20px;
	    border-right: 1px solid #ddd;
	    margin-right: 20px;
	    float: left; /*日期浮动*/
	}
	.ul-list1 .day{
	    color: #333;
	    font-size: 64px;
	    line-height: 60px;
	}
	.ul-list1 .info{
	    /*用于清左侧日期浮动，让此区域文字起始位置一致*/
	    overflow: hidden;
	}
	.ul-list1 .title{
	    font-size: 18px;
	    font-weight: normal;    
	    overflow:hidden; /*超出隐藏*/
	    white-space:nowrap; /*文本不换行*/
	    text-overflow:ellipsis; /*超出显示省略号*/ 
	    
	    margin-bottom: 5px;
	}
	.ul-list1 .desc{
	    color: #aaa;
	    overflow:hidden;
	    display:-webkit-box; /*盒模型--必须*/
	    -webkit-box-orient:vertical; /*垂直显示*/
	    -webkit-line-clamp:2; /*行数*/
	    text-overflow:ellipsis;
	}

/* 鼠标经过效果 */
.ul-list1 .pic img,
.ul-list1 .day,
.ul-list1 .title {
	transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
}
.ul-list1 .con:hover .pic img{
	transform: translate(-50%,-50%) scale(1.05);
	-webkit-transform: translate(-50%,-50%) scale(1.05);
}
.ul-list1 .con:hover .day,
.ul-list1 .con:hover .title {
	color: #2080c4;
}
      
/* 媒体查询-响应 */
@media only screen and (max-width: 1900px){
    .ul-list1 .day{font-size: 3.333vw;}
}
@media only screen and (max-width: 1440px){
    .ul-list1 .title{font-size: 16px;}
}
@media only screen and (max-width: 1200px){
    .ul-list1 .txt{padding: 15px;}
    .ul-list1 .date{padding-right: 10px;margin-right: 10px;}
    .ul-list1 .day{font-size: 40px;line-height: 50px;}
    .ul-list1 .desc{font-size: 12px;line-height: 20px;}
}
@media only screen and (max-width: 990px){
    .ul-list1 li{width: 50%;}
}
@media only screen and (max-width: 750px){
    .ul-list1 li{float: none;width: auto;margin-bottom: 10px;}
}
    </style>
</head>
<body>
   <div class="wp">
     <ul class="ul-list1">
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p1.jpg" alt=""></div>
             <div class="txt">
               <div class="date"><p class="day">22</p>2017.04</div>
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p2.jpg" alt=""></div>
             <div class="txt">
               <div class="date"><p class="day">22</p>2017.04</div>
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p3.jpg" alt=""></div>
             <div class="txt">
               <div class="date"><p class="day">22</p>2017.04</div>
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p2.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p1.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p2.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
                 <div class="desc">
                   <p>为引导铸造行业健康、有序可持续发展，促进铸造行业产业结构调整优化和转型</p>
                 </div>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p2.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p1.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
               </div>
             </div>
           </a>
         </li>
         <li>
           <a href="" class="con">
             <div class="pic"><img src="images/p2.jpg" alt=""></div>
             <div class="txt">
               <div class="info">
                 <h3 class="title">清洁能源进万家、温暖有你也有他！</h3>
               </div>
             </div>
           </a>
         </li>
     </ul>
   </div>
</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏