新鲜动态

直接使用代码

图片素材

无

css代码

  

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="statics/css/icon.css" />

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="http://www.bootfastui.cn/img/2020/200424-6/icon.css" />

  <style>

*{margin: 0;padding: 0;box-sizing: border-box;font-weight: normal;}
html,
body{font-family: "Microsoft YaHei";font-size: 14px;}
ul{list-style: none;}
a{text-decoration: none;color: inherit;}
.cui-btn{display: inline-block;height: 40px;padding: 0 30px;border: solid 1px transparent;border-radius: 2px;background: transparent;font-weight: 400;font-size: 14px;line-height: 38px;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;transition: 0.2s;}
.cui-btn-small{height: 32px;padding-left: 20px;padding-right: 20px;font-size: 12px;line-height: 30px;}
.cui-icon{font-family: 'cui-icon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;display: inline-block;vertical-align: middle;font-size: 16px;}
.cui-icon-play:before{content: "\EA1A";}
.section-news{background: #F1F5FF;}
.section-title{text-align: center;padding-top: 60px;padding-bottom: 52px;}
.section-title h1{position: relative;font-size: 36px;line-height: 50px;letter-spacing: 4px;color: #252b3a;}
.section-title h2{margin-top: 10px;font-size: 18px;line-height: 22px;letter-spacing: 2px;color: #666a75;}
.section-wrapper{max-width: 1280px;padding-left: 30px;padding-right: 30px;margin-left: auto;margin-right: auto;}
.news-body{height: 540px;margin-left: 10px;margin-right: 10px;box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.12);}
.news-body:before,
.news-body:after{content: " ";display: table;box-sizing: inherit;}
.news-main{float: left;height: 100%;width: 32.5%;}
.news-main-card{display: block;position: relative;height: 100%;overflow: hidden;}
.news-main-card:hover .news-main-card-bg{transform: scale(1.1);}
.news-main-card-bg{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-size: cover;background-position: center;transition: 0.2s;}
.news-main-card-bg{position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-size: cover;background-position: center;transition: 0.2s;}
.news-main-card-bg-mb{display: none;}
.news-main-card-top{position: relative;height: 310px;}
.news-play-btn{display: none;position: absolute;top: 70px;right: 0;bottom: 0;left: 0;width: 40px;height: 30px;background-color: rgba(255, 255, 255, 0.3);border-radius: 2px;margin: auto;font-size: 0;line-height: 30px;text-align: center;cursor: pointer;transition: 0.2s;}
.news-play-btn .cui-icon-play{font-size: 16px;color: #fff;}
.news-main-card-bottom{position: relative;height: 230px;padding: 5px 40px;}
.news-main-card-bottom .h2{margin-bottom: 10px;font-size: 20px;line-height: 28px;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.news-main-card-bottom .p{max-height: 40px;font-size: 14px;line-height: 20px;color: rgba(255, 255, 255, 0.7);display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.news-main-card-bottom .sub-p{position: relative;padding-left: 10px;font-size: 14px;line-height: 20px;color: #fff;}
.news-main-card-bottom .sub-p-date{margin-top: 10px;}
.news-main-card-bottom .sub-p:before{content: "";display: block;position: absolute;left: 0;top: 10px;border: solid 2px;border-radius: 50%;margin-top: -2px;}
.news-main-card-bottom .sub-p-author{margin-top: 5px;}
.news-main-card-bottom .btn-group{position: absolute;bottom: 30px;}
.cui-btn-outline-light{border: solid 1px #fff;color: #fff;}
.cui-btn-outline-light:hover{border-color: #f66f6a;background-color: #f66f6a;color: #fff;}
.news-main-card-bottom .btn-group .cui-icon{margin-top: -2px;margin-right: 8px;font-size: inherit;}
.news-sub{float: left;position: relative;height: 100%;width: 67.5%;}
.news-list-v{position: absolute;height: 100%;width: 100%;visibility: hidden;opacity: 0;transition: 0s 0.2s;}
.news-list-v.show{z-index: 1;visibility: visible;opacity: 1;transition: 0.2s;}
.news-list-v:before,
.news-list-v:after{content: " ";display: table;box-sizing: inherit;}
.news-list-v:after{clear: both;}
.news-list-v>li{float: left;width: 33.33333333%;height: 50%;}
.news-list-card{display: block;position: relative;height: 100%;padding: 70px 40px 0;background-color: white;}
.news-list-card:hover .h3,
.news-list-card:hover .p{transform: translate(0, -26px);}
.news-list-card:hover .more{opacity: 1;color: #6F7479;}
.news-list-v>li:nth-child(1) .news-list-card,
.news-list-v>li:nth-child(5) .news-list-card{background-color: #f66f6a;}
.news-list-v>li:nth-child(2) .news-list-card{background-image: url(http://www.bootfastui.cn/img/2020/200424-6/homepage-news-card-bg.jpg);background-size: cover;}
.news-list-v>li:nth-child(4){width: 66.66666667%;}
.news-list-card .h3{max-height: 56px;margin-bottom: 20px;font-size: 20px;line-height: 28px;color: #252b3a;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: transform 0.2s;}
.news-list-card .p{max-height: 60px;font-size: 14px;line-height: 20px;color: #666a75;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;transition: transform 0.2s;}
.news-list-v>li:nth-child(1) .news-list-card .h3,
.news-list-v>li:nth-child(2) .news-list-card .h3,
.news-list-v>li:nth-child(5) .news-list-card .h3{color: #fff;}
.news-list-v>li:nth-child(1) .news-list-card .p,
.news-list-v>li:nth-child(2) .news-list-card .p,
.news-list-v>li:nth-child(5) .news-list-card .p,
.news-list-v>li:nth-child(1) .news-list-card .more,
.news-list-v>li:nth-child(2) .news-list-card .more,
.news-list-v>li:nth-child(5) .news-list-card .more{color: rgba(255, 255, 255, 0.7);}
.news-list-card .more{position: absolute;bottom: 30px;opacity: 0;transition: opacity 0.2s;color: rgba(255, 255, 255, 0.7);}
.news-list-card .more i{margin-left: 5px;transition: transform 0.2s;}
.news-list-card .more:hover i{transform: translate(5px, 0);}
.cui-icon-more:before{content: "\EA19";}
.section-bottom{padding-top: 40px;padding-bottom: 50px;}
.section-more-wrap{text-align: center;}
.section-more-wrap a{display: inline-block;font-size: 16px;line-height: 24px;color: #666a75;cursor: pointer;user-select: none;transition: 0.2s;}
.section-more-wrap a:hover{color: #f66f6a;}
.section-more-wrap .news-more{display: none;}
.section-more-wrap a .cui-icon{margin-top: -2px;margin-left: 10px;transition: transform 0.2s;}
.section-more-wrap .news-change{padding-right: 20px;background-image: url(http://www.bootfastui.cn/img/2020/200424-6/homepage-news-icon-change.png);background-repeat: no-repeat;background-position: right center;}
.section-more-wrap .news-change:before,
.section-more-wrap .news-change:hover{content: "";background-image: url(http://www.bootfastui.cn/img/2020/200424-6/homepage-news-icon-change-active.png);}
</style>

HTML+JS代码

    
<div class="section section-news" id="section-news">
	<div class="section-title">
		<h1>新鲜动态</h1>
		<h2>科技前沿、大咖直播、活动展会，24小时更新不停</h2>
	</div>
	<div class="section-wrapper">
		<div class="news-body">
			<div class="news-main">
				<a class="news-main-card" href="#">
					<div class="news-main-card-bg" style="background-image: url(http://www.bootfastui.cn/img/2020/200424-6/homepage-news-img.jpg)"></div>
					<div class="news-main-card-bg news-main-card-bg-mb" style="background-image: url(http://www.bootfastui.cn/img/2020/200424-6/homepage-news-img-mb.jpg)"></div>
					<div class="news-main-card-top">
						<div class="news-play-btn">
							<span class="cui-icon cui-icon-play"></span>
						</div>
					</div>
					<div class="news-main-card-bottom">
						<h2 class="h2">【直播】技术小白如何花2小时搭建一个精美网站</h2>
						<p class="p">云速建站服务，无需代码，自由拖拽，并可提供PC 、手机 、微信网站 、小程序 、 APP五站合一的模板建站产品。</p>
						<div class="sub-p sub-p-date">3月14日 16:00-18:00</div>
						<div class="sub-p sub-p-author">云主机建站大牛</div>
						<div class="btn-group">
							<span class="cui-btn cui-btn-small cui-btn-outline-light"><span class="cui-icon cui-icon-play"></span><span>观看视频</span></span>
						</div>
					</div>
				</a>
			</div>
			<div class="news-sub">

				<ul class="news-list-v show">

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">浅谈服务化和微服务化</h3>
							<p class="p">微服务是近期非常热门的话题，芸芸众生言必谈微服务。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">由Spring应用的瑕疵谈谈DDD的概念与应用</h3>
							<p class="p">多数有经验的程序开发者都应该听说过DDD，并且尝试过将其应用在自己的项目中。不知你是否遇到过这样的场景。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">赛题公布及解读 | 一分钟看懂2019年华为软件精英挑战赛赛题</h3>
							<p class="p">智能世界.纵横2019软件精英挑战赛等你来战！</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">7天晋级机器学习-附加题解析</h3>
							<p class="p">本文主要是对“7天晋级机器学习”中的一道培训附加题的解析。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">Code Review 与结对编程</h3>
							<p class="p">笔者希望能够通过这篇文章说明自己的一个观点：相对于结对编程，Code Review是一种更加合理与普适性的研发实践。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

				</ul>

				<ul class="news-list-v">

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">带着canvas去流浪系列之一：绘制柱状图</h3>
							<p class="p">学习使用canvasAPI来实现数据可视化。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">云主机社区2月刊：如何选云主机的规格？</h3>
							<p class="p">云主机社区月刊，每月更新一刊，欢迎大家品读。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">7天晋级机器学习：助力客户分群实验小结</h3>
							<p class="p">轻松玩转机器学习，机器学习助力客户分群学习分享。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">云图说：四大业务场景带您玩转云主机SAP</h3>
							<p class="p">一张图概览云主机SAP解决方案四大业务场景。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">安全攻击一目了然，云主机态势感知服务正式发布</h3>
							<p class="p">安全态势尽收眼底，攻击面前洞若观火。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

				</ul>

				<ul class="news-list-v">

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">云主机发布国内首个AI模型市场</h3>
							<p class="p">云主机正式发布云主机AI市场，投入专项激励，助力开发者、合作伙伴加速AI应用落地。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">Python 爬虫之Scrapy入门实践指南</h3>
							<p class="p">Scrapy是一种快速的高级Web爬行和Web抓取框架，用于抓取网站并从其页面中提取结构化数据。它可用于各种用途，从数据挖掘到监控和自动化测试。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">云主机ModelArts拿下斯坦福DAWNBench双料冠军</h3>
							<p class="p">云主机ModelArts一站式AI开发平台将模型训练时间大幅缩减的同时实现了超强推理性能。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">DevCloud新手课堂之两步学会使用代码检查</h3>
							<p class="p">DevCloud新手课堂本期导读：如何使用代码检查服务。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

					<li>
						<a href="#" class="news-list-card">
							<h3 class="h3">《跟唐老师学习云网络》 - ip命令</h3>
							<p class="p">ip命令作为Linux网络控制的魔法棒，是未来遨游云网络的必备命令行工具。</p>
							<span class="more">查看详情<i class="cui-icon cui-icon-more"></i></span>
						</a>
					</li>

				</ul>

			</div>
		</div>
	</div>
	<div class="section-bottom">
		<div class="section-more-wrap">
			<a class="news-more" href="#">
				<span>更多新鲜动态</span><i class="cui-icon cui-icon-more"></i>
			</a>
			<a class="news-change">
				<span>换一换</span>
			</a>
		</div>
	</div>
</div>



<script type="text/javascript">
	//换一换
	var $newsLists = $('.news-sub').find('.news-list-v');

	function changeNews() {
		var $currentNews = $newsLists.filter('.show');
		var $nextNews = $currentNews.next();

		if($nextNews.length === 0) {
			$nextNews = $newsLists.eq(0);
		}

		$newsLists.removeClass('show');
		$nextNews.addClass('show');
	}
	$('.news-change').on('click', function() {
		changeNews();
	});
</script>