博客列表 >简单的后台管理页面

简单的后台管理页面

斗人传说
斗人传说原创
2022年07月06日 00:11:52534浏览

博客已迁移至自建网站,此博客已废弃.
请移步至:https://blog.ours1984.top/posts/ddsh/欢迎大家访问

1. 元素属性

类型描述
通用属性id,class,style,title 等,几乎可用于所有元素
预置属性除通用属性外,w3c 还为每个不同功能的元预置一些属性,来区别他们
事件属性它是预置属性的一个子集,根据元素特征,所支持的事件属性也各不相同
自定义属性为方便编程,由用户为元素添加的属性,以data-为前缀

2. 常用元素

类型描述
布局元素<header><footer><main><aside><article><nav><section><h1...><div>
文本元素<span><p><time><code><strong><q>...
链接元素<a href="xxx" target="_self/_blank/name">
图像元素<figure><figcaption><img src="xxx" alt="xxx"><picture><source>
列表元素无序<ul>+<li> , 有序<ol>+<li>, 自定义<dl>+<dt>+<dd>
表格元素<table><caption><thead><tbody><tfoot><tr><td><col>...
表单元素<form><label><input><datalist><select><textarea><button>
内联框架<iframe src="xxx" name="xxx">,常用于后台布局或前端跨域
音/视频<video src="xxx" controls><audio src="xxx" controls>

更多 html 元素: https://developer.mozilla.org/zh-CN/docs/Web/HTML

简单的注册页面

实例

<!DOCTYPE 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>
</head>
<body>
    <h2>是肮脏的一片天</h2>
    <form action="check.php" method="post">
        <div>
            <label for="uname">天名</label>
            <input type="text" id="uname" name="username" placeholder="苍天已死" autofocus>
        </div>
        <div>
            <label for="pwd">天密</label>
            <input type="password" id="pwd" name="password" placeholder="黄天当立" autofocus>
        </div>
        <div>
            <label for="secret">天型</label>
            <input type="radio" id="male" name="sex" value="male"><label for="male">天1</label>
            <input type="radio" id="female" name="sex" value="female"><label for="female">天2</label>
            <input type="radio" id="secret" name="sex" value="secret" checked><label for="secret">晴天</label>
        </div>
        <div>
            <label for="game">天眼</label>
            <input type="checkbox" id="game" name="hobby[]" value="game"><label for="game">风</label>
            <input type="checkbox" id="trave" name="hobby[]" value="trave" checked><label for="trave">雨</label>
            <input type="checkbox" id="shoot" name="hobby[]" value="shoot" checked><label for="shoot">雷电</label>
        </div>
                <div>
                    <label for="">天格</label>
                    <select name="edu" id="">
                      <option value="0" selected disabled>--请选择--</option>
                      <option value="1">大天</option>
                      <option value="2">中天</option>
                      <option value="3">小天</option>
                      <option value="4">天骑士</option>
                      <option value="5">其它</option>
                    </select>
                  </div>
        <div>
            <button type="submit">通天</button>
        </div>
    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

简单的后台管理页面


实例

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            display: grid;
            grid-template-columns: 10em 1fr;
            grid-template-rows: 6em 1fr;
            margin: 0;
        }

        body .header {
            grid-column-end: span 2;
            border-bottom: 1px solid currentColor;
            background-color: #efe;
            padding: 2em;
            display: flex;
            align-items: center;
        }

        body .header div {
            margin-left: auto;
        }

        body .nav {
            background-color: #efc;
            margin: 0;
            padding-top: 1em;
            list-style: none;
        }

        body iframe {
            width: calc(100vw - 10em);
            height: calc(100vh - 6em);
            border-left: 1px solid currentColor;
        }
    </style>
</head>

<body>
    <!-- 后台顶部 -->
    <div class="header">
        <h1>后台管理系统</h1>
        <div>
            <em>admin</em>
            <a href="">退出</a>
        </div>
    </div>

    <!-- 左侧导航 -->
    <ul class="nav">
        <li><a href="https://j.map.baidu.com/c6/1klf" target="content">故宫博物院</a></li>
        <li><a href="https://blog.ours1984.top/" target="content">我们的1984</a></li>
        <li><a href="https://blog.ours1984.top/test/rigister.html" target="content">开心一下</a></li>
        <li><a href="https://cn.bing.com/search?q=%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B&go=%E6%90%9C%E7%B4%A2&qs=ds&form=QBRE" target="content">百度一下</a></li>
    </ul>
    <!-- 右侧内容区 -->
    <iframe srcdoc="<a href=''>这是一条神奇的天路</a>" frameborder="1" name="content"></iframe>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议