2.常用样式.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. /*
  9. 标签选择器
  10. 标签名 {
  11. 样式...
  12. 宽度:width
  13. 高度:height
  14. 像素单位:px
  15. 背景色:background-color
  16. }
  17. id选择器
  18. 在body:
  19. id='xxx'
  20. 在style:
  21. #xxx {
  22. 代码样式...
  23. }
  24. class选择器(类选择器)
  25. 在body:
  26. class='xxx'
  27. 在style:
  28. .xxx {
  29. 代码样式...
  30. }
  31. */
  32. #box {
  33. width: 1200px;
  34. height: 800px;
  35. background: url('../1.html/images/1.png') no-repeat center;
  36. background-color: aquamarine;
  37. /* background-repeat: no-repeat; */
  38. /* background-size: cover; */
  39. /* background-position: bottom; */
  40. }
  41. div {
  42. width: 500px;
  43. height: 500px;
  44. background: red;
  45. }
  46. .main {
  47. width: 300px;
  48. height: 300px;
  49. /* background-color: yellow; */
  50. }
  51. /*
  52. background 背景 (复合属性)
  53. background: color image repeat position;
  54. background-color 背景色
  55. background-image:url("路径") 背景图
  56. background-repeat 背景平铺
  57. no-repeat 不平铺
  58. repeat 平铺
  59. repeat-x 横向平铺
  60. repeat-y 纵向平铺
  61. background-size 背景尺寸
  62. contain 等比例放大
  63. cover 全覆盖
  64. background-position 背景位置
  65. left/bottom/top/right
  66. 百分比
  67. 像素
  68. */
  69. </style>
  70. </head>
  71. <body>
  72. <div id="box">
  73. <!-- <div>
  74. <div class="main"></div>
  75. </div> -->
  76. </div>
  77. </body>
  78. </html>