|
|
@@ -0,0 +1,66 @@
|
|
|
+<!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>
|
e