左图右文

作者：曹え 5811
发布时间：2022-01-20 09:34:09
浏览次数：277

代码

<!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">
		
		<script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script>
		<link rel="stylesheet" href="https://h5.org.cn/css/cui.css" />
		<style>
		@media (min-width: 768px) {
			html {
				font-size: 28px !important;
			}
		}
		
		@media (min-width: 1025px) {
			html {
				font-size: 30px !important;
			}
		}
		
		@media (min-width: 1440px) {
			html {
				font-size: 34px !important;
			}
		}
		
		@media (min-width: 1680px) {
			html {
				font-size: 40px !important;
			}
		}
		
		@media screen and (max-width: 769px) {
			html {
				font-size: 30px !important;
			}
		}
			.snvBox {
				height: 1.75rem;
				border-bottom: 1px solid #ebebeb;
				box-shadow: -1px 3px 9px 0px rgba(235, 235, 235, 1);
				-webkit-box-shadow: -1px 3px 9px 0px rgba(235, 235, 235, 1);
				-moz-box-shadow: -1px 3px 9px 0px rgba(235, 235, 235, 1);
				font-size: 0;
				text-align: center;
			}

.snvBox li {
				display: inline-block;

}

.snvBox li a {
				display: block;
				font-size: 0.45rem;
				padding: 0 1.425rem;
				line-height: 1.75rem;
				color: #000;
			}

.snvBox li.on a,
			.snvBox li a:hover {
				color: #fff;
				background: #003280;
			}

.bgGray {
				background: #f6f6f6;
			}

.ul-listNews li {
				overflow: hidden;
				border-bottom: 1px solid #dcdcdc;
				padding: 1.5rem 0;
			}

.ul-listNews li .time {
				float: left;
				width: 2.65rem;
				margin-right: 1.625rem;
				text-align: center;
				font-size: 12px;
				padding-left: 20px;
			}

.ul-listNews li .time b {
				display: block;
				border-bottom: 1px solid #acacac;
				font-size: .95rem;
				margin-bottom: 0.25rem;
			}

.ul-listNews li .pic {
				width: 9.25rem;
				float: left;
				margin-right: 1.4rem;
			}

.ul-listNews li .pic a {
				display: block;
				width: 100%;
				padding-top: 58%;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				background-position: 50% 50%;
				background-repeat: no-repeat;
			}

.ul-listNews li .txt {
				overflow: hidden;
			}

.ul-listNews li h3 {
				font-size: 0.6rem;
				margin-bottom: .375rem;
			}

.ul-listNews li h3 a {
				color: #000;
			}

.ul-listNews li p {
				font-size: 0.35rem;
				line-height: 1.7;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

.ul-listNews li .more {
				font-size: 0.35rem;
				color: #003280;
				margin-top: 0.5rem;
				display: block;
			}

.ul-listNews li:hover {
				background: #e1e3e5;
				/*color: #fff;*/
			}

.ul-listNews li:hover h3 a,
			.ul-listNews li:hover .more {
				/*color: #fff;*/
			}

.pages {
				text-align: center;
				font-size: 0;
				padding: 1.5rem 0;
				padding-bottom: 3.5rem;
			}

.pages li {
				display: inline-block;
				margin: 0 5px;
			}

.pages li a {
				display: block;
				height: 1rem;
				line-height: 1rem;
				padding: 0 .375rem;
				border: 1px solid #d3d3d3;
				background: #fff;
				font-size: 12px;
			}

.pages li.on a,
			.pages li a:hover {
				background: #003280;
				color: #fff;
			}
			@media screen and (max-width: 640px){
			.ul-listNews li .pic {
			    float: none;
			    width: 100%;
			    margin-right: 0;
			    margin-bottom: 10px;
			}
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="snvBox">
				<div class="wp">
					<ul>
						<li class="on"><a href="">新闻</a></li>
						<li><a href="">通知</a></li>
						<li><a href="">文苑</a></li>

</ul>
				</div>
			</div>
			<div class="bgGray">
				<div class="wp">
					<ul class="ul-listNews">
						<li>
							<div class="time"><b>08</b>2021-09</div>
							<div class="ovh">
								<div class="pic"><a href="" 
								style="background-image: url(https://h5.org.cn/images/system-2.png)"></a>
								</div>
								<div class="txt">
									<h3><a href="">5公司喜签浙江嘉化能源低温罐区罐外 配套设备安装工程</a></h3>
									<p>为响应公司党委庆祝中国共产党成立100周年系列活动的号召，近日，第十七分公司组织召开了“大干60天、向建党100周年献礼”活动启动会，项目现场全体党员参会。会上，第十七...
									</p>
									<a href="" class="more">了解更多 ></a>
								</div>
							</div>
						</li>
						<li>
							<div class="time"><b>08</b>2021-09</div>
							<div class="ovh">
								<div class="pic"><a href=""
										style="background-image: url(https://h5.org.cn/images/system-2.png)"></a></div>
								<div class="txt">
									<h3><a href="">4公司喜签浙江嘉化能源低温罐区罐外 配套设备安装工程</a></h3>
									<p>为响应公司党委庆祝中国共产党成立100周年系列活动的号召，近日，第十七分公司组织召开了“大干60天、向建党100周年献礼”活动启动会，项目现场全体党员参会。会上，第十七...
									</p>
									<a href="" class="more">了解更多 ></a>
								</div>
							</div>
						</li>
						<li>
							<div class="time"><b>08</b>2021-09</div>
							<div class="ovh">
								<div class="pic"><a href=""
										style="background-image: url(https://h5.org.cn/images/system-2.png)"></a></div>
								<div class="txt">
									<h3><a href="">3公司喜签浙江嘉化能源低温罐区罐外 配套设备安装工程</a></h3>
									<p>为响应公司党委庆祝中国共产党成立100周年系列活动的号召，近日，第十七分公司组织召开了“大干60天、向建党100周年献礼”活动启动会，项目现场全体党员参会。会上，第十七...
									</p>
									<a href="" class="more">了解更多 ></a>
								</div>
							</div>
						</li>

</ul>
					<div class="c"></div>
					<div class="pages">
						<ul>
							<ul>
								<li class="on"><a href="/xw-1.html">1</a></li>
								<li class=""><a href="/xw-2.html">2</a></li>
								<li><a href="/xw-2.html">下一页</a></li>
								<li><a href="/xw-2.html">末页</a></li>
							</ul>
						</ul>
					</div>
				</div>
			</div>

</div>

</body>
</html>

预览[刷新]

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