发表于： 2016-10-09 14:58:11
1 1107
完全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知识
收获：加油，多动用学过的知识。
返回列表
评论