博主信息
博文 19
粉丝 0
评论 6
访问量 23241
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML基本元素(三)
葵花宝典
原创
813人浏览过

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样式优先级

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学