博客列表 >iframe在网页中的应用及CSS常规选择器的应用

iframe在网页中的应用及CSS常规选择器的应用

安超
安超原创
2022年10月20日 04:53:45423浏览

1.iframe在网页中的应用

iframe 可以在网页中实现嵌套,即网页中显示网页。它经常和<a>标签一起,实现不同页面的同一界面显示。

  1. <a href="xx_1.html " target="frame">界面1</a>
  2. <a href="xx_2.html " target="frame">界面2</a>
  3. <a href="xx_3.html " target="frame">界面2</a>
  4. <iframe scrdoc="界面的提示等信息" name="frame">
  5. </iframe>
  6. <!-- 注意:iframe的name属性和<a>的target属性的值需要一致。-->

2.实现单一界面分别显示多个内容

iframe在网页中的应用

  1. <figure>
  2. <figcaption>
  3. <a href="form.html" target="frame">界面一</a>
  4. <a href="select-1.html" target="frame">界面二</a>
  5. <a href="list.html" target="frame">界面三</a>
  6. <a href="cssdemo.html" target="frame">界面四</a>
  7. </nav>
  8. </figcaption>
  9. <iframe src="form.html" name="frame" width="500" height="600" ></iframe>
  10. </figure>

3.CSS选择器的实现

CSS选择器的基本知识

1.样式来源,主要有三个:
a.用户代理样式;
b.用户定义样式
c.继承父级样式
2.样式的先后顺序
自定义> 继承样式>默认样式
3.可以人工干预优先级
行内样式>文档样式>外部样式

4.CSS选择器的实现

效果如图所示:
css的实现
代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>选择器的实现</title>
  8. <style>
  9. h3{
  10. color: red;
  11. }
  12. h3#h3id{
  13. color: blue;
  14. }
  15. h3.h3class{
  16. color: aqua;
  17. }
  18. p,ul{
  19. color: blueviolet;
  20. }
  21. a[href="#"]{
  22. color: chartreuse;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h3>h3标题</h3>
  28. <h3 id="h3id">h3id</h3>
  29. <h3 class="h3class">h3 class</h3>
  30. <p>段落的实现</p>
  31. <ul>
  32. <li>1</li>
  33. <li>2</li>
  34. <li>3</li>
  35. </ul>
  36. <a href="#" target="_blank">连接</a>
  37. </body>
  38. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议