博主信息
博文 3
粉丝 0
评论 0
访问量 1964
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
简单后台+简单CSS
A瞌睡虫
原创
793人浏览过

Css选择器权重

  • 1.行内样式
  • 2.ID选择器
  • 3.类选择器
  • 4.标签选择器

    简单后台代码

  • 代码部分
    1. <title>后台管理系统</title>
    2. </head>
    3. <body>
    4. <header>
    5. <div class="top">
    6. <img class="jh" src="./images/jh.jpg" alt="">
    7. <p class="top_text">火星警局管理后台</p>
    8. </div>
    9. </header>
    10. <aside>
    11. <div class="memu_1">
    12. <a class="memu" href="https://www.baidu.com" target="content">百度菜单</a><br />
    13. <a class="memu" href="https://www.php.cn" target="content">php菜单</a><br />
    14. <a class="memu" href="https://www.163.com" target="content">网易菜单</a><br />
    15. <a class="memu" href="https://www.qq.com" target="content">腾讯菜单</a><br />
    16. <a class="memu" href="https://www.weixn.com" target="content">微信菜单</a><br />
    17. </div>
    18. </aside>
    19. <main>
    20. <div class="box">
    21. <iframe class="main" srcdoc="欢迎使用火星管理系统" name="content"></iframe>
    22. </div>
    23. </main>
    24. <footer>本程序由火星公司开发</footer>
    25. <style>
    26. *{
    27. margin: 0;
    28. padding: 0;
    29. }
    30. .jh{
    31. width: 30px;
    32. float: left;
    33. padding-top: 10px;
    34. }
    35. .top_text{
    36. line-height: 40px;
    37. color: crimson;
    38. font-size: 20px;
    39. text-indent: 1em;
    40. }
    41. header{
    42. background-color: blue;
    43. width: 100%;
    44. height: 50px;
    45. }
    46. .top{
    47. padding-left: 80px;
    48. }
    49. .memu_1{
    50. width: 100px;
    51. text-align: center;
    52. }
    53. .memu{
    54. text-decoration: none;
    55. color: cadetblue;
    56. line-height: 30px;
    57. border: 1px solid;
    58. }
    59. aside{
    60. background-color: #ccc;
    61. width: 7%;
    62. height:800px;
    63. float: left;
    64. }
    65. .main{
    66. width: 92%;
    67. height: 797px;
    68. }
    69. footer{
    70. background-color: cadetblue;
    71. height: 80px;
    72. text-align: center;
    73. line-height: 80px;
    74. }
    75. </style>
  • 代码运行结果

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

批改状态:合格

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