|
|
@@ -0,0 +1,80 @@
|
|
|
+<!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>
|
|
|
+ /*
|
|
|
+ 宽度 width
|
|
|
+ 高度 height
|
|
|
+ 单位 px
|
|
|
+ 颜色 color
|
|
|
+ 背景：background 复合属性
|
|
|
+ 背景色:background-color
|
|
|
+ 背景图:background-image:url("引入图片的路径")
|
|
|
+ 背景是否平铺：background-repeat
|
|
|
+ repeat 平铺
|
|
|
+ repeat-x 横向平铺
|
|
|
+ repeat-y 纵向平铺
|
|
|
+ no-repeat 不平铺
|
|
|
+ 背景尺寸：background-size
|
|
|
+ cover 全覆盖
|
|
|
+ contain 等比例放至最大
|
|
|
+ 背景图位置：background-position:x y;
|
|
|
+ center 中间
|
|
|
+ left 左
|
|
|
+ right 右
|
|
|
+ top 上
|
|
|
+ bottom 下
|
|
|
+ 百分比及像素单位同时生效
|
|
|
+ 背景图基点位置：background-origin
|
|
|
+ border-box - 背景图片从边框的左上角开始
|
|
|
+ padding-box -背景图像从内边距边缘的左上角开始（默认）
|
|
|
+ content-box - 背景图片从内容的左上角开始
|
|
|
+ 边框：border：width style color； 复合属性
|
|
|
+ border-width：1px; 边框粗细
|
|
|
+ border-color 边框颜色
|
|
|
+ border-style 边框样式
|
|
|
+ double 双边框
|
|
|
+ dotted 点线
|
|
|
+ solid 实线
|
|
|
+ dashed 虚线
|
|
|
+
|
|
|
+ 注：同标签 同级别 同样式 后面的样式会覆盖前面的样式
|
|
|
+
|
|
|
+
|
|
|
+ */
|
|
|
+ /* div {
|
|
|
+ width:500px;
|
|
|
+ height: 300px;
|
|
|
+ border:10px dotted red;
|
|
|
+ border-width: 3px;
|
|
|
+ border-style: dashed;
|
|
|
+ border-color: yellow;
|
|
|
+ background: blue;
|
|
|
+ background:url("../images/1.jpg");
|
|
|
+ background-color: red;
|
|
|
+ color: yellow;
|
|
|
+ } */
|
|
|
+ div {
|
|
|
+ width: 1000px;
|
|
|
+ height: 500px;
|
|
|
+ border: 3px solid #f00;
|
|
|
+ background: url("../../day1/images/img01.jpeg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /* background-size: contain; */
|
|
|
+ /* background-position: 100% 200px; */
|
|
|
+ background-origin: border-box;
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div>
|
|
|
+ <p>哈哈哈哈</p>
|
|
|
+ <!-- <img src="../../day1/images/img01.jpeg" alt=""> -->
|
|
|
+ </div>
|
|
|
+ <!-- <img src="../images/1.jpg" style="width: 200px;height: 300px;" alt=""> -->
|
|
|
+</body>
|
|
|
+</html>
|
e
