常用样式.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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. .box {
  9. /* 像素 px */
  10. /* 宽度 width */
  11. /* 高度 height */
  12. /* 颜色 color */
  13. /* 背景色 background-color/background */
  14. /* 背景 background */
  15. /* 背景图片 background-image:url("引入图片路径") */
  16. /* 背景平铺 background-repeat:
  17. no-repeat 不平铺
  18. repeat-x 横向平铺
  19. repeat-y 纵向平铺
  20. repeat 平铺
  21. */
  22. /* 背景尺寸 background-size
  23. cover 全覆盖
  24. contain 等比例放大
  25. */
  26. /*
  27. 背景位置 background-position
  28. 1.x轴 y轴
  29. 2.right/left top/bottom
  30. */
  31. width: 300px;
  32. height: 300px;
  33. color: red;
  34. background-image: url("./images/img01.gif");
  35. /* background:yellowgreen; */
  36. /* background-color: yellow; */
  37. background-repeat: no-repeat;
  38. /* background-size: cover; */
  39. background-position:200px;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="box"></div>
  45. </body>
  46. </html>