代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="assets/libs/layui/css/layui.css">
<link rel="stylesheet" href="assets/libs/swiper/css/swiper.css">
<!-- 自定义css -->
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/app.css">
<!-- browser version check -->
<script>
if (!!window.ActiveXObject || "ActiveXObject" in window){
alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");
window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);
}
</script>
<link href="assets/libs/badbrowser/css/badbrowser.css" rel="stylesheet"/>
<script src="assets/libs/badbrowser/js/badbrowser.js"></script>
</head>
<body class="bg-body">
<!-- header -->
<section class="header">
<!-- 主导航 -->
<div class="layui-bg-black main-nav">
<div class="layui-container">
<div class="layui-nav layui-bg-black flex-def flex-zBetween">
<!-- logo -->
<div class="layui-nav-item">
<a class="flex-def flex-cCenter" href="/">
<img src="assets/img/logo.png" width="82" height="31" alt="logo">
</a>
</div>
<!-- nav list -->
<div>
<div class="layui-nav-item layui-hide layui-show-xs-block">
<a id="main_nav_btn" class="text-center" href="javascript:;">
<i class="layui-icon layui-icon-app"></i>
</a>
</div>
<ul id="main_nav_list" class="layui-hide-xs">
<li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">最新活动</a></li>
<li class="layui-nav-item layui-show-xs-block layui-this"><a href="javascript:;">产品</a></li>
<li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">大数据</a></li>
<li class="layui-nav-item layui-show-xs-block"><a href="javascript:;">社区</a></li>
<li class="layui-nav-item layui-show-xs-block">
<a href="javascript:;">
<img src="assets/img/user.jpg" class="layui-nav-img">我
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
<!-- 登录 注册
<li class="layui-nav-item"><a class="signup" href="#">登录</a></li>
<li class="layui-nav-item"><a class="signup" href="#">注册</a></li> -->
</ul>
</div>
</div>
</div>
</div>
<!-- 次导航 -->
<div class="ci-nav bg-white shadow">
<div class="layui-container swiper-box">
<div id="nav_swiper" class="swiper-container">
<div class="swiper-wrapper">
<a class="swiper-slide active" href="#">Dashboard</a>
<a class="swiper-slide" href="#">Friends</a>
<a class="swiper-slide" href="#">Explore</a>
<a class="swiper-slide" href="#">Suggestions</a>
<a class="swiper-slide" href="#">Link</a>
<a class="swiper-slide" href="#">Link</a>
<a class="swiper-slide" href="#">Link</a>
<a class="swiper-slide" href="#">Link</a>
<a class="swiper-slide" href="#">Link</a>
</div>
</div>
<!-- 如果需要导航按钮 -->
<span id="nav_prev" class="swiper-button-prev"></span>
<span id="nav_next" class="swiper-button-next"></span>
</div>
</div>
</section>
<!-- crumb -->
<section class="crumb top-25 layui-hide-xs">
<div class="layui-container">
<span class="layui-breadcrumb">
<a href="/"><i class="layui-icon layui-icon-home"></i></a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
</div>
</section>
<!-- body -->
<section class="body top-25">
<div class="layui-container">
<div class="layui-row layui-col-space20">
<!-- left -->
<div class="layui-col-md3">
<!-- subscribe -->
<div class="subscribe-tab">
<div class="subscribe-header">
<h2 class="subscribe-tab-title">1月29日</h2>
<div class="subscribe-tab-time">
<span>JAN.29</span>
<span>农历一月四日</span>
<span>星期三</span>
</div>
</div>
<div class="subscribe-footer">
<p>共订阅2个媒体<i class="layui-icon layui-icon-right"></i></p>
</div>
</div>
</div>
<!-- center -->
<div class="layui-col-md6">
<div class="block">
<!-- slide -->
<div class="slide">
<div class="block-header flex-def flex-zBetween">
<h2>
<i class="layui-icon layui-icon-star best-icon"></i>
精品推荐
</h2>
</div>
<div id="slide_container" class="swiper-container">
<div class="slide-wrap swiper-wrapper">
<div class="slide-item swiper-slide">
<img src="assets/img/0.jpg">
<div>
<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2>
<p><a href="#">记者/梁婷 编辑/杨宝璐 宋建华 王康拍摄的金银潭医院病房照片 据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
</a></p>
</div>
</div>
<div class="slide-item swiper-slide">
<img src="assets/img/1.jpg">
<div>
<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2>
<p><a href="#">记者/梁婷 编辑/杨宝璐 宋建华 王康拍摄的金银潭医院病房照片 据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
</a></p>
</div>
</div>
<div class="slide-item swiper-slide">
<img src="assets/img/2.jpg">
<div>
<h2><a href="#">一个武汉肺炎康复患者的样本观察：我与新型冠状病毒搏斗的22天 | 深度对话</a></h2>
<p><a href="#">记者/梁婷 编辑/杨宝璐 宋建华 王康拍摄的金银潭医院病房照片 据国家卫健委最新消息，截至1月20日24时，共收到国内4省(区、市)累计报告新型冠状病毒感染的肺炎确诊病例291例(湖北270例，北京5例，广东14例，上海2例)；14省(区、市)累计报告疑似病例54例(湖北11例，广东7例，四川3例，云南1例，上海7例，广西1例，山东1例，吉林1例，安徽1例，浙江16例，江西2例，海南1例，贵州1例，宁
</a></p>
</div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<span id="slide_prev" class="swiper-button-prev"></span>
<span id="slide_next" class="swiper-button-next"></span>
<div id="slide_pagination" class="swiper-pagination"></div>
</div>
<div class="block-footer top-25 flex-def">
<a href="#" class="more">
更多专题
<i class="layui-icon layui-icon-right"></i>
</a>
</div>
</div>
<!-- hot topic -->
<div class="topic top-25">
<div class="block-header flex-def flex-zBetween">
<h2>
<i class="layui-icon layui-icon-heart best-icon"></i>
热门专题
</h2>
<a href="#" class="more">
更多专题
<i class="layui-icon layui-icon-right"></i>
</a>
</div>
<ul class="topic-tags">
<li><a href="#">热点</a></li>
<li><a href="#">见闻</a></li>
<li><a href="#">新知</a></li>
<li><a href="#">读心</a></li>
<li><a href="#">职场</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">潮流</a></li>
<li><a href="#">商界</a></li>
<li><a href="#">人文</a></li>
<li><a href="#">乐活</a></li>
<li><a href="#">腔调</a></li>
<li title="换一批"><a href="#"><i class="layui-icon layui-icon-refresh-1"></i></a></li>
</ul>
</div>
<!-- posts -->
<div class="posts top-25">
<div class="block-header flex-def flex-zBetween">
<h2><i class="layui-icon layui-icon-read best-icon"></i> 最新文章</h2>
</div>
<!-- post list -->
<ul>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<div class="post-right">
<img src="assets/img/0.jpg" class="heightsuit">
</div>
</div>
</li>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<div class="post-right">
<img src="assets/img/1.jpg" class="heightsuit">
</div>
</div>
</li>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<!-- <div class="post-right">
<img src="assets/img/2.jpg" class="heightsuit">
</div> -->
</div>
</li>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<!-- <div class="post-right">
<img src="assets/img/3.jpg" class="heightsuit">
</div> -->
</div>
</li>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<div class="post-right">
<img src="assets/img/4.jpg" class="heightsuit">
</div>
</div>
</li>
<li class="post-item">
<div class="user-info">
<a href="#"><img class="avatar" src="assets/img/user.jpg"></a>
<div class="user-profile">
<span class="user-name">〃我</span>
<span class="post-time">3小时前</span>
</div>
</div>
<div class="post-body">
<div class="post-left">
<div class="post-info">
<span><a class="cat" href="#">遥远</a></span>
<span><a class="top" href="#">热点</a></span>
</div>
<h3 class="post-title">
<a href="#">怕我们太累，农民兄弟好心帮忙采样，结果实验就这么失败了</a>
</h3>
<p class="layui-hide-xs">对城市中的人来说，土壤意味着什么？乡村，或者，遥远？土壤出了问题，对城市中的人影响很大：小到会影响粮食安全和人体健康，大到可以覆灭一个文明。广东生态环境技术研究所研究员陈能场带来演讲：《城市中的你，土壤与你有多远？》 陈能场演讲视频： 以下为陈能场演讲实录： 大家好，我叫陈能场，工作于广东省生态环境与土壤研究所。因为我出生在福建的闽南山区，所</p>
<div class="post-like">
<span><i class="layui-icon layui-icon-heart"></i> 2</span>
<span><i class="layui-icon layui-icon-chat"></i> 3</span>
</div>
</div>
<div class="post-right">
<img src="assets/img/5.jpg" class="heightsuit">
</div>
</div>
</li>
</ul>
</div>
<!-- pager -->
<div id="pagination" class="flex-def flex-zCenter top-25">
<div id="pager"></div>
</div>
</div>
</div>
<!-- right -->
<div class="layui-col-md3">
<!-- 订阅 -->
<div class="block medium-card">
<div class="medium-top">
<div>
<img src="assets/img/0.webp">
<h3>历史品读</h3>
</div>
<!-- <a href="#" class="focus">订阅</a> -->
<a class="unfocus" href="#">已订阅</a>
</div>
<div class="medium-bottom">
全球视野，价值视角。
</div>
</div>
<!-- 订阅 -->
<div class="block medium-card top-25">
<div class="medium-top">
<div>
<img src="assets/img/0.webp">
<h3>历史品读</h3>
</div>
<a href="#" class="focus">订阅</a>
<!-- <a class="unfocus" href="#">已订阅</a> -->
</div>
<div class="medium-bottom">
全球视野，价值视角。
</div>
</div>
<!-- 作者 -->
<div class="block author top-25">
<div class="block-header">
<h2>推荐作者</h2>
<a href="#" class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</a>
</div>
<div class="author-wrap">
<ul>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
<li class="author-item">
<a class="avatar" href="#"><img src="assets/img/user.jpg" alt=""></a>
<div class="author-info">
<h3>你我他</h3>
<p>文章 123, 话题 12</p>
</div>
</li>
</ul>
</div>
</div>
<!-- 标签 -->
<div class="block tags top-25">
<div class="block-header">
<h2>热门标签</h2>
<a href="#" class="more">
更多
<i class="layui-icon layui-icon-right"></i>
</a>
</div>
<div class="tags-wrap">
<a href="#"><span>热点</span></a>
<a href="#"><span>商界</span></a>
<a href="#"><span>见闻</span></a>
<a href="#"><span>职场</span></a>
<a href="#"><span>娱乐</span></a>
<a href="#"><span>新知</span></a>
<a href="#"><span>读心</span></a>
<a href="#"><span>乐活</span></a>
<a href="#"><span>潮流</span></a>
<a href="#"><span>人文</span></a>
<a href="#"><span>腔调</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<section class="footer">
<p>
Copyright © 2019<a href="javascript:;" target="_blank">daimajie.com</a>
<a href="javascript:;" target="_blank">DAIMAJIE社区</a>
<a href="javascript:;" target="_blank" rel="nofollow">黑ICP备123456789号</a>
</p>
</section>
<script src="assets/libs/layui/layui.js"></script>
<script src="assets/js/config.js"></script>
<script>
layui.use(['layer', 'element', 'swiper', 'jquery', 'laypage'], function(){
var layer = layui.layer
,$ = layui.jquery
,swiper = layui.swiper
,element = layui.element
,laypage = layui.laypage;
//browser version check
new badbrowser({
supported: {
chrome: '56',
msedge: '16',
firefox: '37',
opera: '42',
safari: '8'
},
path: './assets/libs/badbrowser/alerts/zh.html',
ignoreChoice: true
});
//导航JS
(function nav(){
/*主导航*/
$('#main_nav_btn').on('click', function(){
$('#main_nav_list').toggleClass('layui-hide-xs');
});
/*次导航*/
var mainNavSwiper = new Swiper('#nav_swiper',{
slidesPerView : 'auto',
navigation: {
nextEl: '#nav_prev',
prevEl: '#nav_next',
},
});
})();
//轮播图
var slideSwiper = new Swiper('#slide_container',{
loop:true,
spaceBetween : 20,
pagination : {
el:'#slide_pagination',
},
navigation: {
nextEl: '#slide_prev',
prevEl: '#slide_next',
},
});
//分页
laypage.render({
elem: 'pagination'
,count: 50
,prev : '<i class="layui-icon layui-icon-left"></i> '
,next : '<i class="layui-icon layui-icon-right"></i> '
});
layer.msg('Hello World');
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手