Community Learn Tools Library Leisure
search
English
Home > List of blog posts > iframe案例来练习与HTML样式基础
Blogger Information
Blog 16
fans 0
comment 0
visits 5733
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样式基础
Sinan学习博客
Original
343 people have browsed it

iframe案例来练习与HTML样式基础

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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body {
  15.         height: 100vh;
  16.         width: 100vw;
  17.         display: grid;
  18.         grid-template-columns: 12em 1fr;
  19.         grid-template-rows: 8em 1fr;
  20.       }
  21.       body header {
  22.         display: flex;
  23.         background-color: dodgerblue;
  24.         /* 设置header容器的宽度，它跨越了2列 */
  25.         grid-column-end: span 2;
  26.         line-height: 8em;
  27.         padding: 0 20px;
  28.       }
  29.       body header hgroup {
  30.         display: flex;
  31.         color: #fff;
  32.       }
  33.       body header hgroup h1 {
  34.         font-size: 3em;
  35.       }
  36.       body header hgroup h2 {
  37.         font-size: 1em;
  38.         margin-left: 20px;
  39.       }
  40.       body header p {
  41.         margin-left: auto;
  42.         color: #fff;
  43.       }
  44.       body header p button {
  45.         margin-left: 10px;
  46.         padding: 4px;
  47.         border: none;
  48.       }
  49.       body nav {
  50.         background-color: #eee;
  51.         border-right: 1px solid #333;
  52.         padding: 10px;
  53.       }
  54.       body iframe {
  55.         width: 100%;
  56.         height: 100%;
  57.         border: none;
  58.       }
  59.       body nav ul li {
  60.         list-style-type: none;
  61.       }
  62.       body nav ul li a {
  63.         display: block;
  64.         padding: 0.5em 0;
  65.         border-bottom: 1px solid #555;
  66.         text-align: center;
  67.         text-decoration: none;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <!-- 顶部商标与状态 -->
  73.     <header>
  74.       <hgroup>
  75.         <h1>LOGO</h1>
  76.         <h2>网站后台管理系统 <small>(1.1v)</small></h2>
  77.       </hgroup>
  78.       <p><em>admin</em><button onclick="logout()">退出登录</button></p>
  79.     </header>
  80.     <!-- 左侧导航 -->
  81.     <nav>
  82.       <ul>
  83.         <li><a href="#" target="content">item1</a></li>
  84.         <li><a href="#" target="content">item2</a></li>
  85.         <li><a href="#" target="content">item3</a></li>
  86.         <li><a href="#" target="content">item4</a></li>
  87.         <li><a href="#" target="content">item5</a></li>
  88.         <li><a href="#" target="content">item6</a></li>
  89.       </ul>
  90.     </nav>
  91.     <!-- iframe动态内容部分 -->
  92.     <iframe src="inc/default.html" name="content"></iframe>
  93.     <!-- JS代码 -->
  94.     <script>
  95.       function logout() {
  96.         return confirm("是否退出?") ? alert("退出成功") : false;
  97.       }
  98.     </script>
  99.   </body>
  100. </html>

效果预览：

元素样式来源

元素样式来两大来源：预置样式、自定义样式

一、预置样式我们可以在浏览器中查看如下：

二、自定义样式同样用h1标题示例加背景色如下：

元素样式优先级

元素样式写在不同的地方优先级会有所区别：

  • 写在元素自身的style属性里叫做行间样式
  • 写在本文档里的style标签里的文档样式
  • 写在外部CSS文档里的外部样式

它们的优先级为：行间样式 > 文档样式 > 外部样式 > 预置样式 如下图示：

  1. 外部样式覆盖了预置样式：外部样式 > 预置样式

  2. 文档样式又覆盖了外部样式：文档样式 > 外部样式 > 预置样式

  3. 行间样式覆盖了所有样式:行间样式 > 文档样式 > 外部样式 > 预置样式

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