Community Learn Tools Library Leisure
search
English
Home > List of blog posts > iframe简单后台实例和html样式的使用
Blogger Information
Blog 7
fans 0
comment 0
visits 2538
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
iframe简单后台实例和html样式的使用
追梦赤子
Original
295 people have browsed it

iframe简单后台实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>iframe简单后台布局</title>
  8.     <style>
  9.         body {
  10.             display: grid;
  11.             grid-template-columns: 12em 1fr;
  12.             grid-template-rows: 5em 1fr;
  13.         }
  14.         body header {
  15.             grid-column-end: span 2;
  16.             background-color: seagreen;
  17.             display: flex;
  18.             /* padding: 2em; */
  19.         }
  20.         body header h1 {
  21.             display: flex;
  22.         }
  23.         body header section {
  24.             color: red;
  25.             margin-left: auto;
  26.             padding-right: 2em;
  27.         }
  28.         body header section i {
  29.             color: aliceblue;
  30.             margin-right: 1em;
  31.         }
  32.         nav {
  33.             display: grid;
  34.             grid-auto-rows: min-content;
  35.             background-color: lightyellow;
  36.             border-right: 1px solid currentColor;
  37.             padding: 1em;
  38.             list-style: none;
  39.         }
  40.         nav a {
  41.             text-decoration: none;
  42.             padding: 0.5em 0;
  43.             border-bottom: 1px solid #555;
  44.         }
  45.         body iframe {
  46.             width: calc(100vw - 10em);
  47.             height:calc(100vw - 60em);
  48.             border: none;
  49.             background-color: #efefef;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <!-- 顶部 -->
  55.     <header>
  56.         <h1>简单管理后台</h1>
  57.         <section>
  58.             <i>admin</i>
  59.             <button type="button">退出</button>
  60.         </section>
  61.     </header>
  62.     <!-- 左侧 -->
  63.     <nav>
  64.         <a href="../0116/work01.html" target="content">课程表</a>
  65.         <a href="work02.html" target="content">样式设置和优先级</a>
  66.         <a href="../0118/work01.html" target="content">html选择器</a>
  67.     </nav>
  68.     <!-- 内容主体 -->
  69.     <iframe src="" name="content" frameborder="0">
  71.     </iframe>
  72. </body>
  73. </html>

html样式来源和优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>html样式来源与优先级实例</title>
  8.     <!-- 外部样式引用方式1 link标签(异步)) -->
  9.     <!-- <link rel="stylesheet" href="static/css/style.css"> -->
  10.     <style>
  11.         /* 外部样式引用方式2 指令 @import url()(同步)  */
  12.         @import url('static/css/style.css');
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 1、设置行内样式 -->
  17.     <p style="color: red;">我是行内样式tag.style</p>
  18.     <!-- 2、设置文档样式 -->
  19.     <style>
  20.         p:nth-child(n+2) {
  21.             color: green;
  22.         }
  23.     </style>
  24.     <p>我是文档样式"<"style">"</p>
  25.     <!-- 3、引用外部样式 -->
  26.     <h2>我通过link标签(@import 指令)引用外部样式</h2>
  27.     <hr/>
  28.     <label for="">样式优先级:</label>
  29.     <h2 style="color:blue;">行内样式 > 文档样式 > 外部样式</h2>
  30. </body>
  31. </html>

Correcting teacher：PHPzPHPz

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