Blogger Information
Blog 5
fans 0
comment 0
visits 3936
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1210-认识iframe标签和CSS
待伊散落尽芳华
Original
496 people have browsed it

1210-认识iframe标签和CSS

1. 认识iframe

iframe 内联框架,可用于显示其它连接内容。常与<a>标签用于后台管理页面。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>iframe写一个迷你小后台</title>
  6. <link rel="stylesheet" href="style/iframe.css" />
  7. </head>
  8. <body>
  9. <div class="header"><h4>搜索大全</h4></div>
  10. <div class="aside">
  11. <a href="https://www.baidu.com" target="content">百度</a>
  12. <a href="https://www.sogou.com" target="content">搜狗</a>
  13. <a href="https://www.360.com" target="content">360</a>
  14. <a href="https://www.google.com" target="content">谷歌</a>
  15. <a href="https://www.bing.com" target="content">必应</a>
  16. </div>
  17. <div class="main">
  18. <iframe srcdoc="欢迎使用搜索大全,请选择左侧搜索引擎" name="content"></iframe>
  19. </div>
  20. </body>
  21. </html>

2. 特殊符号

部分特殊符号需要显示不可以直接写,需按照指定格式:&XXX;

3. 网页常用布局

网页常用布局 1-2-1(头部-主体(侧边栏+内容)-底部)
H5 布局标签:

  1. header:头部
  2. aside:侧边
  3. section:区段
  4. article: 文章内容
  5. footer: 底部
  6. main:主要内容
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>布局元素</title>
  6. <link rel="stylesheet" href="style/layout.css" />
  7. </head>
  8. <body>
  9. <!-- 页眉 -->
  10. <!-- 实体字符:页面中原样显示,不会被浏览器解析 -->
  11. <header><h1>&lt;header&gt;</h1></header>
  12. <!-- div:通用容器块标签,内部可以放置任何类型的元素,当一个容器类型不定时可以用它 -->
  13. <!-- span: 通用容器,不过它内部是行内元素/文本/图片/链接/Input -->
  14. <div class="container">
  15. <!-- 侧边栏 -->
  16. <aside><h1>&lt;aside&gt;</h1></aside>
  17. <!-- 主体 -->
  18. <main>
  19. <h1>&lt;main&gt;</h1>
  20. <!-- <article>
  21. <h3>今晚是个好日子</h3>
  22. <p>我认识了这么多的来自全球的Web开发爱好者,很荣幸给大家上课</p>
  23. </article> -->
  24. <div>
  25. <section>
  26. <h1>&lt;section&gt;</h1>
  27. </section>
  28. <section>
  29. <h1>&lt;section&gt;</h1>
  30. </section>
  31. </div>
  32. </main>
  33. </div>
  34. <!-- 页脚 -->
  35. <footer><h1>&lt;footer&gt;</h1></footer>
  36. </body>
  37. </html>

4. 认识css

css使用:

  1. 直接在head > stlye里写css代码
  2. 使用link引用css文件
  3. 使用js控制

css格式:选择器+声明块+(属性:值)
css样式优先级:tag < class < id

css选择器:

  1. 标签选择器
  2. 类选择器
  3. 属性选择器
  4. id选择器

css样式四个来源及影响力:继承HTML < 浏览器代理 < 用户自定义 < 行内定义

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