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

一:基于iframe制作网站后台

Web端的后台管理员页面,基本都是页头,左侧菜单,右侧为主要页面。实现的方法有多种,iframe是最常见的一种,实现效果如下:

HTML代码:

  1. <body>
  2. <header>网站管理后台</header>
  3. <aside>
  4. <a href="img1/telet.png" target="content">添加/删除管理员 </a>
  5. <a href="img1/hotel.png" target="content">酒店管理</a>
  6. <a href="img1/travel.png" target="content">旅行社管理</a>
  7. <a href="img1/restrunt.png" target="content">餐饮管理</a>
  8. <a href="img1/store.png" target="content">店铺管理</a>
  9. </aside>
  10. <main>
  11. <iframe srcdoc="点击右侧" name="content"></iframe>
  12. </main>
  13. </body>

css样式代码:

  1. <style type="text/css">
  2. body{
  3. margin: 0;
  4. display: grid;
  5. grid-template-columns: 10em 1fr;
  6. }
  7. header{
  8. grid-column: span 2;
  9. height: 3em;
  10. background-color: #1363AD;
  11. font-size: 19px;
  12. }
  13. aside{
  14. display: grid;
  15. grid-template-rows: repeat(auto-fill,2em);
  16. background-color: #F2FAFD;
  17. text-align: center;
  18. }
  19. iframe{
  20. width: 100%;
  21. min-height: 42em;
  22. border: none;
  23. padding: 2em;
  24. }
  25. a{
  26. text-decoration: none;
  27. color: black;
  28. background-color: #D9EAF3;
  29. border-bottom: 1px solid darkgray;
  30. border-right: 1px solid darkgray;
  31. }
  32. </style>

css选择器优先级:

#ID选择器>.类选择器>标签选择器

例外:!importent:无限大

元素样式的四个来源:

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

批改状态:合格

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