今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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中定义的宽和高是指填充以里的内容范围,并不是一个盒子的实际宽度,一个盒子的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。行级元素和块级元素都是盒子模型。
评论