发表于: 2016-10-09 14:58:11
1 1108
完全0基础小白,自学了一段时间的html和css
今天完成的事情:自以为html和css学会了,但是看到题目后,下意识的第一反应竟然是:做一个表格(捂脸,原谅小白)。
但是随后想了一下,结合各位师兄弟的日报,运用到的知识是网页布局 div这个标签。
代码如下,其他的倒还是简单: 大的框里;三小框,header,content,footer;再每个框里放入三个同样框。
<!DOCTYPE HTML>
<html>
<head>
<title>task1</title>
<style type="text/css">
.box{
height:480px;
width:480px;
margin:20px;
}
.header,.content,.footer{
height:150px;
float:left;
}
.inner{
width:149px;
margin:1px;
background: sandybrown;
height: 149px;
float: left;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="content">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
效果图如下:
感觉有点烦了,看到一位师兄的省去了,header,content和footer,也做出了这个效果,不知道为什么?(有师兄看到了麻烦告知我)不太明白,也就没用他那个方法。
明天计划的事情:完成任务 配置Nginx这个任务,继续复习之前的,html和css知识
收获:加油,多动用学过的知识。
评论