|
|
@@ -0,0 +1,70 @@
|
|
|
+<!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>
|
|
|
+ #box {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ #content {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: green;
|
|
|
+ }
|
|
|
+ #content {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: blue;
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ css样式中 后面的层级会覆盖前面的层级
|
|
|
+ id选择器
|
|
|
+ 写法：
|
|
|
+ 在body里
|
|
|
+ 开始标签中 id="xxx"
|
|
|
+ 在style中
|
|
|
+ #xxx {样式....}
|
|
|
+ */
|
|
|
+ #main {
|
|
|
+ width: 1800px;
|
|
|
+ height: 1700px;
|
|
|
+ /* background-color: aqua; */
|
|
|
+ background: red url("../images/1.jpg") no-repeat center;
|
|
|
+ /* background-image: url("../images/1.jpg"); */
|
|
|
+ border: 1px solid #000;
|
|
|
+ /* background-repeat: repeat-y; */
|
|
|
+ /* background-size: contain; */
|
|
|
+ /* background-position: 50px 100px ; */
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ 背景 复合属性
|
|
|
+ background：color image repeat position;
|
|
|
+ 背景色 background-color
|
|
|
+ 背景图 background-image:url("路径")
|
|
|
+ 背景是否平铺 background-repeat
|
|
|
+ no-repeat 不平铺
|
|
|
+ repeat-x 横向平铺
|
|
|
+ repeat-y 纵向平铺
|
|
|
+ 背景尺寸 background-size
|
|
|
+ cover 全覆盖
|
|
|
+ contain 当前盒子等比例放到最大
|
|
|
+ 背景位置 background-position
|
|
|
+ 一个值：同时代表x y轴 ：center
|
|
|
+ 两个之：left/right top/bottom
|
|
|
+
|
|
|
+ */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="box">
|
|
|
+ <div id="content"></div>
|
|
|
+ </div>
|
|
|
+ <div id="main">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e