收藏
天蓬老师批改状态：合格
老师批语：
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>硕富后台管理系统</title><link rel="stylesheet" type="text/css" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script><style type="text/css">.top-header{background: #01AAED;height: 50px;line-height: 50px;color: #fff;padding: 0px 10px;}.top-header .top-title{font-size: 18px;}.top-header .top-account{float: right;}.top-header a{color: #fff;}.left-aside{display: grid;background: #393D49;width: 160px;}body{position: relative;}.aside{height: 800px;width: 160px;background: #393D49;}.left-aside a{color: #fff;padding: 10px;margin-left: 10px;border-color: #393D49;}.left-aside{}.main{position: absolute;top: 50px;left: 160px;}iframe {width: 1000px;min-height: 42em;background-color: #fff;border: none;padding: 2em;}</style></head><body><div class="top-header"><span class="top-title">硕富后台管理系统</span><div class="top-account"><span class="layui-icon layui-icon-friends"></span><span class="top-username">admin</span><a href="javascript:;" onclick="logout()">退出</a></div></div><div class="aside"><div class="left-aside"><a href="../1208/demo3.html" target="content">图片</a><a href="../1209/demo1.html" target="content">列表元素</a><a href="../1209/demo2.html" target="content">表格元素</a><a href="../1209/demo3.html" target="content">课程表</a></div></div><div class="main"><iframe src="home.html" frameborder="0" name="content"></iframe></div></body></html><script type="text/javascript">//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作layui.use('element', function(){var element = layui.element;//…});</script>
引用了layui的一些样式
参考了老师的css样式并略作修改
使用的定位进行iframe的固定，由于grid不熟练，没有实现grid的网格布局效果进行iframe的布局
iframe默认引入了欢迎语页面
通过iframe的name属性与a标签的target属性来进行绑定，实现iframe页面跳转功能
| ID | 来源 | 说明 |
|---|---|---|
| 1 | 继承的 | 根据元素在文档的结构和层级关系来确定它最终的样式 |
| 2 | 浏览器定义的 | 用户代理样式，大多数浏览器表现基本一致 |
| 3 | 用户自定义样式 | 写到了 html 文档的 style 标签中 |
| 4 | 行内样式（内联样式） | 仅适用于当前元素，对其它元素无影响，写在标签里的 style 属性里 |
style属性>html文档添加style元素>html引入style.cssstyle.css对所有html文档均有效!important来提升选择器的优先级
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
