1 Star 5 Fork 4

adm/自媒体站点模板

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
topics.html 11.57 KB
一键复制 编辑 原始数据 按行查看 历史
adm 提交于 2020-01-30 15:18 . 初次提交
<!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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/hiadm/webtpl.git
git@gitee.com:hiadm/webtpl.git
hiadm
webtpl
自媒体站点模板
master

搜索帮助