本文主要是介绍自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用。如果你看不懂，请留言。
完整代码：
<!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: 这篇关于自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
