今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
我今天试着敲了一下这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="task3.css">
</head>
<body>
<div>
<img src="./1_03.png" style= "position: absolute; top: 20px;
right: 551px; bottom: 935px; left: 35px;">
</div>
<div>
<img src="./pttLOGO.png" style="position: absolute; top: 116px; right: 261px;
bottom: 121px;left: 198px;">
</div>
<div class="icon">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</p>
</div>
<div class="icon1">
<img src="./student.png"><p>290560993</p>
</div>
<div class="icon2">
<img src="./ptt.png"><p>BJPTTeng</p>
</div>
</body>
</html>
然后我都做固定的定位，
body{
background-color: #68cdd5;
}
.icon{
color: white;
width: 450px;
height: 191px;
position: absolute;
top: 307px;
right: 100px;
bottom: 511px;
left: 90px;
}
.icon1{
display: inline-block;
color: white;
position: absolute;
top: 676px;
right: 417px;
bottom: 249px;
left: 139px;
}
.icon2{
display: inline-block;
color: white;
position: absolute;
top: 684px;
right: 138px;
bottom: 245px;
left: 433px;
}
最后的话我的成果是这样的
然后我在尝试着去更改下属性值，更改下PX。不过都没有成功，我在去尝试了下如何去使图片居中
明天计划的事情：（一定要写非常细致的内容）
明天我计划把任务三完成了，就差一点了
遇到的问题：（遇到什么困难，怎么解决的）
遇到了，无法使任务居中的问题，尝试了用一些方法，像更改比例，百分比等等，都没有用，可能是我的盒子模型还要再去复习一下把
收获：（通过今天的学习，学到了什么知识）
我收获了，知道了关于css中定义的宽和高是指填充以里的内容范围，并不是一个盒子的实际宽度，一个盒子的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。行级元素和块级元素都是盒子模型。
返回列表
评论