Blogger Information
Blog 11
fans 0
comment 1
visits 7861
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
iframe与css基础
一代宗师
Original
623 people have browsed it

用iframe写一个简单的小后台

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>网站管理系统</title>
  6. </head>
  7. <style>
  8. *{margin: 0;padding: 0;}
  9. a{text-decoration: none;}
  10. ul,li{list-style-type:none;}
  11. .header{width: 100%;background-color: #4e6ef2;}
  12. .main{width: 100%;}
  13. span{color: #fff;display: inline-block;width:13%;height: 50px;text-align: center;box-sizing: border-box;padding-top: 13px;}
  14. .left{width: 13%;float: left;}
  15. .left ul{height: 500px;text-align: center;background-color: cornflowerblue;}
  16. .left ul li{padding: 10px 0;}
  17. .left ul li a{cursor:pointer;color: #fff;}
  18. .left ul li a:hover{color: #000;}
  19. .right{width: 87%;height: 500px;background-color: lightcyan;float: left;}
  20. </style>
  21. <body>
  22. <div class="header">
  23. <span>后台管理系统</span>
  24. </div>
  25. <div class="main">
  26. <div class="left">
  27. <ul>
  28. <li><a href="" target="if">网站系统 </a></li>
  29. <li><a href="" target="if">栏目管理</a></li>
  30. <li><a href="" target="if">文章管理</a></li>
  31. <li><a href="" target="if">插件管理</a></li>
  32. <li><a href="biaodan.html" target="if">用户修改</a></li>
  33. </ul>
  34. </div>
  35. <div class="right">
  36. <iframe srcdoc="网站维护中..." frameborder="0" name="if" width="400" height="300"></iframe>
  37. </div>
  38. </div>
  39. <div class="footer"></div>
  40. </body>
  41. </html>

CSS优先级演示元素样式的四个来源

  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>CSS优先级</title>
  7. </head>
  8. <style>
  9. div{background-color: burlywood;}
  10. p[class=zxc]{
  11. color: chocolate;
  12. }
  13. .lxz{
  14. color: cornflowerblue;
  15. }
  16. #name{
  17. color: rgb(238, 54, 54);
  18. }
  19. .qu{
  20. color: red !important;
  21. }
  22. .qu{color: darkmagenta;}
  23. </style>
  24. <body>
  25. <div>标签选择器</div>
  26. <p class="zxc">属性选择器</p>
  27. <p class="zxc qwe">属性选择器</p>
  28. <p class="zxc">属性选择器</p>
  29. <p class="lxz">类选择器</p>
  30. <p id="name">Id选择器</p>
  31. <div class="qu">!important</div>
  32. </body>
  33. </html>
Correcting teacher:天蓬老师天蓬老师

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