Blogger Information
Blog 41
fans 0
comment 0
visits 40980
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
iframe仿写网站小后台页面|css优先级
幸福敲门的博客
Original
593 people have browsed it

iframe仿写网站小后台页面

  1. <!DOCTYPE html>
  2. <html lang="xfqm">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>iframe仿写一个迷你小后台</title>
  6. <style>
  7. body {
  8. margin: 0;
  9. display: grid;
  10. grid-template-columns: 10em 1fr;
  11. }
  12. .header {
  13. grid-column: span 2;
  14. height: 3em;
  15. background-color: lightblue;
  16. }
  17. .aside {
  18. display: grid;
  19. grid-template-rows: repeat(auto-fit, 2em);
  20. background-color: lightcyan;
  21. }
  22. iframe {
  23. width: 100%;
  24. min-height: 42em;
  25. background-color: #fff;
  26. border: none;
  27. padding: 2em;
  28. }
  29. a {
  30. text-decoration: none;
  31. color: #555;
  32. background-color: #fff;
  33. border-bottom: 1px solid #ccc;
  34. border-right: 1px solid #ccc;
  35. }
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="header">网站管理后台</div>
  41. <div class="aside">
  42. <a href="https://www.php.cn/blog.html" target="content">php中文网博客</a>
  43. <a href="https://image.baidu.com/" target="content">百度图片</a>
  44. <a href="http://sports.sina.com.cn/" target="content">新浪体育</a>
  45. <a href="https://weibo.com/" target="content">微博</a>
  46. <a href="https://www.iqiyi.com/" target="content">爱奇艺</a>
  47. </div>
  48. <div class="main">
  49. <iframe srcdoc="请右击左侧按钮" name="content"></iframe>
  50. </div>
  51. </body>
  52. </html>

图示:
php中文网截图

css优先级

ID选择器 > 类选择器 > 属性选择器 > 标签选择器
!important 强制提升css优先级


图示:
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