Blogger Information
Blog 19
fans 0
comment 6
visits 19096
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基本元素(三)
葵花宝典
Original
649 people have browsed it

iframe简单应用和CSS选择器样式优先级

用iframe写一个简单后台版面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>简单后台管理版式</title>
  7. <style>
  8. body{margin: 0px;padding: 0px;}
  9. header{background-color: coral;height: 50px;padding: 10px;text-align: center;}
  10. aside{background-color: darkgray;height: 400px;width: 150px;float: left;}
  11. a{display: block;margin: 20px;}
  12. main{background-color: darkkhaki;height: 400px;}
  13. footer{height: 50px;background-color: darkseagreen;text-align: center;}
  14. span{font-weight: 1.5em;padding-right: 20px;color: darkslategrey;}
  15. </style>
  16. </head>
  17. <body>
  18. <div>
  19. <header><h2>WEB系统后台管理</h2></header>
  20. <div>
  21. <aside>
  22. <a href="http://baidu.com" target="main">组织架构</a>
  23. <a href="http://163.com" target="main">业务服务</a>
  24. <a href="http://mail.163.com" target="main">业务规则</a>
  25. <a href="http://www.jackli.top:82" target="main">系统管理</a>
  26. </aside>
  27. <main>
  28. <iframe src="" srcdoc="<em>请选择功能</em>" name="main" frameborder="0" width="500px" height="400px"></iframe>
  29. </main>
  30. </div>
  31. <footer>
  32. <span>技术支持:php中文网学习心得</span>
  33. <span><em>mail:123@qq.com</em></span>
  34. <span><del>没有版权</del></span>
  35. </footer>
  36. </div>
  37. </body>
  38. </html>

结果图示

iframe简单后台演示


CSS样式来源及优先级,CSS选择器优先级示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>元素CSS样式四个来源</title>
  7. <style>
  8. span{margin-right: 20px;background-color: rgb(223, 217, 217);}
  9. li{margin: 10px; }
  10. .mycol{color: blue;}
  11. #col{color: crimson;}
  12. .col{color: darkblue;}
  13. ol{color: rgb(15, 146, 15);}
  14. </style>
  15. </head>
  16. <body>
  17. <h3>CSS样式来源及优先级</h3>
  18. <ul>
  19. <li style="color: red;" class="mycol"><span>优先1</span>CSS样式来源: 行内样式为红色</li>
  20. <li class="mycol"><span>优先2</span>CSS样式来源: 自定义样式为蓝色</li>
  21. <li><span>优先3</span>CSS样式来源: 浏览器样式</li>
  22. <li><span>优先4</span>CSS样式来源: 继承HTML</li>
  23. </ul>
  24. <h3>CSS选择器优先级</h3>
  25. <ol>
  26. <li id="col" class="col">
  27. <span>优先级1(ID)</span>ID颜色优先于OL标签和类
  28. </li>
  29. <li class="col">
  30. <span>优先级2(类)</span>类颜色优先于OL标签
  31. </li>
  32. <li >
  33. <span>优先级3(标签)</span>继承OL标签颜色
  34. </li>
  35. </ol>
  36. </body>
  37. </html>

结果图示

CSS样式优先级

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