博客列表 >作业-第4章-内联框架元素-网站导航练习

作业-第4章-内联框架元素-网站导航练习

PHP中文网用户-9288300
PHP中文网用户-9288300原创
2022年11月21日 11:23:19279浏览

<!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>


    <!-- <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="logout.php">退出</a>

        </div>

    </div>

   

    <ul class="nav">

        <li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo1.html" target="content">元素属性</a></li>

        <li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo2.html" target="content">布局元素</a></li>

        <li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo3.html" target="content">链接与列表</a></li>

        <li><a href="作业素材\第3章 0704-html常用标签与应用场景\0704\demo4.html" target="content">表格元素</a></li>

    </ul>


    <iframe srcdoc="<a href='javascript:;'>请点击左侧菜单</a>" frameborder="1" name="content"></iframe>

</body>

</html>


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