今天是星期一，有点累，不过还好。
背景图片和精灵图
<style>
/*
1.background-image: url(背景图片的资源路径)
2.background-size： 设置背景图片的大小
两个参数： 宽 高
取值：可以是绝对值 px， 也可以是百分比(基数参照容器的宽高值)
auto: 表示根据 宽/高 的缩放比例 ，计算 宽/高 的尺寸
cover/contain
cover: 覆盖 可以在等比例缩放图片的基础上，将容器填充满（不一定会把图片显示完整）
contain: 包容 可以在等比例缩放图片的基础上,完整的显示图片（不一定会把容器填充满）
3.background-repeat: 背景平铺
默认值：repeat
no-repeat 不平铺
repeat-x 只沿x轴平铺
repeat-y 只沿y轴平铺
4.background-position: 背景图片定位
两个参数： x轴的偏移量 y轴方向的偏移量
取值：绝对值 px;
方位名词： top bottom left right center
百分比： 计算背景图实际的偏移量 = (容器的宽/高 - 背景图的宽/高) * 百分比
*/
.box1{
width: 200px;
height: 200px;
background-image: url(./images/bg.png);
/* background-size: 200px 200px; */
background-size: 200px auto;
}
.box2{
width: 1000px;
height: 1400px;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
border: 1px solid #333;
background-size: 100% 100%;
}
.box3{
width: 300px;
height: 240px;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
/* background-position: -50px -104px; */
background-size: 400px auto;
background-position: 50% bottom;
}
.box4{
width: 800px;
height: 700px;
border: 1px solid #333;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3"></div>
<div class="box4"></div>
</body>
代码使用的精灵图 放在对应的文件夹中
精灵图的制作
使用工具为CssSprite.exe(百度一下即可下载)
<style>
.img {
background: url(./images/img.png) no-repeat;
}
.send-gift {
height: 42px;
width: 129px;
background-position: 0 0;
}
.send-gift-hover {
height: 42px;
width: 129px;
background-position: 0 -42px;
}
.share-score-hover {
height: 42px;
width: 129px;
background-position: 0 -84px;
}
.btn-share {
height: 42px;
width: 129px;
background-position: 0 -126px;
}
.btn-replay-hover {
height: 42px;
width: 129px;
background-position: 0 -168px;
}
.btn-replay {
height: 42px;
width: 129px;
background-position: 0 -210px;
}
.btn-retry {
height: 28px;
width: 129px;
background-position: 0 -252px;
}
.score-bar {
height: 59px;
width: 131px;
background-position: 0 -280px;
}
.icon1:hover{
background-position: 0 -168px;
}
</style>
</head>
<body>
<div class="btn-replay img icon1"></div>
</body>
背景颜色及颜色取值
<style>
.box1{
width: 200px;
height: 200px;
font-size: 24px;
font-weight: 700;
/* 设置背景颜色 */
background-color: transparent;
/* 颜色取值：
1. 别名： 比如red blue transparent(透明色)等
2. 16进制数：#6位数字 0-9a-f
3. rgb(red,green,blue) 三元色 取值范围：0-255
4. rgba(red,green,blue,alpha) alpha:透明度 取值范围：0-1
*/
/* opacity: 透明度 */
/* 当一个元素定义了opacity属性，并且值小于1时，那么它的子元素也会同样拥有相同的透明度 */
/* opacity: 0.5; */
}
</style>
</head>
<body>
<div class="box1">
<p>hello</p>
</div>
</body>
利用边框制作三角形和箭头
1 <style>
2 /* 观察原理 利用边框生成等腰直角三角形 */
3 .tip1{
4 width: 0;
5 height: 0;
6 border-top: 20px solid red;
7 border-right: 20px solid green;
8 border-bottom: 20px solid blue;
9 border-left: 20px solid yellow;
10 }
11 .tip2{
12 width: 0;
13 height: 0;
14 /* border-top: 20px solid red;
15 border-right: 20px solid transparent;
16 border-bottom: 20px solid transparent;
17 border-left: 20px solid transparent; */
18
19 /* 等腰直角三角形 */
20 border: 20px solid transparent;
21 border-top-color: red;
22 }
23 .tip3{
24 width: 0;
25 height: 0;
26 /* 观察原理： 直角三角行 */
27 border-top: 40px solid red;
28 border-right: 20px solid green;
29 border-bottom: 40px solid blue;
30 border-left: 20px solid yellow;
31 }
32
33 /* 利用 边框+旋转 形成箭头 */
34 .arrow{
35 width: 30px;
36 height: 30px;
37 border-left: 3px solid #333;
38 border-bottom: 3px solid #333;
39 /* 旋转 */
40 transform: rotate(-45deg);
41 }
42 </style>
43 </head>
44 <body>
45 <div class="tip1"></div>
46 <div class="tip2"></div>
47 <div class="tip3"></div>
48 <div class="arrow"></div>
49 </body>
轮廓线
1 <style>
2 #txt:focus{
3 /* outline-color: tomato;
4 outline-style: dotted;
5 outline-width: 3px; */
6 outline: solid 3px red;
7 /* 轮廓线 与 边框的区别： 轮廓线部分上右下左四个方向 */
8 /* 初始化样式时，一般会去除 input ，button这些元素的轮廓线 */
9 }
10 .box{
11 width: 100px;
12 height: 100px;
13 outline: solid 3px red
14 }
15 </style>
16 </head>
17 <body>
18 <input type="text" id="txt">
19 <input type="button" value="按钮1">
20 <button>按钮2</button>
21 <div class="box"></div>
22 </body>
上外边距穿透问题
1 <style>
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 /* 解决方式： */
7 .parent{
8 width: 300px;
9 height: 300px;
10 background-color: skyblue;
11 /* 1. 给父元素设置 overflow:hidden*/
12 /* overflow: hidden; */
13
14 /* 2. 给父元素添加上边框 */
15 /* border-top: 1px solid transparent; */
16
17 /* 3. 给父元素添加上内边距 */
18 /* padding-top: 1px; */
19 }
20 .child{
21 width: 100px;
22 height: 100px;
23 background-color: pink;
24 margin-top: 100px;
25
26 /* 4. 让子元素浮动 或者 绝对定位、固定定位 */
27 /* float: left; */
28 position: absolute;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="parent">
34 <div class="child"></div>
35 </div>
36 </body>
行元素与行内块元素之间的间隙问题
<style>
.box1 span{
background-color: violet;
}
.box2{
/* 2. 设置父元素的font: size 0; 再重新设置子元素的font-size */
/* font-size: 0; */
}
.box2 span{
background-color: turquoise;
/* font-size: 20px; */
/* 3. 设置子元素浮动 */
/* float: left; */
/* 4. 利用 margin-left,让元素左移 */
margin-left: -5px;
}
</style>
</head>
<body>
<!-- 产生间隙的原因： 换行符 -->
<div class="box1">
<!-- 1. 元素与元素之间不加换行符 -->
<span>item1</span><span>item2</span>
</div>
<div class="box2">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item4</span>
<span>item5</span>
<span>item6</span>
<span>item7</span>
<span>item8</span>
<span>item9</span>
<span>item10</span>
</div>
</body>