发表于: 2018-08-27 22:27:42

1 719


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



返回列表 返回列表
评论

    分享到