| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <!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>
- /*
- 选择器：
- 1.标签选择器：
- div {}
- 标签名 {样式}
- 样式：
- 宽度：width
- 高度：height
- 颜色：color
- 像素单位:px
- 单位：px %
- 边框：border:width style color
- width
- style:solid 实线 dashed 虚线 double 双边框 dotted 点线
- color
- 复合属性
- 上边框：border-top
- 下边框 border-bottom
- 左边框 border-left
- 右边框 border-right
- border-radius 圆角边框
- 50% 原型
- 单独一个方向
- border-上下-左右-radius
- 同选择器 同样式 后面的会覆盖前面的
- background:背景 复合属性
- background-color:背景色
- background-image:url("图片路径")
- background:color image repeat position;
- background-repeat: 背景平铺
- no-repeat 不平铺
- repeat-x x轴平铺
- repeat-y y轴平铺
- repeat 平铺
- background-position:x y;
- 背景位置
- background-size 背景尺寸：
- contain 等比例放置最大
- cover 完全覆盖
- */
- div {
- width: 900px;
- height: 900px;
- color: purple;
- /* border-width: 10px;
- border-style: double;
- border-color: #0f0; */
- border:2px solid #f00;
- /* border-left: 10px solid rgb(123, 0, 255); */
- /* border-top: 1px solid #f00; */
- /* border-radius: 20px; */
- border-top-left-radius: 20px;
- /* background: #ff0;
- background-image: url("./img01.gif");
- background-color: yellowgreen;
- background-repeat: no-repeat; */
- /* background-position: center 20px; */
- /* background-size: cover; */
- background: #f00 url('./img01.gif') no-repeat center center;
- }
- </style>
- </head>
- <body>
- <!--
- 常用样式：
-
- -->
- <div>
- 你好，我有一个帽衫
- </div>
- </body>
- </html>
|
