代码拉取完成,页面将自动刷新
<!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">
</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=" block">
<div class="block-header flex-def flex-zBetween">
<h2>
<i class="layui-icon layui-icon-flag best-icon"></i>
话题列表
</h2>
</div>
<ul class="mediums top-25">
<!-- 订阅 -->
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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">
全球视野多年国内知名财经媒体经历,ICT业内资深分析人
</div>
</div>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
<li class="medium-wrap">
<div class="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>
</li>
</ul>
<!-- pager -->
<div id="pagination" class="flex-def flex-zCenter top-25">
<div id="pager"></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;
//导航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',
},
});
})();
//分页
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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。