(案例贴1)html+js+css todolist便签条

版本1:静态壁纸背景

版本二:动态小球跳动背景

f86084d896df68b0ba2e64467afe4983_raw

html代码:

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /><title>TODO便签</title><link rel="stylesheet" href="/assets/css/index.css"><link rel="stylesheet" href="/assets/css/icon.css">
</head><body><div id="background"></div><div id="app"><div id="msg"></div><div id="container"><div id="toolsList"><div class="top"><div><div class="icon"><i class="fas fa-user-circle"></i></div><div class="title">账号</div></div><div class="active" activeAble id="list_memo"><div class="icon"><i class="fas fa-edit"></i></div><div class="title">笔记</div></div><div activeAble id="list_todos"><div class="icon"><i class="fas fa-list-ul"></i></div><div class="title">代办</div></div><div activeAble id="list_star"><div class="icon"><i class="fas fa-star"></i></div><div class="title">收藏</div></div></div><!-- <div class="bottom"><div><div class="icon" id="bottom_setting"><i class="fas fa-cog"></i></div><div class="title">设置</div></div></div> --></div><div id="memosList"><div class="topTool"><div class="searchBar"><i class="fal fa-search"></i><input type="text" autocomplete="off" placeholder="Search..." id="searchBox"></div><div class="addBar" id="mainAddInput"><i class="fal fa-plus"></i></div></div><div id="totalList"></div></div><div id="editor"><div class="header"><div class="pages"><div class="page_back page_item" style="display: none;"><i class="fas fa-chevron-left"></i></div><div class="page_item">标题</div></div><div class="page"><div class="information"><div class="image" style="background-image: url(/assets/image/icon_5.png);"><div class="content" id="note_cover"></div></div><div class="title"><input type="text" id="note_title" placeholder="标题"></div></div><div class="about"><i class="fas fa-star" id="about_star"></i><i class="fal fa-ellipsis-h" id="about_more"></i></div></div></div><div class="editor-container"><div id="editorTextarea"></div></div></div></div></div><script src="/assets/js/marked.js"></script><script src="/assets/js/index.js"></script></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/496380.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

武器大师——操作符详解(上)

目录 一、操作符的分类 二、二进制和进制转换 2.1.二进制与十进制的互相转化 2.1.1 二进制转十进制 2.1.2 十进制转二进制 ​编辑 2.2.二进制转8进制和16进制 2.2.1 转8进制 2.2.2 转16进制 三、原码、反码、补码 四、移位操作符 4.1.左移操作符&#xff08;<…

备战蓝桥杯————如何判断回文链表

如何判断回文链表 题目描述 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a;…

计算机网络:深入探索HTTP

引言&#xff1a; HTTP&#xff0c;全称超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff09;&#xff0c;是互联网上数据通信的基础。它定义了客户端&#xff08;如浏览器&#xff09;和服务器之间如何交互和传输数据。HTTP最初是为了支持Web浏览而设计的&…

SpringMVC 学习(八)之文件上传与下载

目录 1 文件上传 2 文件下载 1 文件上传 SpringMVC 对文件的上传做了很好的封装&#xff0c;提供了两种解析器。 CommonsMultipartResolver&#xff1a;兼容性较好&#xff0c;可以兼容 Servlet3.0 之前的版本&#xff0c;但是它依赖了 commons-fileupload …

数据结构:栈和队列与栈实现队列(C语言版)

目录 前言 1.栈 1.1 栈的概念及结构 1.2 栈的底层数据结构选择 1.2 数据结构设计代码&#xff08;栈的实现&#xff09; 1.3 接口函数实现代码 &#xff08;1&#xff09;初始化栈 &#xff08;2&#xff09;销毁栈 &#xff08;3&#xff09;压栈 &#xff08;4&…

Gradle exclude排除指定依赖的办法

举例 implementation (com.squareup.picasso:picasso:2.71828){ exclude module: support-v4 exclude group: com.android.support } 说明&#xff1a;引用 Picasso库&#xff0c;需要排除 support-v4&#xff0c;其他库已经引用了support-v4。 解释 com.squareup.…

【MySQL】DQL

DQL&#xff08;数据查询语言&#xff09;用于在MySQL数据库中执行数据查询操作。它主要包括SELECT语句&#xff0c;用于从表中检索数据。 0. 基本语法 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVING 分组后条件列表 ORDER BY 排序字段列表 …

Dockerfile(1) - FROM 指令详解

FROM 指明当前的镜像基于哪个镜像构建dockerfile 必须以 FROM 开头&#xff0c;除了 ARG 命令可以在 FROM 前面 FROM [--platform<platform>] <image> [AS <name>]FROM [--platform<platform>] <image>[:<tag>] [AS <name>]FROM […

阿里云定价_ECS产品价格_云服务器收费标准 - 阿里云官方活动

2024年最新阿里云服务器租用费用优惠价格表&#xff0c;轻量2核2G3M带宽轻量服务器一年61元&#xff0c;折合5元1个月&#xff0c;新老用户同享99元一年服务器&#xff0c;2核4G5M服务器ECS优惠价199元一年&#xff0c;2核4G4M轻量服务器165元一年&#xff0c;2核4G服务器30元3…

React Switch用法及手写Switch实现

问&#xff1a;如果注册的路由特别多&#xff0c;找到一个匹配项以后还会一直往下找&#xff0c;我们想让react找到一个匹配项以后不再继续了&#xff0c;怎么处理&#xff1f;答&#xff1a;<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。 如果没有<Sw…

python:xml.etree.ElementTree 读 Freeplane.mm文件,生成测试案例.csv文件

Freeplane 是一款基于 Java 的开源软件&#xff0c;继承 Freemind 的思维导图工具软件&#xff0c;它扩展了知识管理功能&#xff0c;在 Freemind 上增加了一些额外的功能&#xff0c;比如数学公式、节点属性面板等。 强大的节点功能&#xff0c;不仅仅节点的种类很多&#xf…

LTD264次升级 | 对接AsiaPay • 人民币买外币商品 •知识付费订单可关闭 • 专栏支持VIP免支付购买

​ 1、对接AsiaPay第三方支付平台&#xff0c;支持人民币买外币商品&#xff1b; 2、知识付费购买优化 3、账号绑定的微信号可解除绑定&#xff1b; 4、其他已知问题修复与优化&#xff1b; 01 商城 1) 新增海外跨境支付系统AsiaPay 在本次升级中&#xff0c;商城支付系统新增…