自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用

2024-06-24 13:12
文章标签 桌面 应用 浏览器 主页 备忘录 自制 当成 简单

本文主要是介绍自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用。如果你看不懂，请留言。

完整代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>与妖为邻的备忘录</title><!-- <link rel="stylesheet" href="index.css"> -->
</head>
<style>/* 设置全局样式 */* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;}body {background: #2c3e50;}.divBtn,input,button {color: #d6d301;/* color: hsla(160, 100%, 37%, 1); */text-shadow: 1px 1px 1px #100000;font-weight: bold;cursor: pointer;}li {list-style: none;}/* 设置全局样式 结束*//* 整体布局上下divBox设置 */.divBox {width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: space-between;}/* 整体布局上下divBox 结束 *//* 上部页眉header设置 */.header {background-color: #cbcbcba7;width: 100vw;height: 40px;display: flex;justify-content: space-around;align-items: center;font-size: 1.5rem;box-shadow: 0 0 10px rgb(200, 255, 3);&::before {content: "";background-color: #cbcbcb;width: 15px;height: 100%;position: fixed;right: 1px;top: 40px;z-index: 110;box-shadow: 0 0 10px rgb(200, 255, 3);}/* logo */.logo {div {/* 放大镜效果 */transform: scale(1.5);position: fixed;z-index: 99999;top: 10px;left: 30px;}img {float: left;width: 40px;height: 40px;border-radius: 50%;transition: transform 0.3s ease;&:hover {transform: scale(1.2);}}h2 {font-size: 15px;width: 90px;color: azure;background-color: #f30303;border-radius: 50%;box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);border: 0px solid black;}.my_name {letter-spacing: -5px;}}/* logo 结束*/#time {background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);sub {-webkit-text-fill-color: #cfd601;text-shadow: 1px 1px 1px #100000;font-size: 1rem;}}}/* 上部页眉header设置 结束 *//* 下部内容content设置 */.content {width: 100vw;height: 96vh;position: absolute;top: 4%;display: flex;justify-content: center;align-items: center;/* 点击区域设置 */#click-section {width: 8%;height: 100%;position: relative;/* 抽屉盒子设置 */#drawerBoxes {width: 100%;height: 100%;position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: space-evenly;/* 竖条线设置 */&::before {content: "";width: 15px;height: 100%;position: absolute;z-index: 120;background-color: #cbcbcb;}/* 竖条线设置 结束 */.drawerBox {height: calc(100% / 3.5);width: 120%;position: relative;z-index: 100;transform: translateX(-70%);transition: transform .5s ease-in-out;.drawer-btn {width: 80%;height: 100%;font: 800 80px '';background-color: #cbcbcba7;border: none;transition: background-color .5s ease-in-out;box-shadow: 0 0 10px rgb(200, 255, 3);color: rgb(70, 100, 180);&:hover {cursor: pointer;}.drawer-head {position: absolute;/* 使用渐变背景*//* background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); *//*将背景剪切成文字的形状*/background-clip: text;-webkit-background-clip: text;/*文字颜色设为透明，使文字与背景融为一体*/-webkit-text-fill-color: transparent;font-size: 100px;font-weight: 900;right: -90px;/* 文本竖排 */writing-mode: vertical-rl;top: calc(50% - 100px);text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);}}}.drawerBox.active {transform: translateX(0);}.drawer-btn.active {color: #feee02d7;}/* 抽屉盒子设置 */}/* 点击区域设置 结束 */}#slide-section {position: relative;height: 100%;width: 92%;margin: 0 10px;}/* 分隔线设置 */#slide-bar {position: absolute;left: -10px;height: 100%;width: 2px;background-color: rgb(255, 249, 249);#bar {position: absolute;height: calc(100% / 4);width: 10px;top: 0;left: -1.2px;background: rgb(250, 4, 168);transition: transform .5s ease-in-out;box-shadow:inset 3px 4px 5px rgba(255, 255, 255, 0.6),inset -3px -4px 5px rgba(0, 0, 0, 0.6);border-radius: 10px;}}/* 分隔线 结束设置 *//* 分页设置 */#card-section {height: 100%;width: 90%;overflow: hidden;}}/* 分页设置  结束 *//* 留言板设置 */.centre {width: 85vw;height: 96vh;display: flex;flex-direction: column;justify-content: space-evenly;.displayBtn {display: flex;color: #E6A23C;text-align: center;i {width: 100%;}i:first-of-type {background: #0bb811c9;}.marquee {background: linear-gradient(to right, #4caf4fed, #dc0000cf);color: #f3d303;margin: 0;padding: 0;}/* 删除按钮 */.deleteBtn {color: #f3d303;text-shadow: 1px 1px 1px rgb(0, 0, 0);background: #ff0000;font-weight: bold;cursor: pointer;&:hover {background-color: #f3d303;color: #ff0505;}}}/* 隐藏文本操作窗口开始 */.hidden {background: #2c3e50;box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);display: none;position: fixed;flex-direction: column;transform: translate(10%, 1%);border-radius: 8px;z-index: 9;.Drag {box-shadow: 0 0 10px rgba(93, 93, 93, 0.537);color: #ffffffce;height: 35px;display: flex;justify-content: space-between;font-size: 1.5rem;cursor: move;p {margin: 0 10px;}i {font-style: normal;margin: 0 10px;cursor: pointer;&:hover {color: #f30303;}}}.form {display: flex;flex-direction: column;background-color: rgba(20, 20, 20, 0.5);margin: 10px;padding: 5px;border-radius:

这篇关于自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1090244。

相关文章

一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

👀日报&周刊合集 | 🎡ShowMeAI官网 | 🧡 点赞关注评论拜托啦！ 1. 为啥大模型做不好简单的数学计算？从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型+ GPT-4o)，组织参与了 2024 年高考「新课标I卷」的语文、数学、英语考试，然后由经验丰富的判卷老师评判得分。 结果如上图所
阅读更多...
ONLYOFFICE 8.1 版本桌面编辑器测评

ONLYOFFICE 8.1 版本桌面编辑器测评

在现代办公环境中，办公软件的重要性不言而喻。从文档处理到电子表格分析，再到演示文稿制作，强大且高效的办公软件工具能够极大提升工作效率。ONLYOFFICE 作为一个功能全面且开源的办公软件套件，一直以来都受到广大用户的关注与喜爱。而其最新发布的 ONLYOFFICE 8.1 版本桌面编辑器，更是带来了诸多改进和新特性。本文将详细评测 ONLYOFFICE 8.1 版本桌面编辑器，探讨其在功能、用户
阅读更多...
亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

亮相WOT全球技术创新大会，揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

2024年6月21日-22日，51CTO“WOT全球技术创新大会2024”在北京举办。火山引擎边缘计算架构师李志明受邀参与，以“边缘容器技术在泛CDN场景的应用和实践”为主题，与多位行业资深专家，共同探讨泛CDN行业技术架构以及云原生与边缘计算的发展和展望。 火山引擎边缘计算架构师李志明表示：为更好地解决传统泛CDN类业务运行中的问题，火山引擎边缘容器团队参考行业做法，结合实践经验，打造火山
阅读更多...
回调的简单理解

回调的简单理解

之前一直不太明白回调的用法，现在简单的理解下 就按这张slidingmenu来说，主界面为Activity界面，而旁边的菜单为fragment界面。1.现在通过主界面的slidingmenu按钮来点开旁边的菜单功能并且选中”区县“选项（到这里就可以理解为A类调用B类里面的c方法）。2.通过触发“区县”的选项使得主界面跳转到“区县”相关的新闻列表界面中（到这里就可以理解为B类调用A类中的d方法
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...
python实现最简单循环神经网络(RNNs)

python实现最简单循环神经网络(RNNs)

Recurrent Neural Networks（RNNs） 的模型： 上图中红色部分是输入向量。文本、单词、数据都是输入，在网络里都以向量的形式进行表示。 绿色部分是隐藏向量。是加工处理过程。 蓝色部分是输出向量。 python代码表示如下： rnn = RNN()y = rnn.step(x) # x为输入向量，y为输出向量 RNNs神经网络由神经元组成， python
阅读更多...
气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述

气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述

气象站的种类和应用范围可以根据不同的分类标准进行详细的划分和描述。以下是从不同角度对气象站的种类和应用范围的介绍： 一、气象站的种类 根据用途和安装环境分类： 农业气象站：专为农业生产服务，监测土壤温度、湿度等参数，为农业生产提供科学依据。交通气象站：用于公路、铁路、机场等交通场所的气象监测，提供实时气象数据以支持交通运营和调度。林业气象站：监测林区风速、湿度、温度等气象要素，为林区保护和
阅读更多...
宝塔面板部署青龙面板教程【简单易上手】

宝塔面板部署青龙面板教程【简单易上手】

首先，你得有一台部署了宝塔面板的服务器（自己用本地电脑也可以）。 宝塔面板部署自行百度一下，很简单，这里就不走流程了，官网版本就可以，无需开心版。 首先，打开宝塔面板的软件商店，找到下图这个软件（Docker管理器）安装，青龙面板还是安装在docker里，这里依赖宝塔面板安装和管理docker。 安装完成后，进入SSH终端管理，输入代码安装青龙面板。ssh可以直接宝塔里操作，也可以安装ssh连接
阅读更多...
PyTorch模型_trace实战：深入理解与应用

PyTorch模型_trace实战：深入理解与应用

pytorch使用trace模型 1、使用trace生成torchscript模型2、使用trace的模型预测 1、使用trace生成torchscript模型 def save_trace(model, input, save_path):traced_script_model = torch.jit.trace(model, input)<
阅读更多...
哺乳细胞重组表达人鼠嵌合抗体：制备与应用

哺乳细胞重组表达人鼠嵌合抗体：制备与应用

重组抗体是一类具有广泛应用价值的蛋白质，在药物研发和生物医学研究中发挥着重要作用。本文将介绍重组抗体的表达方式，重点关注嵌合抗体制备和哺乳细胞重组表达人鼠嵌合抗体的技术原理和应用。 重组抗体表达的原理和方法 重组抗体表达是通过将人或动物源的免疫球蛋白基因导入表达宿主细胞，并使其表达出特异性抗体蛋白质。常用的表达系统包括细菌、哺乳细胞和真核微生物等。 嵌合抗体制备的步骤和优势 选择适当的抗原
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2