简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > iframe后台布局框架+自定义样式
Blogger Information
Blog 37
fans 0
comment 1
visits 28413
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后台布局框架+自定义样式
kong
Original
471 people have browsed it

iframe后台布局/CSS基础

iframe后台布局

标签: <iframe>

常用属性

  1. iframe.src:嵌入页面路径url

  2. iframe.srcdoc: 嵌入html代码

  3. iframe.name: 与a标签target属性绑定 绑定特别重要要与target属性值相同
    -a.target: 在指定框架窗口页面打开
    -input/button.formtarget: 在指定框架窗口页面打开一般用于数据提交

  4. iframe.width: 宽度默认300px

  5. iframe.height: 默认高度150px

案例代码

  1. <!DOCTYPE html>
  2. <html>
  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.     <!--引入外部样式-->
  9.     <link rel="stylesheet" href="css/style.css">
  10. </head>
  11. <body>
  12.     <header>
  13.         <h1>网站后台管理系统</h1>
  14.         <div class="admin">
  15.             <em>admin</em>
  16.             <button>退出</button>
  17.         </div>
  18.     </header>
  19.     <section>
  20.         <div class="left">
  21.             <ul>
  22.                 <li><a href="//www.crochetkingdom.cn/" target="city">钩针编织</a></li>
  23.                 <li><a href="//paveldogreat.github.io/WebGL-Fluid-Simulation/" target="city">流体模拟</a></li>
  24.             </ul>
  25.         </div>
  26.         <iframe src="//www.crochetkingdom.cn/" frameborder="0" name="city" width="500px" height="500px" style="border: 1px solid #ccc;"></iframe>
  27.     </section>
  28. </body>
  29. </html>

案例截图

css 样式

css 样式来源分为两种 预置样式（浏览器自带样式） 自定义样式（自己编写的样式）

自定义样式优先级大于预置样式

案例预览

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！