根据记忆和参考视频,自己重新写了一个上篇博文的实际到达点,一个盒子装三张图片,需要量图片的高度和宽度,设置盒子的大小刚好相等,如果不相等,则有外边距的效果。
用了display:flex语句来使得三个图片有序排列在大盒子里。
另外也注意到命名元素的规则要用英文。
这算一个完整的小结,学会了盒子装图片。嗯。简单成功的第一步,比混杂不清的第N步要好得多。
<!doctype html>
<html>
<head>
<title>DIV装三个图片</title>
<meta charset=UTF-8>
<meta name="keywords" content="建立DIV,装图片,过程">
<meta name="description" content="我自己回忆默写出的简单html。">
<style>
body{
margin:0;
}
.message{
display:flex;
width:900px;
height:300px;
background-color:#ff6666;
}
.messagepic{
width:300px;
height:300px;
background-color:#ffff33
}
</style>
</head>
<body>
<div class="message">
<div class="messagepic"><img src="images/1.jpg"></div>
<div class="messagepic"><img src="images/2.jpg"></div>
<div class="messagepic"><img src="images/3.jpg"></div>
</div>
</body>
</html>