Community Learn Tools Library Leisure
search
English
Home > List of blog posts > iframe与CSS入门
Blogger Information
Blog 7
fans 0
comment 0
visits 4859
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与CSS入门
波元的PHP学习
Original
627 people have browsed it

iframe使用

1.内联框架中地图的使用

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <title>内联框架标签的工作原理</title>
  5. <style>
  6.     iframe{width:30em  height:16em ;}
  7.     div{display: grid;}
  8.   </style>
  9. </head>
  10. <body>
  11. <div>  <a href="https://j.map.baidu.com/a3/WnE" target="shmap">上海市地图</a>
  12.     <iframe srcdoc="上海市地图" frameborder="1" name="shmap"></iframe>    </div></body>

2.iframe制作后台

  1. <body>
  2.    <div class="header">
  4.     结构损伤查询</div>
  5.     <div  class="aside" >
  6.        <a href="../1208/demo1.html" target="content">B-2255</a>
  7.        <a href="../1209/demo3.html" target="content">B-2256</a>
  8.        <a href="" target="content">B-6021</a>
  9.        <a href="" target="content">B-6022</a>
  10.        <a href="" target="content">B-6023</a>
  11.        <a href="" target="content">B-6679</a>
  12.        <a href="" target="content">B-6680</a>
  13.        <a href="" target="content">B-6681</a>
  14.    </div> 
  15.          <div class="main"><iframe src="" name="content" ></iframe>
  16.      </div></body>

css入门

css语法和基本术语
<!-- 如果CSS样式仅用来控制当前页面的元素用STYLE标签写在当前页面中 -->

术语: 规则，选择器，声明块，属性，值
选择器: H1就是 选中页面一个元素的工具
声明块: 由一对{…}包住的内容
规则： 选择器+声明块
属性和值 ： 写在声明块中的名值对

1、标签选择器 

  1. h1{
  2.     /* 声明块中的每一个名值对 叫样式声明  中间用分号隔开*/
  3.     /* 后面加!important 可以强制提升优先级 */
  4.   color:green !important; font-weight: 300;
  5.     }

2、属性选择器 

  1. *表示所有元素和标签    *[]{}      */
  2. *[class=title]{
  3. color: bisque;}
  4. h2[class=title]{color: blueviolet;}

3、class选择器也叫类选择器
尽可能不要用标签,可以在TITLE后加：选择FIRST-OF-TYPE这种方式选择第一个，而不是加H1标签。

  1.  class直接用.代替如.title{}  */
  2. .title:first-of-type{color: chocolate;}

４、ID选择器 

  1. #page-title{ color: chocolate;}
  2. /* 选择器优先级 tag<class<id */

布局的应用

  1. <body>
  2. <!-- 页眉栏 -->
  3. <header>&lt;header&gt; </header>
  4. <!-- div标签是一个通用容器，内部可以放置任何类型元素，容器内容不定时使用它 -->
  5. <!-- span标签 通用容器，不过它内容是行内元素、文本、图片、链接、input -->
  6. <div class="container">
  7.     <!-- 侧边栏 -->
  8. <aside>&lt;aside&gt;</aside>
  9. <!-- 主体部分 -->
  10. <main> &lt;main&gt;
  11. <div>
  12. <section>&lt;section&gt;</section> 
  13. <section>&lt;section&gt;</section>
  14. </div>   
  15. </main>  
  16. </div>
  17. </body>
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