当前位置:千赢国际官网 > 千赢网页手机版登入 > 框架元素

框架元素

文章作者:千赢网页手机版登入 上传时间:2019-08-24

CSS(一),CSS(

等下再写

等下再写...

前端-HTML-框架元素-同域访问,前端-html-框架

HTML元素分类-框架元素-同域访问

  0. <iframe>:规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

<iframe src="http://www.seeyunnan.net/uploads/allimg/190824/0435422324-0.jpg">
   <!--如果你的浏览器不支持iframe元素,那么就显示p元素内包裹的内容-->
  <p>您的浏览器不支持iframe 元素。</p>
</iframe>

    内联框架与主框架相互访问的方法(同域):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>main window</title>
</head>
<body>
  <div>
    <input type="button" value="调用内联框架中的方法" onclick="exec_iframe()">
  </div>
  <iframe src="b.html" name="myframe"></iframe>

  <script>
    //操作内联框架中方法的函数(window.myframe -> b.html , b.fIframe() -> 执行内联框架中的fIframe方法)。
    function exec_iframe(){
      window.myframe.fIframe();
    }
    //被内联框架调用的方法
    function fMain(){
      alert('主框架中的方法被执行成功!');
    }
  </script>
</body>
</html>

  

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>iframe window</title>
</head>
<body>
  <div>
    <input type="button" value="调用主框架中的方法" onclick="exec_main()">
  </div>
  <script>
    //操作主框架中方法的函数(parent对象指向当前窗口的父窗口,即主框架a.html)。
    function exec_main(){
      parent.fMain();
    }
    //被主框架调用的方法
    function fIframe(){
      alert('内联框架中的方法被执行成功!');
    }
  </script>
</body>
</html>

  

    

HTML元素分类-框架元素-同域访问 0. iframe:规定一个内联框架。一个内联框架被用来在当前 HT...

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器  chrome  IE  Firefox Safari  Opera
:first-child 4.0 7.0 3.0 3.1 9.6

注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>

ie7.0以前的浏览器是不支持first-child选择器的,所以使用class给特定元素设置样式。

(4):lang()伪类

指示规则应用于匹配某种语言的元素;

eg:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7        :lang(en-uk) {
 8            background-color: #ccccff;
 9        };
10     </style>
11 </head>
12 <body>
13     <p>He cried out in a bad Monty Python imitation,
14         He's pinin for the fjords!
15     </p>
16 </body>
17 </html>

图片 1

5.CSS中的伪元素

:before 插入元素前的内容

:after 插入元素后的内容

:first-letter 块元素的第一个字母

:first-line 块元素的第一行

(1):first-line伪元素是虚拟伪元素,它只添加应用于首行的特殊样式指示元素的首行。

eg:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>笔记</title>
 6     <style>
 7        p:first-line{
 8            background-color: green;
 9        }
10     </style>
11 </head>
12 <body>
13     <p>《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导,艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影,
       于2004年1月23日在美国正式上映。电影讲述伊万(艾什顿·库奇 饰)在小时候经历了一系列糟糕的事情,损坏了他原本完美的人生。
       在童年可怕记忆的折磨下,伊万请求心理医生的帮助,医生鼓励他把发生的事情一件件详细记下来,但是事情变得越来越糟糕。
14     </p>
15 </body>
16 </html>

图片 2

注意:当浏览器窗口,字体的大小改变时,设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时,网页作者不知道首行 在哪里结束。

(2):first-letter伪元素可以为块元素的首个字母添加特定的样式。

eg:

1 <style>
2        p:first-letter{
3            background-color: green;
4        }
5     </style>

图片 3

 

2016-10-28 《CSS入门经典》第五章 以下提示注意事项: 1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性...

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:框架元素

关键词: 千赢国际官网