上图下文+日期

作者：曹え 5811
发布时间：0000-00-00 00:00:00
浏览次数：251

代码

<!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>
 /* 通用模块 -------------------------------------------------- */
.wp{
    width: 1400px;
    max-width: 100%;
    margin: 0 auto;
}
  /* 布局 */
.ul-news{
	overflow: hidden;
}
.ul-news li{
	float: left;
	width: 33.3%;
	margin-bottom: 10px;
	overflow: hidden;
}
.ul-news .con{
	position: relative;
	display: block;
	color: #000;
	overflow: hidden;
	margin: 21px;
}
.ul-news .pic{
	position: relative;
	height: 0;
	padding-top: 53%;
	overflow: hidden;
}
.ul-news .pic img{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;	
}
.ul-news .txt{
	background: #fff;
	padding: 25px 18px;
	text-align: left;
	overflow: hidden;
}
.ul-news .txt .date{
	float: left;
	padding-right: 18px;
	text-align: center;
	border-right: 1px solid #eee;
}

.ul-news .txt .info{
	overflow: hidden;
	padding-left: 18px;
}
.ul-news .txt span{
	display: block;
	font-size: 64px;
	line-height: 1em;	 
}
.ul-news .txt em{
	display: block;
	color: #aaa;
	font-size: 18px;
	margin-left: 5px;
	line-height: 1em;
}
.ul-news .txt h3{
	font-size: 18px;
	height: 25px;
	line-height: 25px;
	font-weight: 400;
	overflow: hidden;
	margin-bottom: 5px;
}
.ul-news .txt p{
	color: #aaa;
	font-size: 14px;
	line-height: 25px;
	overflow: hidden;
}
.ul-news .con:hover .v{
	 position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(250,0,0,0.5);
}

@media only screen and (max-width: 1000px){
	.ul-news li{
		width: 50%;
	}

}

@media only screen and (max-width: 768px){
	.ul-news li{
		width: auto;
		float: none;
	}
}
    </style>
</head>
<body>
        <div class="wp">
            <ul class="ul-news">
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic4.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>22</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic5.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>18</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic6.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>15</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic4.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>22</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic5.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>18</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="" class="con">
                        <div class="pic">
                            <img src="https://h5.org.cn/images/pic6.jpg" alt="">
                            <div class="v"></div>
                        </div>
                        <div class="txt">
                            <div class="date">
                                <span>15</span>
                                <em>2017.04</em>
                            </div>
                            
                            <div class="info">
                                <h3>清洁能源进万家、温暖有你也有他！</h3>
                                <p>为引导铸造行业健康、有序可持续发展，促进<br>铸造行业产业结构调整优化和转型......</p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>	
</body>
</html>

预览[刷新]

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