(案例贴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>
相关推荐
炫饭第一名11 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
不会敲代码112 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
进击的尘埃13 小时前
Vue3 响应式原理:从 Proxy 到依赖收集,手撸一个迷你 reactivity
javascript
willow13 小时前
JavaScript数据类型整理1
javascript
LeeYaMaster13 小时前
20个例子掌握RxJS——第十一章实现 WebSocket 消息节流
javascript·angular.js
UIUV14 小时前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
颜酱16 小时前
理解二叉树最近公共祖先(LCA):从基础到变种解析
javascript·后端·算法
Sailing16 小时前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
FansUnion16 小时前
我如何用 Next.js + Supabase + Cloudflare R2 搭建壁纸销售平台——月成本接近 $0
javascript
左夕17 小时前
分不清apply,bind,call?看这篇文章就够了
前端·javascript