1 Star 1 Fork 0

个人项目/待办事项

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index.html 15.62 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<!--删除默认的苹果工具栏和菜单栏-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--控制状态栏显示样式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- title -->
<title>TodoList</title>
<!-- Framework7 iOS主题风格CSS-->
<link rel="stylesheet" href="css/framework7.material.min.css">
<!-- Framework7 iOS相关的颜色样式 -->
<link rel="stylesheet" href="css/framework7.material.colors.min.css">
<!-- 字体图标样式-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- 自定义样式 -->
<link rel="stylesheet" href="css/my-app.css">
<style>
.statusbar-overlay {
background: yellow;
}
.navbar-fixed.toolbar-fixed .page-content{
padding-top: 56px;
}
</style>
</head>
<body class="theme-bluegray">
<!-- 用于全屏模式的状态栏(PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- 侧边栏 -->
<!-- 首先,我们需要添加面板的覆盖层,在面板打开时覆盖应用程序 -->
<div class="panel-overlay"></div>
<!-- 左面板显示效果-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<div class="list-block">
<!-- First group-->
<div class="list-group">
<ul>
<li class="list-group-title">第一组</li>
<li class="item-content notification-multi">
<div class="item-media"><i class="fa fa-fw fa-drupal"></i></div>
<div class="item-inner">
<div class="item-title"><a href="" class="link open-login-screen">账号</a></div>
<div class="item-after">标签</div>
</div>
</li>
<li class="item-content notification-multi">
<div class="item-media"><i class="fa fa-fw fa-check-square-o"></i></div>
<div class="item-inner">
<div class="item-title">全部待办</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
<li class="item-content notification-multi">
<div class="item-media"><i class="fa fa-fw fa-calendar-check-o"></i></div>
<div class="item-inner">
<div class="item-title">全部打卡</div>
<div class="item-after"><span class="badge">5</span></div>
</div>
</li>
<li class="item-content notification-multi">
<div class="item-media"><i class="fa fa-fw fa-cog"></i></div>
<div class="item-inner">
<div class="item-title"><a href="html/setting.html" class="link">设置</a></div>
</div>
</li>
<li class="item-content notification-multi">
<div class="item-media"><i class="fa fa-fw fa-sign-out"></i></div>
<div class="item-inner">
<div class="item-title">退出登录</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 侧边栏结束-->
<!-- 视图 -->
<div class="views">
<!-- 主视图,必须包含view-main类 -->
<div class="view view-main">
<!-- 页面容器,因为我们使用固定的navbar和工具栏,它有额外的适当的类-->
<!--固定的navbar-fixed toolbar-fixed-->
<div class="pages">
<!--页面,“data-page”包含页面名称 -->
<div data-page="index" class="page navbar-fixed toolbar-fixed">
<!-- 顶部导航条 -->
<div class="navbar">
<div class="navbar-inner">
<div class="center">
<!-- 搜索条 -->
<form data-search-list=".list-block-search" data-search-in=".item-title"
class="searchbar searchbar-init">
<div class="searchbar-input">
<input type="search" placeholder="Search">
<a href="#" class="searchbar-clear"></a>
</div>
<a href="#" class="searchbar-cancel">取消</a>
</form>
</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
<!-- Search bar overlay -->
<div class="searchbar-overlay">搜索栏覆盖</div>
<!-- 可滚动页面内容 -->
<div class="page-content">
<!-- 搜索框,如果没有找到,将显示该块 -->
<div class="content-block searchbar-not-found">
<div class="content-block-inner">什么都没找到</div>
</div>
<!--卡片式-->
<div class="card">
<div class="card-content">
<div class="list-block searchbar-found list-block-search searchbar-found">
<ul id="index-content">
<!-- Single chekbox item -->
<li class="swipeout">
<label class="label-checkbox swipeout-content item-content">
<!-- Checked by default -->
<input type="checkbox" name="my-checkbox" value="Books">
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
<div class="item-inner" style="display: inline-block;">
<a href="html/detail.html" class="taphold">
<div class="item-title">Books</div>
</a>
</div>
</label>
<!--侧滑按钮-->
<div class="swipeout-actions-right">
<a href="#" class="action1">删除</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 卡片式结束-->
<!--<a href="#" class="taphold">长安我!</a>-->
</div>
</div>
</div>
<!-- Speed Dial Wrap -->
<div class="speed-dial" id="speedDial">
<!-- FAB inside will open Speed Dial actions -->
<a href="#" class="floating-button">
<!-- First icon is visible when Speed Dial actions are closed -->
<i class="icon icon-plus"></i>
<!-- Second icon is visible when Speed Dial actions are opened -->
<i class="icon icon-close"></i>
</a>
<!-- Speed Dial Actions -->
<div class="speed-dial-buttons">
<!-- First Speed Dial button -->
<a href="javascript:;" id="scrolltop">
<i class="fa fa-fw fa-arrow-up"></i>
</a>
<!-- Second Speed Dial button -->
<a href="#">
<i class="fa fa-fw fa-photo"></i>
</a>
<!-- Third Speed Dial button -->
<a href="html/edit.html">
<i class="fa fa-fw fa-pencil"></i>
</a>
</div>
</div>
<!-- End of Speed Dial -->
</div>
</div>
<!--登陆框-->
<div class="login-screen">
<!-- Default view-page layout -->
<div class="view">
<div class="page">
<!-- page-content has additional login-screen content -->
<div class="page-content login-screen-content">
<div class="login-screen-title">&nbsp;&nbsp;&nbsp;</div>
<!-- Login form -->
<form>
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-user"></i></div>
<div class="item-inner">
<div class="item-title floating-label">邮箱/手机号</div>
<div class="item-input">
<input type="text" name="username" placeholder="邮箱/手机号"/>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-lock"></i></div>
<div class="item-inner">
<div class="item-title floating-label">密码</div>
<div class="item-input">
<input type="password" name="password" placeholder="密码"/>
</div>
</div>
</li>
<li class="item-content" style="padding-right: 16px;">
<a href="#" data-popup=".popup-register" class="open-popup">注册</a>
<a href="html/findPassword.html">忘记密码</a>
</li>
<li class="item-content buttons-row">
<div class="item-inner">
<a href="#" class="button button-big button-fill button-raised">&nbsp;&nbsp;&nbsp;</a>
</div>
</li>
</ul>
</div>
<div class="list-block">
<div class="list-block-label">
<ul>
<li>---------- 使用第三方登录 ----------</li>
<li class="row" style="margin-top: 20px;">
<span class="col-auto"></span>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-wechat fa-lg"></i>
</a>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-weibo fa-lg"></i>
</a>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-qq fa-lg"></i>
</a>
<span class="col-auto"></span>
</li>
</ul>
</div>
</div>
<div class="list-block">
<div class="list-block-label" style="position: fixed; right: 35%; bottom: 20px;">
<a href="#" class="close-login-screen">关闭登陆窗</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 注册框弹窗-->
<div class="popup tablet-fullscreen popup-register login-screen-content">
<div class="login-screen-title">&nbsp;&nbsp;&nbsp;</div>
<!-- register form -->
<form name="registerForm" method="post" id="registerForm">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-user"></i></div>
<div class="item-inner">
<div class="item-title floating-label">邮箱</div>
<div class="item-input">
<input type="text" name="username" placeholder="邮箱" id="reg-username"/>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media" style="min-width: inherit"><i class="fa fa-fw fa-lock"></i></div>
<div class="item-inner">
<div class="item-title floating-label">密码</div>
<div class="item-input">
<input type="password" name="password" placeholder="密码" id="reg-password"/>
</div>
</div>
</li>
<li class="item-content buttons-row">
<div class="item-inner">
<a href="#" class="button button-big button-fill button-raised" onclick="register()">&nbsp;&nbsp;&nbsp;</a>
</div>
</li>
<li>
<label for="serviceAgreement">
<input type="checkbox" id="serviceAgreement">同意
<a href="#">《服务协议》</a>
</label>
</li>
</ul>
</div>
<div class="list-block">
<div class="list-block-label">
<ul>
<li>---------- 使用第三方登录 ----------</li>
<li class="row" style="margin-top: 20px;">
<span class="col-auto"></span>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-wechat fa-lg"></i>
</a>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-weibo fa-lg"></i>
</a>
<a href="#" class="col-auto">
<i class="fa fa-fw fa-qq fa-lg"></i>
</a>
<span class="col-auto"></span>
</li>
</ul>
</div>
</div>
<div class="list-block">
<div class="list-block-label" style="position: fixed; right: 35%; bottom: 20px;">
<a href="#" class="close-popup">已有账号</a>
</div>
</div>
</form>
</div>
</body>
<!-- Framework7 库-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 野狗云-->
<script src="https://cdn.wilddog.com/sdk/js/2.5.8/wilddog.js"></script>
<!--富文本编辑器-->
<script type="text/javascript" src="js/ckeditor.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<!-- 自定义 js-->
<script type="text/javascript" src="js/my-app.js"></script>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML/CSS
1
https://gitee.com/pesonal/TodoList-Html.git
[email protected]:pesonal/TodoList-Html.git
pesonal
TodoList-Html
待办事项
master

搜索帮助