发表于: 2017-03-29 23:04:51
3 674
今天完成的事情:查阅了一些关于JavaScript的资料,包括JavaScript的诞生和发展史(其实也没啥用,简单看看日后吹b可能会涉及到)。
JavaScript是做什么的呢?JavaScript是一种运行在浏览器中的解释型的编程语言。JavaScript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的(看到这里更坚定要学好js了)。还有一些基本语法,没太看懂,理解不深刻。
晚上听小课堂收获了一些关于性能优化的东西,包括css雪碧图相比直接插入img的区别,是减少请求http次数;雪碧图是生成一张图片所以请求http只有一次;直接插入图片就是一张图片就要http一次;但是,也不能盲目的使用雪碧图,一般来说一些小图标,而且轻易不会换掉的图片应该使用,如果所有图片都用雪碧图的话可能会影响到日后的维护,换张图片会很麻烦。
正则表达式:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。还有两点意外收获浏览器每次只能发送两个请求,Http协议三次握手过程 :所谓的“三次握手”即对每次发送的数据量是怎样跟踪进行协商使数据段的发送和接收同步,根据所接收到的数据量而确定的数据确认数及数据发送、接收完毕后何时撤消联系,并建立虚连接。
另外附上自己写的栅格,供进行到这一步的小伙伴参考一下,主要思路是写一个div作为容器宽度设置100%,里面在写个div作为行,再在里面写一个div作为列,让他们左浮动(在父容器清除浮动)然后分别为里面的列设置百分比,然后用媒体查询设置当屏幕宽度小于多少像素的时候里面的列改变宽度百分比,当里面的列宽度变大的时候后面的列就会被挤到下一行,就可以达到我们想要的效果了:
/*栅格系统*//*栅格系统*//*栅格系统*//*栅格系统*//*栅格系统*//*栅格系统*//*栅格系统*/
/*容器*/
.container {
width: 100%;
max-width : 1200px;
}
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
.container * {
box-sizing: border-box
}
[class *= 'col-'] {
float: left;
min-height: 1px;
padding: 12px; /* 设置间距 */
}
.col-1{ width: 8.33%; }
.col-2{ width: 16.66%; }
.col-3{ width: 25%; }
.col-4{ width: 33.33%; }
.col-5{ width: 41.16%; }
.col-6{ width: 50%; }
.col-7{ width: 58.33%; }
.col-8{ width: 66.66%; }
.col-9{ width: 75%; }
.col-10{ width:83.33%; }
.col-11{ width: 91.66%; }
.col-12{ width: 100%; }
@media all and (max-width: 800px) {
.col-1 {width: 16.66%; }
.col-2{ width: 25%; }
.col-3{ width: 50%; }
.col-4{ width: 50%; }
.col-5{ width: 41.16%; }
.col-6{ width: 100%; }
.col-7{ width: 58.84%; }
.col-8{ width: 100%; }
.col-9{ width: 50%; }
.col-10{ width:75%; }
.col-11{ width: 83.34%; }
.col-12{ width: 100%; }
}
@media all and (max-width: 500px) {
.col-1 {width: 100%; }
.col-2{ width: 100%;}
.col-3{ width: 100%; }
.col-4{ width: 100%; }
.col-5{ width: 100%; }
.col-6{ width:100%; }
.col-7{ width: 100%;}
.col-8{ width: 100%; }
.col-9{ width: 100%; }
.col-10{ width:100%;}
.col-11{ width: 100%; }
.col-12{ width: 100%; }
当然,我写的很简单,很基础,还可以更写得更细致。应该还存在很多不足和不合理的地方,仅供参考。
遇到的问题: 对js的使用方式还不是很理解,只是知道她是可以更好的渲染页面,而且很好用,很重要。
明天计划做的事:继续学习JavaScript,看看目课网的资料,可能会容易理解一点。
收获:JavaScript是做什么的,性能优化的一些知识
评论