heat.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /* https://www.bilibili.com/video/BV14J4114768?p=404&vd_source=f1f283d1bc4b954943a9148eb6f545f9 */
  2. body{
  3. /* 页面宽度占满手机 100% */
  4. width: 100%;
  5. /* 最小页面缩放,手机分辨率小于这个值,页面就不再缩放了 */
  6. min-width: 320px;
  7. /* 最大页面不超过 */
  8. max-width: 640px;
  9. margin: 0 auto;
  10. font-size: 20px;
  11. line-height: 2;
  12. color: #000;
  13. }
  14. ul{
  15. margin: 0;
  16. padding: 0;
  17. list-style: none;
  18. text-align: center;
  19. }
  20. ul li h1{
  21. color: #9e8201;
  22. }
  23. ul li.blank{
  24. border: #020202;
  25. margin: 50% 10%;
  26. }
  27. /* 后代元素选择器
  28. 语法: 祖先 后代 后代
  29. */
  30. /* .app ul li{
  31. // 靠左浮动,这样他们才可以并排一行
  32. float: left;
  33. height: 45px;
  34. background-color: #333333;
  35. // 文本居中
  36. text-align: center;
  37. line-height: 45px;
  38. } */
  39. /* 伪类选择器,根据相同类型元素选择
  40. :first-of-type 同类型第一个子元素
  41. :nth-of-type(n) 同类型第n个子元素
  42. :nth-last-of-type(n) 同类型倒数第n个子元素
  43. */
  44. /* .app ul li:nth-child(1){
  45. height: 45%;
  46. } */
  47. /* .app ul li:nth-child(2){
  48. width: 10%;
  49. }
  50. .app ul li:nth-child(3){
  51. width: 57%;
  52. }
  53. .app ul li:nth-child(4){
  54. width: 25%;
  55. } */