简单后台

<!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页面跳转功能

CCS样式

元素样式来源

ID	来源	说明
1	继承的	根据元素在文档的结构和层级关系来确定它最终的样式
2	浏览器定义的	用户代理样式，大多数浏览器表现基本一致
3	用户自定义样式	写到了 html 文档的 style 标签中
4	行内样式（内联样式）	仅适用于当前元素，对其它元素无影响，写在标签里的 style 属性里

样式引入及优先级

层叠样式表，对一个元素的样式、布局进行修改
css样式引入优先级
元素添加style属性>html文档添加style元素>html引入style.css
- 元素添加style属性仅对当前元素有效
- html文档添加<style>元素仅对当前html文档有效
- html引入style.css对所有html文档均有效
选择器优先级
ID选择器>class选择器>标签选择器
- 可以通过!important来提升选择器的优先级

《内联构架元素与CSS入门》20201210

简单后台

效果展示

总结

CCS样式

元素样式来源

样式引入及优先级

相关文章