| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <!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>
- /* 标签选择器 */
- div {
- /* 属性：属性值; */
- /* 宽度：width
- 高度: height
- 像素单位：px
- 背景：background 复合属性
- background:color image repeat position;
- background-color 背景色
- background-image:url("路径") 背景图
- background-repeat 背景平铺
- no-repeat 不平铺
- repeat-x 横向平铺
- repeat-y 纵向平铺
- repeat 平铺
- background-size 背景尺寸
- cover 全覆盖
- contain 当前盒子最大等比例放大
- background-position：x轴 y轴; 背景位置
- center left right bottom top
-
- */
- width: 800px;
- height: 800px;
- background: yellow url("../day1/images/img01.gif") no-repeat center;
- /* background-size: contain; */
- /* background-repeat: repeat; */
- /* background-color: aqua; */
- /* background: hotpink; */
- /* background-position: right bottom; */
- /* border: 1px solid #000; */
- /* 边框尺寸 */
- border-width: 10px;
- /* 边框样式
- solid 实线
- dashed 虚线
- double 双边框
- dotted 点线
- */
- border-style: dotted;
- /* 边框颜色 */
- border-color: red;
- /* 复合属性：
- border: width style color;
- border-top 上边框
- border-bottom 下边框
- border-right 右边框
- border-left 左边框
- */
- border: 2px solid blue;
- /* 相同样式后面的样式层级会覆盖前面的样式层级 */
- border-top: 5px dotted red;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
|
