html管理-[HTML+CSS+JS]后台管理系统侧边栏

2023-08-26 0 7,319 百度已收录

早上好,兄弟们。 想了半天,不知道该写什么html管理,就写一些通知吧。 比如今天写了什么代码,就提前记录下来html管理,同时发布出来。 这个问题带来

可以在文章后面获取源码

这是样式

代码部分

超文本标记语言

<html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>后台管理系统</title>    <link rel="stylesheet" href="./style.css">    </head><body>    <nav class="navbar">        <ul class="navbar-nav">             <li class="logo">                <a href="#" class="nav-link">                    <span class="link-text">后台管理系统</span>                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ad" class="svg-inline--fa fa-ad fa-w-16"                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">                    <path fill="currentColor"                        d="M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z">                    </path>                    </svg>                </a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="user" class="svg-inline--fa fa-user fa-w-14 fa-sm"                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">                    <path fill="currentColor"                      d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z">                    </path>                  </svg>                  <span class="link-text">用户管理</span>                </a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-bar"                    class="svg-inline--fa fa-chart-bar fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">                    <path fill="currentColor"                      d="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z">                    </path>                  </svg>                  <span class="link-text">报表管理</span>                </a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bookmark"                    class="svg-inline--fa fa-bookmark fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">                    <path fill="currentColor" d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"></path>                  </svg>                  <span class="link-text">标签管理</span>                </a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">                    <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle"                    class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">                    <path fill="currentColor"                      d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z">                    </path>                  </svg>                  <span class="link-text">求助</span>                </a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16"                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">                    <path fill="currentColor"                      d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">                    </path>                  </svg>                  <span class="link-text">更换</span>                </a>            </li>        </ul>    </nav>    <main>        <h2>欢迎进入后台管理系统</h2>      <p>        开发原则是每一个程序员在学习编程开发技术的时候都需要了解和掌握的一些开发知识,下面我们就通过案例分析来了解一下,软件编程开发都有哪些开发原则。 <br>        1.RuleOfThree原则  <br>         这是一条代码重构的经验法则,用于决定何时将复制的代码段替换为新的代码/过程/方法。    <br>         它的含义是,一次用到某个功能时,你写一个特定的解决方法;二次又用到的时候,你拷贝上一次的代码;三次出现的时候,你要着手「抽象化」,写出通用的解决方法。   <br>          该原则的主要思想是使代码/过程/方法更加通用,从而保证在其他地方可以重复使用。    <br>         2.应用程序结构与编码方式保持一致  <br>         应用程序结构与编码方式保持一致有助于提高其可读性和可维护性。    <br>         尝试制定编码标准,这有助于保持编码一致性。编码标准应该与变量的命名规则一样少。另一大问题是应用程序的结构,开发人员进行更改或添加新内容的地方应该很明显。    <br>         3.减少程序嵌套 <br>          if里面嵌套if会使得程序很混乱,代码很难读。在编写代码时可能无法绕开这些问题,但你需要经常查看代码结构。    <br>         elseif同样如此,因此需要尽量避免嵌套。    <br>         一种有效的解决方法是卫语句:卫语句把复杂的条件表达式拆分成多个条件表达式。  <br>         4.了解全局很重要  <br>         了解全局有助处理较小的细节。一旦了解了全局,你就不会花很长的时间在小细节上。    <br>       </p>    </main></body></html>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html html管理-[HTML+CSS+JS]后台管理系统侧边栏 https://www.wkzy.net/game/156453.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务