4_基础样式.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. #div1 {
  10. /* 宽高 */
  11. width: 1200px;
  12. height: 800px;
  13. /* 背景 */
  14. /* background: red; */
  15. background-color: red;
  16. background-image: url(../images/img01.jpeg);
  17. /* repeat|no-repeat */
  18. background-repeat: no-repeat;
  19. /* 背景图片位置 水平(固定值|left|center|right) 垂直(固定值|top |center|bottom) */
  20. /* background-position: -100px 200px ; */
  21. background-position: center top ;
  22. /* 简写 */
  23. background: red url(../images/img01.jpeg) no-repeat center top ;
  24. }
  25. #div2{
  26. width: 300px;
  27. height: 50px;
  28. background: red;
  29. /* 字体相关属性 */
  30. /* 字体大小 最小12px 默认大小16*/
  31. font-size:25px;
  32. /* 字体粗细 100 -900 默认值400|normal bold|700 */
  33. font-weight:200 ;
  34. /* 字体 */
  35. font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
  36. /* 样式 风格 italic|normal */
  37. font-style: normal;
  38. /* 文本相关样式 */
  39. /* 水平对齐:left左|center中|right右 */
  40. text-align:left ;
  41. /* 垂直对齐方式 行高(line-height)=高 实现文本的垂直居中*/
  42. line-height:50px ;
  43. /* 文本缩进 */
  44. text-indent:20px ;
  45. }
  46. a{
  47. /* 文本修饰 none没有| line-through中划线 |underline下划线| overline上划线(不使用) */
  48. text-decoration:overline;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <!-- <div id="div1">1111111</div> -->
  54. <div id="div2">我是一个DIV</div>
  55. <a href="#">baidu </a>
  56. </body>
  57. </html>