一个前端板块样式

<style>
ul, li{list-style:none; }
p{font-size:14px; font-weight:400; line-height:24px; }
.act-con{ position:relative; width:1200px; margin:0 auto; text-align:center; }
.act-con:after, .act-con:before { content:""; display:table; }
.act-con:after {clear:both}
.act-con .box{ display:inline-block; float:none; /* float:left; */ height:280px; width:315px; color:#fff; font-size:14px; text-align:center; border-radius:10px; }
.act-con .box .hd{padding:20px 0; height:57px; }
.act-con .box .hd h3{margin-bottom:6px; font-size:24px; font-weight:700; color:#fff; }
.act-con .box .hd h3 img{position:relative; top:3px; margin-right:5px; }
.act-con .box .hd a{color:#15b46d; font-weight:700; text-decoration:underline; }
.act-con .box .confs{ padding:0 0 30px; display:-webkit-box; display:-ms-flexbox; display:flex; justify-content:center; }
.act-con .box .confs li{ padding:0 20px; }
.act-con .box .confs li b{ display:block; font-size:24px; font-weight:400; }

.act-con .box-01{background-image:linear-gradient(-45deg, #5f2eb8, #b830e5); box-shadow:inset 0 -20px 60px rgba(0,0,0,.3);}
.act-con .box-02{margin:0 40px; width:475px;background-image:linear-gradient(-45deg, #306ce5, #04bcdd); box-shadow:inset 0 -20px 60px rgba(0,0,0,.3);}

.act-con .box-01 .hd a{ color:#240348; }
.act-con .box-02 .hd a{ color:#0074b3; }
.act-con .box-02 .confs li{ padding:0 14px; }
</style>
<div class="act-con">
	<div class="box box-01">
		<div class="hd">
			<h3 data-spm-anchor-id="5176.8072402.1390368.i1.491e29cckKT8ag">免费版企业邮箱</h3>
		</div>
		<ul class="confs">
			<li><b>50</b>邮箱帐号</li>
			<li><b>5GB</b>邮箱空间</li>
			<li><b>2GB</b>个人网盘</li>
		</ul>
		<p>2G共享网盘容量，安全、高效，智慧办公</p>
	</div>
	<div class="box box-02">
		<div class="hd">
			<h3 data-spm-anchor-id="5176.8072402.1390368.i3.491e29cckKT8ag">
				<img src="https://img.alicdn.com/tfs/TB1su7mSFXXXXXLXpXXXXXXXXXX-25-25.png">钉钉智能移动办公套件
			</h3>
			<a href="#" target="_blank">查看更多介绍</a>
		</div>
		
		<ul class="confs">
			<li><b>100GB</b>企业网盘</li>
			<li><b>1000分钟</b>办公电话(最高)</li>
			<li><b>2000分钟</b>电话会议(最高)</li>
		</ul>
		<p>更有免费视频会议，免费考勤审批签到等办公套件</p>
	</div>
</div>