发表于： 2016-07-17 22:50:45
5 1410
今天完成的事情：实现task1，详情见下方
明天计划的事情：将task1中的问题再尝试深入研究一下；学习切图和开发者工具的具体使用；复习原来学过的html和css并整理笔记；尝试做task2
遇到的问题：九宫格最后一列的margin为0，详情见下方；
收获：Nginx，发现自己的网络知识真是很欠缺
详情：
任务分析
1.what is sublime？
2.what is Nginx?
3.如何编写九宫格页面？如何支持手机，如何兼容IE8以上？如何使用开发者工具调试？
1.Sublime
放弃原来用的DW，安装sublime，安装package control和其他插件，学习使用方法和快捷键，自定义设置
参考网址：
http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html
全程指引加快捷键
http://www.tuicool.com/articles/EV3eEzA
bracketHighlighter插件高亮配置特别好用
2.Nginx
官网：http://nginx.org/
参考资料：
https://www.zhihu.com/question/41430703?from=profile_question_card
根据以上师姐的资料后配置成功，虽然还不是非常懂，但大致了解了Nginx。
Nginx是一种Web服务器（server），即提供计算服务的设备。比如说你在地址栏输入www.google.hk，服务器就会通过计算，将相应的页面返回给你。在本机上配置Nginx的意义相当于，把自己的电脑变成一个服务器，把完成的文件放入相应的文件夹D:\home\www，在地址栏输入地址localhost/index.html，就可以访问页面了，以此来模拟文件上线后的访问效果。
另外，通过搜索找到了一篇很详细很好的文章可参考：
http://www.nginx.cn/591.html
网络这方面的知识实在是很缺失，完全没有概念，需要学的还有很多，先从一点点皮毛开始吧。
3.编写九宫格与调试
编写完成，实现基本效果，打开Nginx，在浏览器中输入http://localhost/task1.html，在开发者工具查看几大浏览器(包括ie8及以上)和手机的效果，均OK。
"在手机上查看实际效果：
1.电脑和手机连接上同一个wifi；
2.查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址，例如我的是192.168.1.14
3.在手机浏览器中输入192.168.1.14/task1.html 就可以了"
但过程中，有以下几个疑问，主要是关于如何实现更规范，对用户和后端更友好。
- "1)九宫格的构建：1个ul+9个li / (1个ul+3个li)*3 / 1个div+9个小div，应该用哪一种方式更友好以及原因？
我用第一种方式：1个ul+9个li "
- "2)ul清除浮动。直接只用了overflow:hidden,在浏览器调试下没有问题，需不需要用以下这种方式？
.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
content: """";
clear:both;
visibility: hidden;
height: 0;
}"
另外，此处用clear:both是没有效果的，ul的高度还是会坍缩。需要加深对于清除浮动的理解。
- "3)九宫格内的间距如何实现更友好？
我用的是设置每个li的margin值和ul的宽度，然后设置一个container包裹起来，并设置container的宽度和overflow:hidden属性。但是这样，感觉要计算的很多，似乎不够灵活。"
- "4)九宫格的水平垂直居中。
水平居中用的是container的margin:0 auto
垂直居中用的是box的display:table-cell;和vertical-align:middle;。但用table-cell似乎不是很好。就不能再设置box的margin值了。"
*******************************************************
7.18补充详细代码，本来打算注册个github后传上去的，先贴在这里~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task 1</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 419px;
height: 410px;
background: #fff;
border: 1px solid #000;
text-align: center;
display:table-cell;
vertical-align:middle;
}
.box .container{
width: 359px;
height: 359px;
margin: 0 auto;
}
.box ul{
list-style: none;
overflow: hidden;
width: 363px;
}
.box ul .block{
height: 117px;
width: 117px;
float: left;
background: #e8830d;
margin: 0 4px 4px 0;
border-radius: 6px;
}
</style>
</head>
<body>
<div>
<div>
<ul >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
返回列表
评论