发表于： 2017-03-04 19:49:17
1 781
第三日：
今天一天有点懵，前两天只学会了用px这一个单位，今天又了解了 em rem vw vh vmax vmin等单位，用每个元素都尝试写入了样式。关于em 和rem，教程中说到会继承父级元素或者根元素的大小，感觉不是很懂，感觉现在相关知识太零散，不成系统，自学起来感觉有些困难，好像在闭门造车。
关于viewport也没有学明白，学习资料里边的参考链接坏掉了，自己去搜相关知识也看的似是而非的，网上相关知识都指向这行代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">，我就把这行代码用上了，但是也还不是很明白。
最后还是选择了使用vmax作为单位，用F12适配了一下几种屏幕，感觉也还可以。但是没有掌握font-size和em搭配的用法，对rem也不是很清楚。
后来简单了解了一下git，为明天开始任务2做准备
明日计划，开始任务2，学会使用git以及github
以下是今天修改后的九宫格代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>欢迎大家观看我的第一个网页</title>
<style>
#a1,#a2,#a3,#a5,#a6,#a8,#a9{float:left}
#a4,#a7{float:left;clear:left;}
div{
width: 10rem;
height:10vmax;
margin: 1vmax;
background:yellow;
}
</style>
</head>
<body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<body>
</html>
返回列表
评论