Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 内联构架元素与CSS入门
Blogger Information
Blog 5
fans 0
comment 0
visits 3452
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入门
Jason药师
Original
465 people have browsed it

内联框架标签的工作原理与应用

\<iframe>标签

  • \<iframe> HTML内联框架元素 。它能够将另一个HTML页面嵌入到当前页面中。

实例：

  1. <div>
  2.     <a href="https://j.map.baidu.com/ef/_6" target="hefei">合肥市</a>
  3.     <iframe srcdoc="合肥市地图" name="hefei"></iframe>
  4. </div>

常常用于网站管理后台

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe写一个迷你小后台</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             display: grid;
  10.             grid-template-columns: 10em 1fr;
  11.         }
  12.         .header {
  13.             grid-column: span 2;
  14.             height: 3em;
  15.             background-color: lightblue;
  16.         }
  17.         .aside {
  18.             display: grid;
  19.             grid-template-rows: repeat(auto-fit, 2em);
  20.             background-color: lightcyan;
  21.         }
  22.         iframe {
  23.             width: 100%;
  24.             min-height: 42em;
  25.             background-color: #fff;
  26.             border: none;
  27.             padding: 2em;
  28.         }
  29.         a {
  30.             text-decoration: none;
  31.             color: #555;
  32.             background-color: #fff;
  33.             border-bottom: 1px solid #ccc;
  34.             border-right: 1px solid #ccc;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="header">网站管理后台</div>
  40.     <div class="aside">
  41.         <a href="../20-12-08 HTML/demo2.html" target="content">链接与锚点</a>
  42.         <a href="../20-12-09 HTML/demo1.html" target="content">小学课程表</a>
  43.         <a href="../20-12-09 HTML/demo2.html" target="content">表单</a>
  44.         <a href="../20-12-08 HTML/demo3.html" target="content">图片元素</a>
  45.         <a href="../19HTML/2.HTML5常用标签.html" target="content">HTML5常用标签/a>
  46.     </div>
  47.     <div class="main">
  48.         <iframe srcdoc="请右击左侧按钮" name="content"></iframe>
  49.     </div>
  50. </body>
  51. </html>

页面布局还可以使用专用标签：

  • \<header> 页眉标签
  • \<aside> 侧边栏标签
  • \<main> 主体标签
  • \<footer> 页脚标签
  • \<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>布局元素</title>
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.         box-sizing: border-box;
  11.       }
  12.       body {
  13.         width: 100vw;
  14.         height: 100vh;
  15.         display: grid;
  16.         grid-template-rows: 60px 1fr 60px;
  17.         gap: 10px;
  18.       }
  19.       header,
  20.       footer {
  21.         height: 80px;
  22.         background-color: lightgreen;
  23.         text-align: center;
  24.       }
  25.       .container {
  26.         display: grid;
  27.         grid-template-columns: 200px 1fr;
  28.         gap: 10px;
  29.         padding: 10px;
  30.         background-color: lightskyblue;
  31.       }
  32.       .container > aside {
  33.         background-color: lightcyan;
  34.         text-align: center;
  35.       }
  36.       .container > main {
  37.         display: grid;
  38.         grid-template-rows: 1fr 200px;
  40.         background-color: wheat;
  41.         text-align: center;
  42.         padding: 10px;
  43.       }
  44.       .container > main > div {
  45.         display: grid;
  46.         grid-template-columns: 1fr 1fr;
  47.         gap: 10px;
  48.       }
  49.       main div section {
  50.         background-color: violet;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <!-- 页眉 -->
  56.     <!-- 实体字符：页面中原样显示，不会被浏览器解析 -->
  57.     <header><h1>&lt;header&gt;</h1></header>
  59.     <!-- div:通用容器块标签,内部可以放置任何类型的元素,当一个容器类型不定时可以用它 -->
  60.     <!-- span: 通用容器,不过它内部是行内元素/文本/图片/链接/Input  -->
  61.     <div class="container">
  62.       <!-- 侧边栏 -->
  63.       <aside><h1>&lt;aside&gt;</h1></aside>
  64.       <!-- 主体 -->
  65.       <main>
  66.         <h1>&lt;main&gt;</h1>
  67.         <!-- <article>
  68.           <h3>今晚是个好日子</h3>
  69.           <p>我认识了这么多的来自全球的Web开发爱好者,很荣幸给大家上课</p>
  70.         </article> -->
  71.         <div>
  72.           <section>
  73.             <h1>&lt;section&gt;</h1>
  74.           </section>
  75.           <section>
  76.             <h1>&lt;section&gt;</h1>
  77.           </section>
  78.         </div>
  79.       </main>
  80.     </div>
  82.     <!-- 页脚 -->
  83.     <footer><h1>&lt;footer&gt;</h1></footer>
  84.   </body>
  85. </html>

CSS初接触

css语法和基本术语

  • 术语: 规则， 选择器，声明块，属性和值

    • 选择器: h1

    • 声明块: 由一对”{….}”包住的内容

    • 规则: 选择器 + 声明块

    • 属性和值: 写在声明块中的名值对

例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>css语法和基本术语</title>
  6.     <!-- 如果你的css样式仅仅用来控制当前页面的元素,就用style标签写到当前页面中 -->
  7.     <style>
  8.       /* 术语: 规则， 选择器，声明块，属性和值 */
  9.       /* 选择器: h1  */
  10.       /* 声明块: 由一对"{....}"包住的内容 */
  11.       /* 规则: 选择器 + 声明块 */
  12.       /* 属性和值: 写在声明块中的名值对 */
  13.       h1 {
  14.         /* 声明块中的每一个名值对,叫一个“样式声明” */
  15.         /* 前景色 */
  16.         color: green;
  17.         font-weight: 200;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <header class="page-header">
  23.       <h1 id="page-title" class="title">Web全栈开发入门课程</h1>
  24.     </header>
  25.   </body>
  26. </html>

层叠与优先级

一个元素会受到四个级别声明的影响:
1、继承的：根据元素在文档的结构和层级关系来确定它最终的样式
2、浏览器的：用户代理样式，大多数浏览器表现基本一致
3、自定义的：写到html文档的\<style>标签中
4、行内样式（内联样式），写到元素的style属性中的

css选择器：
1、标签选择器(元素)
2、属性选择器
3、类选择器(class)
4、id选择器

选择器的优先级别：

标签选择器 < class < id

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