这堂课非常有趣，侯老师把上一堂课中的代码进行了简单修改，就成了minecraft中的三层砖墙：实在是用心良苦！这种方法讲解CSS样式的相对定位和绝对定位，让人印象深刻！
最终效果：
把一幅画挂在墙的正中
我的代码(html 部分)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn css with blocks</title>
<link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="bg">
<div class="flower">
<div class="point">
</div>
</div>
<div class="block-1"></div>
<div class="yellow-flower">
<div class="point">
</div>
</div>
<div class="block-2"></div>
<div class="block-3"></div>
</div>
</body>
</html>
我的代码（CSS部分）：
.block-1 {
background: url('images/grass.png');
background-size: contain;
box-sizing:border-box;
width: 64px;
height:64px;
}
.block-2 {
background: url('images/grass.png');
background-size: contain;
box-sizing:border-box;
width: 128px;
height:64px;
}
.block-3 {
background: url('images/grass.png');
background-size: contain;
box-sizing:border-box;
width: 192px;
height:64px;
}
.flower {
background: url('images/rose.png');
background-size: contain;
box-sizing:border-box;
width: 64px;
height:64px;
position: relative;
left: 64px;
top: 64px;
}
.yellow-flower {
background: url('images/flower.png');
background-size: contain;
box-sizing:border-box;
width: 64px;
height:64px;
position: absolute;
left: 128px;
}
.point {
width: 8px;
height: 8px;
background: rgb(194, 142, 28);
}
.bg {
background: rgb(18, 64, 227);
width: 320px;
height: 256px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
border: solid 8px yellow;
}
body {
margin:0;
background: url('images/brick.jpg');
background-size: 150px 150px;
}
总结：
- 相对定位（position：relative；）可以使用偏移量（left：？px；top：？px；）实现定位；
- 绝对定位（position：absolute；）可以使用百分比来实现居中；
- 每个css语句后面的；千万不能少，会导致后面的语句失效；
- 使用Ctrl+/可以把选中的语句屏蔽掉（实际上是认为该语句是注释）；
- 背景background可以使用颜色和图片{background: url('images/flower.png');}两种填充方式
- 使用background-size: 150px 150px;或者background-size: contain;来实现精细的背景（固定像素大小或者不缩放）。
网友评论