|
|
@@ -0,0 +1,79 @@
|
|
|
+<!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
|
|
|
+ 背景色：background-color
|
|
|
+ }
|
|
|
+ id选择器
|
|
|
+ 在body：
|
|
|
+ id='xxx'
|
|
|
+ 在style:
|
|
|
+ #xxx {
|
|
|
+ 代码样式...
|
|
|
+ }
|
|
|
+ class选择器(类选择器)
|
|
|
+ 在body：
|
|
|
+ class='xxx'
|
|
|
+ 在style:
|
|
|
+ .xxx {
|
|
|
+ 代码样式...
|
|
|
+ }
|
|
|
+ */
|
|
|
+ #box {
|
|
|
+ width: 1200px;
|
|
|
+ height: 800px;
|
|
|
+ background: url('../1.html/images/1.png') no-repeat center;
|
|
|
+ background-color: aquamarine;
|
|
|
+ /* background-repeat: no-repeat; */
|
|
|
+ /* background-size: cover; */
|
|
|
+ /* background-position: bottom; */
|
|
|
+
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 500px;
|
|
|
+ height: 500px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ /* background-color: yellow; */
|
|
|
+ }
|
|
|
+ /*
|
|
|
+ background 背景 (复合属性)
|
|
|
+ background: color image repeat position
|
|
|
+ background-color 背景色
|
|
|
+ background-image：url("路径") 背景图
|
|
|
+ background-repeat 背景平铺
|
|
|
+ no-repeat 不平铺
|
|
|
+ repeat 平铺
|
|
|
+ repeat-x 横向平铺
|
|
|
+ repeat-y 纵向平铺
|
|
|
+ background-size 背景尺寸
|
|
|
+ contain 等比例放大
|
|
|
+ cover 全覆盖
|
|
|
+ background-position 背景位置
|
|
|
+ left/bottom/top/right
|
|
|
+ 百分比
|
|
|
+ 像素
|
|
|
+ */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="box">
|
|
|
+ <!-- <div>
|
|
|
+ <div class="main"></div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e