博主信息
博文 20
粉丝 1
评论 0
访问量 22641
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
1210作业(iframe与css基础)
xosing的博客
原创
746人浏览过

创建一个后台操作界面

代码如下

  1. <header>
  2. <ul>
  3. <li><a href="1.html"></a></li>
  4. <li><a href="2.html">管理首页</a></li>
  5. <li><a href="3.html">数据管理</a></li>
  6. <li><a href="4.html">用户管理</a></li>
  7. <li><a href="5.html">网站首页</a></li>
  8. </ul>
  9. </header>
  10. <div class="container">
  11. <aside>
  12. <ul>
  13. <li><a href="1.html" target="webht">网站设置</a></li>
  14. <li><a href="2.html" target="webht">添加栏目</a></li>
  15. <li><a href="3.html" target="webht">添加文章</a></li>
  16. <li><a href="1.html" target="webht">友情链接</a></li>
  17. <li><a href="3.html" target="webht">模板设置</a></li>
  18. </ul>
  19. </aside>
  20. <main>
  21. <iframe srcdoc="<h1>迷你后台管理系统</h1>" name="webht"></iframe>
  22. </main>
  23. </div>
  24. <footer><p>版权所有@SHU.KIM</p></footer>

css样式如下

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. text-decoration: none;
  6. }
  7. body {
  8. width: 100vw;
  9. height: 100vh;
  10. display: grid;
  11. gap: 2px;
  12. grid-template-rows: 50px 1fr 50px;
  13. }
  14. header{
  15. background-color:#3d4466;
  16. text-align: center;
  17. }
  18. header li{
  19. float: left;
  20. list-style-type: none;
  21. padding: 5px;
  22. line-height: 40px;
  23. font-weight: bold;
  24. }
  25. header li a{
  26. color:#e2c4c4;
  27. padding: 2px 22px 2px 2px;
  28. }
  29. footer {
  30. background-color:rgb(85, 81, 81);
  31. text-align: center;
  32. line-height: 50px;
  33. color: white;
  34. }
  35. .container {
  36. display: grid;
  37. grid-template-columns: 200px 1fr;
  38. gap: 10px;
  39. padding: 10px;
  40. background-color:#8baeaf;
  41. }
  42. .container > aside {
  43. background-color: #d5f5f7;
  44. text-align: center;
  45. }
  46. aside li,a{
  47. margin-top: 20px;
  48. height: 30px;
  49. color:#5a2929;
  50. }
  51. .container > main {
  52. display: grid;
  53. background-color:mintcream;
  54. text-align: center;
  55. padding: 10px;
  56. }
  57. main iframe{
  58. border: 0;
  59. width: 100%;
  60. height: 100%;
  61. }

示例如下图

图下演示元素样式的四个来源

样式的优先级如下

标签选择器 < 类选择器 < ID选择器
强制优先等级 !important

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

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系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+教程免费学