发表于： 2017-02-01 15:52:22
0 598
今天完成的事情：
1 下载安装了sublime和webstorm文本编辑器，比记事本强大许多，可以更快捷的写代码。
2 下载安装了chrome浏览器，界面挺简洁，开发者工具也很强大，希望以后能熟悉使用。
3 了解了HTML的发展历史及由来，感谢蒂姆·伯纳斯·李爵士的无私奉献精神，让全球的普通大众都能免费体验到互联网时代的便利。
4 了解了CSS层叠样式表，知道了内容与样式分离的概念。
5 学习了盒子模型，对元素占用的面积有了一个初步的概念（margin border padding由外及内）。
6 试验了元素float后的效果，并利用其完成了9宫格的布局。
7 学会简单的使用chrome浏览器模拟手机浏览效果（没有国产手机？），会简单的代码调试。
8 了解了自适应的概念，并通过<meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no＂/>这句话体验了自适应的效果。并深刻理解了分辨率、屏幕尺寸与分辨率以及devicePixelRatio等概念的区别。
明天计划的事情：
学会使用nginx及配置、学会git的使用和配置 、开始学习任务2
遇到的问题：
一开始做的9个格子随着屏幕大小的变化会变成不同的形状，最后使用
width:32%;height:0px;padding-bottom:32%;
解决了这个问题。
收获：
学会使用了前端开发需要的一些基本工具，了解了html，css的基本概念，知道了自适应的需求原因等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task1</title>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
.clear{clear:both;}
.d0{ width: 100%; overflow: hidden;margin: auto;}
.d1{width:32%;height:0px;padding-bottom:32%;background-color: #E78326;float: left;border-radius:10%;
margin:1px;}
</style>
</head>
<body>
<div class="d0">
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="clear"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="clear"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</div>
</body>
</html>
返回列表
评论