发表于： 2019-07-03 14:30:23
2 869
今日完成的任务：
1.任务三html和css代码的完善
下面是具体代码：
html的：
<!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>魔镜</title>
<link rel="stylesheet" href="task3.css">
</head>
<body>
<div class="header"><img src="images/task3_01.png"></div>
<div class=“main”>
<div class="main-01"><img src="images/task3_02.png"> </div>
<div class="main-02">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏， 捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。 </p>
</div>
</div>
<div class="footer">
<div class="footer-left">
<div class="left1"><img src="images/task3_03.png"></div>
<div class="left2">20560033</div>
</div>
<div class="footer-right">
<div class="right1"><img src="images/task3_04.png"></div>
<div class="right2">BJPTTeng</div>
</div>
</div>
</body>
</html>
css的：
* {
margin: 0;
}
body {
margin: 0;
background-color: #68cdd5;
}
.header {
padding: 15px 0px 0px 20px;
;
height: 75px;
}
.header img {
width: 40px;
height: 40px;
}
.main-01 {
text-align: center;
height: 115px;
}
.main-01 img {
width: 140px;
height: 50px;
}
.main-02 {
color: white;
font-size: 18px;
letter-spacing: 2px;
line-height: 40px;
padding: 0 14%;
height: 268px;
}
.footer {
font-size: 15px;
padding: 0 18% 0 18%;
}
.footer-left {
display: inline-block;
}
.left1 img {
padding-left: 10px;
width: 55px;
height: 55px;
}
.left2 {
text-align: center;
color: white;
}
.footer-right {
color: white;
float: right;
display: inline-block;
}
.right1 img {
padding-right: 10px;
width: 55px;
height: 55px;
}
.right2 {
text-align: center;
}
遇到的问题以及思考：
具体的问题就不多说了，总之就是小问题不断，主要是之前代码敲少了，给前面填坑呢，好在通过不断的努力下，问题都解决了。通过任务三，对盒子结构有了更深的理解，初步了解了如何对一个简单的网页进行合理的结构布局，学会了好多新代码的使用，收获还是不少的。之后就是任务三的收尾工作了，还有很多值得思考的地方下去了还是要用代码试一试。
明天的计划:
任务3的收尾，任务4的预热。
返回列表
评论