iframe使用

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

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

2.iframe制作后台

<body>
   <div class="header">
    结构损伤查询</div>
    <div  class="aside" >
       <a href="../1208/demo1.html" target="content">B-2255</a>
       <a href="../1209/demo3.html" target="content">B-2256</a>
       <a href="" target="content">B-6021</a>
       <a href="" target="content">B-6022</a>
       <a href="" target="content">B-6023</a>
       <a href="" target="content">B-6679</a>
       <a href="" target="content">B-6680</a>
       <a href="" target="content">B-6681</a>
   </div> 
         <div class="main"><iframe src="" name="content" ></iframe>
     </div></body>

css入门

css语法和基本术语

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

1、标签选择器

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

2、属性选择器

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

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

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

４、ID选择器

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

布局的应用

<body>
<!-- 页眉栏 -->
<header>&lt;header&gt; </header>
<!-- div标签是一个通用容器，内部可以放置任何类型元素，容器内容不定时使用它 -->
<!-- span标签 通用容器，不过它内容是行内元素、文本、图片、链接、input -->
<div class="container">
    <!-- 侧边栏 -->
<aside>&lt;aside&gt;</aside>
<!-- 主体部分 -->
<main> &lt;main&gt;
<div>
<section>&lt;section&gt;</section> 
<section>&lt;section&gt;</section>
</div>   
</main>  
</div>
</body>

iframe与CSS入门

iframe使用

css入门

布局的应用

相关文章