发表于: 2017-03-13 23:38:33
2 845
一.今天完成的事情
昨天像师兄请教有关任务一的问题
今天彻底搞明白了标准答案的执行原理以及自己之前编写不成功的原因
本想通过调整小盒子长宽百分比来维持自适应,首先一直显示是空白页面(原因是没有给父级元素设置长宽)
后来设置以后出现了九宫格,通过调试知道了,自己的方法,只有在页面为正方形时,才能显示为正方形;
标准答案利用padding就不会出现这样的情况(因为是固定的随着父级width)按照比例缩放;
任务一应该算是能通过了
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任务1</title>
<meta name="viewport" content="width-divice,initial-scale=1,user-scalable=no">
<style type="text/css">
.big{margin:0 auto;width:75%;height:60%;}
.small1{float:left;padding:15%;margin:2.5% 1.5% 2.5% 2%;border-radius:10px;background-color:orange;}
.small2{float:left;padding:15%;margin:2.5% 1.5% 2.5% 1.5%;border-radius:10px;background-color:orange;}
.small3{float:left;padding:15%;margin:2.5% 2% 2.5% 1.5%;border-radius:10px;background-color:orange;}
</style>
</head>
<body>
<div class="big">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
</div>
<body>
</html>
用开发者模式模拟手机浏览完成;
今天学习了一点代码编写规范,如样式顺序为位置、大小、文字、背景、其他,另外零点几要省略0,class不要使用下划线命名
找到了一个linux基本命令的文档http://blog.csdn.net/ljianhui/article/details/11100625
换了sublime3编辑器
二.遇到的问题
对于任务二提到的各种还没有一个清晰的概念,想通俗的知道分别是做什么的
目前只是随便翻看了学习资料,还没有认真思考
三.计划的事情
希望报名线下
学习sublime的使用
加深学习任务二
尽快将任务一的成果展示和代码链接附页面
评论