码云 Gitee IDE 全新上线——支持 Git 管理的轻量在线编码环境
Watch Star Fork

S / SimpleJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
一个轻量,简约,包含丰富模块化前端框架 ,帮您快速构建网站 http://www.we63.com
一键复制 编辑 Web IDE 原始数据 按行查看 历史
core.html 6.78 KB
mustards 提交于 2018-08-06 08:58 . 新增icon图标示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Simple - 简! </title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
<meta name="description" content="Simple 是一个基于layui框架,一个轻量,简约,包含丰富模块化前端框架,帮您快速构建网站。">
<link rel="stylesheet" href="./css/s.css">
<link rel="stylesheet" href="./css/extend.css">
<script src="./layui.js"></script>
</head>
<body>
<div class="s-header">
<div class="layui-container flex space-between">
<a class="s-header-a" href="./core.html">
<img src="./img/logo/logo-grey.png" alt="" class="s-header-logo">
</a>
<ul class="s-header-menu">
<li><a href="./">首页</a></li>
<li><a href="./core.html" class="active">基础框架</a></li>
<li><a href="http://www.we63.com/index.php">组件库</a></li>
<li><a href="http://www.we63.com/page.php">页面库</a></li>
</ul>
</div>
</div>
<div class="s-subheader" style="">
<div class="layui-container flex">
<ul class="flex">
<li><a href="color.html">色彩</a></li>
<li><a href="typo.html">排版</a></li>
<li><a href="button.html">按钮</a></li>
<li><a href="badge.html">徽标</a></li>
<li><a href="nav.html">导航</a></li>
<li><a href="breadcrumb.html">面包屑</a></li>
<li><a href="table.html">表格</a></li>
<li><a href="form.html">表单</a></li>
<li><a href="panel.html">面板</a></li>
<li><a href="progress.html">进度条</a></li>
<li><a href="icon.html">图标</a></li>
<li><a href="blank.html">前台空页面</a></li>
<li><a href="admin.html">后台空页面</a></li>
<li><a href="help.html">辅助类</a></li>
</ul>
</div>
</div>
<style>
.s-header {
margin: 0 auto;
justify-content: space-between;
}
body {
height: 100vh;
}
.circle1, .circle2, .circle3, .circle4 {
position: absolute;
display: block;
border-radius: 100%;
z-index: 1;
animation: floatview 10s infinite;
}
.circle1 {
top: 120px;
left: 145px;
width: 50px;
height: 50px;
z-index: 2;
background: #00a6ff;
background: linear-gradient(180deg, #00a6ff, #00e1ff);
animation: floatview 8s infinite;
}
.circle2 {
right: 175px;
top: 30px;
width: 140px;
height: 140px;
background: #2d3ee6;
background: linear-gradient(180deg, #2d3ee6, #6a77ff);
}
.circle3 {
left: 15px;
bottom: 150px;
width: 120px;
height: 120px;
background: #1548dc;
background: linear-gradient(180deg, #1548dc, #2083fe);
}
.circle4 {
right: 15px;
bottom: 220px;
width: 90px;
height: 90px;
z-index: 2;
background: #f95c75;
background: linear-gradient(180deg, #f95c75, #f98e9f);
animation: floatview 8s infinite;
}
@keyframes floatview {
0% {
transform: translateY(0)
}
50% {
transform: translateY(20px)
}
to {
transform: translateY(0)
}
}
.main {
display: flex;
flex-direction: column;
height: calc(100vh - 300px);
justify-content: center;
align-items: center;
}
.fl {
text-align: center;
color: rgba(51, 51, 51, 0.8);
margin-bottom: 40px;
margin-top: 10px;
font-size: 24px;
line-height: 1.5;
font-weight: 300;
}
.sl {
font-size: 18px;
text-align: center;
}
.bbtn {
margin-bottom: 30px;
}
</style>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12 main">
<span class="circle1"></span>
<span class="circle2"></span>
<span class="circle3"></span>
<span class="circle4"></span>
<div>
<img src="./img/logo/logo-hero.png" alt="">
</div>
<div class="text-center">
<p class="fl">
<span>一个轻量,简约,包含丰富模块化前端框架</span>
<br>
<span class="sl">帮您快速构建网站</span>
</p>
</div>
<div class="bbtn">
<a class="layui-btn layui-btn-primary layui-btn-lg layui-btn-radius" style="width: 170px" href="https://gitee.com/bambi008/Simple" target="_blank"><i
class="layui-icon">&#xe656;</i> 下载
</a>
<a class="layui-btn layui-btn-warm layui-btn-lg layui-btn-radius" style="width: 170px" href="./color.html"><i
class="layui-icon">&#xe656;</i> 基础组件
</a>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="s-footer">
<ul>
<li><strong>Simple </strong></li>
<li>Version: v1.0</li>
<li>Last Update:2018-8-3</li>
<li>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260258189'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D1260258189%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
</li>
</ul>
</div>
</div>
<script>
layui.use(['element','form','jquery','upload','laydate'], function(){
var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
var upload = layui.upload;
var laydate = layui.laydate;
// 子菜单静态高亮
$('.s-subheader a').each(function(){
filename=location.href.substr(location.href.lastIndexOf('/')+1);
if ($(this).attr("href") == filename ){
$(this).addClass("active");
}
});
//执行实例
var uploadInst = upload.render({
elem: '#btnlogo' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>

评论 ( 0 )

你可以在登录后,发表评论

搜索帮助