| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- /**
- 标签选择器
- 标签名字 {样式...}
- id选择器
- 在body标签中
- 在开始标签里 通过id="名字"
- 在style标签里
- #名字 {样式...}
- */
- div {
- /* 宽度 */
- /* 单位 px */
- width: 300px;
- /* 高度 */
- height: 200px;
- /* 背景色 */
- background-color: red;
- }
- #second {
- /* 宽度 */
- /* 单位 px */
- width: 1000px;
- /* 高度 */
- height: 500px;
- /* 复合属性 背景
- background：color position repeat image;
- */
- background: yellow url("../images/img01.gif") center no-repeat;
- /* 背景色 */
- /* background-color: yellow; */
- /* 背景图 */
- /* background-image: url("../images/img01.gif"); */
- /* 背景平铺 */
- /* 不平铺 */
- /* background-repeat: no-repeat; */
- /* x轴平铺 */
- /* background-repeat: repeat-x; */
- /* y轴平铺 */
- /* background-repeat: repeat-y; */
- /* 全部平铺 */
- /* background-repeat: repeat; */
- /* 背景图位置
- x轴 y轴
- */
- /* background-position: 50px center; */
- /*
- 背景尺寸 background
- contain 等比例放大
- cover 覆盖
- */
- /* background-size: cover; */
- }
- </style>
- </head>
- <body>
- <div></div>
- <div id="second"></div>
- <!-- <img src="../images/img01.gif" alt=""> -->
- </body>
- </html>
|
