Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 《内联构架元素与CSS入门》20201210
Blogger Information
Blog 26
fans 1
comment 1
visits 19671
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《内联构架元素与CSS入门》20201210
杨凡的博客
Original
610 people have browsed it

简单后台

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>硕富后台管理系统</title>
  9.     <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  10.     <script type="text/javascript" src="layui/layui.js"></script>
  11.     <style type="text/css">
  12.         .top-header{background: #01AAED;height: 50px;line-height: 50px;color: #fff;padding: 0px 10px;}
  13.         .top-header .top-title{font-size: 18px;}
  14.         .top-header .top-account{float: right;}
  15.         .top-header a{color: #fff;}
  16.         .left-aside{
  17.             display: grid;
  18.             background: #393D49;
  19.             width: 160px;
  20.         }
  21.         body{
  22.             position: relative;
  23.         }
  24.         .aside{
  25.             height: 800px;
  26.             width: 160px;
  27.             background: #393D49;
  28.         }
  29.         .left-aside a{
  30.             color: #fff;
  31.             padding: 10px;
  32.             margin-left: 10px;
  33.             border-color: #393D49;
  34.         }
  35.         .left-aside{
  37.         }
  38.         .main{
  39.            position: absolute;
  40.            top: 50px;
  41.            left: 160px;
  42.         }
  43.         iframe {
  44.             width: 1000px;
  45.             min-height: 42em;
  46.             background-color: #fff;
  47.             border: none;
  48.             padding: 2em;
  49.             }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="top-header">
  54.         <span class="top-title">硕富后台管理系统</span>
  55.         <div class="top-account">
  56.             <span class="layui-icon layui-icon-friends"></span>
  57.             <span class="top-username">admin</span>
  58.             <a href="javascript:;" onclick="logout()">退出</a>
  59.         </div>
  60.     </div>
  61.     <div class="aside">
  62.         <div class="left-aside">
  63.             <a href="../1208/demo3.html" target="content">图片</a>
  64.             <a href="../1209/demo1.html" target="content">列表元素</a>
  65.             <a href="../1209/demo2.html" target="content">表格元素</a>
  66.             <a href="../1209/demo3.html" target="content">课程表</a>
  67.          </div>
  68.     </div>
  69.     <div class="main">
  70.         <iframe src="home.html" frameborder="0" name="content"></iframe>
  71.     </div>
  72. </body>
  73. </html>
  74. <script type="text/javascript">
  75.     //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  76.     layui.use('element', function(){
  77.         var element = layui.element;
  79.         //…
  80.     });
  82. </script>

效果展示


总结

引用了layui的一些样式
参考了老师的css样式并略作修改
使用的定位进行iframe的固定，由于grid不熟练，没有实现grid的网格布局效果进行iframe的布局
iframe默认引入了欢迎语页面
通过iframe的name属性与a标签的target属性来进行绑定，实现iframe页面跳转功能

CCS样式

元素样式来源

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

样式引入及优先级

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

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post