Blogger Information
Blog 9
fans 0
comment 0
visits 3490
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1019——后台小案例
手机用户284061708
Original
339 people have browsed it

本次实现一个后台案例

头部+左侧导航+右侧iframe展示

代码如下:

  1. <!-- 添加样式 -->
  2. <style>
  3. /* 头部样式 */
  4. .header{
  5. background-color: #009688;
  6. height: 60px;
  7. margin-left: -10px;
  8. margin-top: -20px;
  9. border-bottom: 1px solid gray;
  10. }
  11. /* 头部文字样式 */
  12. figure span{
  13. font-size: 30px;
  14. font-weight: bolder;
  15. color: aliceblue;
  16. }
  17. /* 用户登录信息样式 */
  18. section{
  19. float:right;
  20. }
  21. /* 导航排列样式 */
  22. .daohang{
  23. margin-left: -10px;
  24. margin-top: 0px;
  25. }
  26. /* 导航样式 */
  27. nav a{
  28. display: grid;
  29. text-align: center;
  30. border: 1px solid gray;
  31. width: 15%;
  32. height: 50px;
  33. font-weight: bold;
  34. background-color: #009688;
  35. color: aliceblue;
  36. text-decoration: none;
  37. }
  38. /* 内容展示页样式 */
  39. .container iframe{
  40. display: block;
  41. margin-left: 15%;
  42. width: 85%;
  43. height: 250px;
  44. margin-top: -25%;
  45. }
  46. </style>
  47. <!-- 头部---用户信息 -->
  48. <div class="header" >
  49. <figure>
  50. <span>后台管理系统 1.0</span>
  51. <section >
  52. <em>用户名:admin</em>
  53. &nbsp;
  54. <button onclick="location.href='logout.php'" style="color:red">退出</button>
  55. </section>
  56. </figure>
  57. </div>
  58. <!-- 左侧导航栏 -->
  59. <div class="daohang">
  60. <nav >
  61. <a href="index.html" target="admin">首页</a>
  62. <a href="user.html" target="admin">用户管理</a>
  63. <a href="artical.html" target="admin">文章管理</a>
  64. <a href="about.html" target="admin">关于我们</a>
  65. <a href="setting.html" target="admin">系统设置</a>
  66. </nav>
  67. </div>
  68. <!-- 默认首页 -->
  69. <div class="container">
  70. <iframe src="index.html" name="admin"></iframe>
  71. </div>

实现效果如下图:

Correcting teacher:PHPzPHPz

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