深大半日游
来深圳有两个月,都没有好好去逛一下,由于住的的地方离深大比较近,趁着周六有空,决定出去走一趟。
从深南花园这边,大概走了十多分钟,到达深大北门。
2018 年,学会把重要的事情放在第一位,少点其他事情的分心。打好基础在前,追新技术在后,以不变应万变。能够“很有效率”的实现工作中的需求,不加班及有时间做其他有趣的事情。
不编码时,可以搞搞设计嘛,满足自己就行 😄。跟着学习一些国内主流网站潮流走啦~
有位大佬推荐《如何阅读一本书》,把里面的方法时间,它把阅读分为“基础阅读”、“检视阅读”、“分析阅读”、“主体阅读”,希望自己能够学会阅读,达到 “检视阅读”之上,开始“分析阅读”的层次。
(完)
从2016年大二下学期,由于大一开始一直迷茫,课程学的杂,到头来东搞搞,西弄弄,没有一样学的精的,也不知道自己喜欢那方面的东西。我这个人,不清楚自己喜欢什么,只知道自己不喜欢什么。就像考试一样,从多个选择一样样排除,从而得到最终的结果。2016年,随着网上培训机构的大力宣传,开始了自学UI的历程,看视频、学画画、看各种设计书籍,有说技巧的,也有教思维模式,立志成为了一个UI设计师。中途还接了网上电商兼职,成为一个小美工,修修图、做做详情页,学业之外就做做APP 界面设计等。由于个人自我菲薄以及认知,没有在大二和大三寒假努力去找实习,最后也无法证明了自己是否真的喜爱设计,能够依靠设计来吃饭。
慢慢地,直到大三下学期末,越来越感觉设计这条路走不通,与专业美院缺少美感、专业的画画能力。学校大三下学期也开了这样一门课,只是学校只教你怎么考试,拿好学分,不教你怎么使用,此时便开始接触了前端。这时才开始接触了知乎,简直是相见恨晚,比在某度问答好多了。开始在里面搜各种问题,用现在比较火的话语,“里面个个都是人才,说话又好听,超喜欢里面的。”从知乎中,大搜特搜了各种前端路线图,那时自己“太贪”,就是希望学好设计,又能够学好编程。于是便有了一天的时间,被画画、UI设计、摄影教程、看前端视频等分割细化。最终的结果是,与设计师比不上,与程序员又相差太远。
直到6月份,迫于找实习,开始真正花时间在于前端。每天学过八九个小时,上百度前端任务做任务,做练习。自此便开始了我的程序员生涯。
6月到11月,足有5个月时间,从HTML、CSS到JavaScript,到现在基本能够做好一个“切图仔”了。但是JavaScript原生代码需要继续提升,基础还比较薄弱,对于如闭包、原型链还没有足够的认识,花了太多的时间在于学习什么框架、构建工具上了,虽说是好事,但是基础不打好,遇到新框架就很惶恐,前端技术框架更新这么快,如果要一步步来,哪能学那么多。当前情况下应该学好基础,HTML、CSS和JavaScript始终是基础,基础打好,才能高楼建起。
大二花了半年的时间,坚持每天使用笔记本写日记的习惯,在大三被彻底夭折。都说养成好习惯不难,难的是每一天的坚持。而今,学好前端,写博客是一个记录自己的成长、所遇到的难题的好方法,而写作能力更加重要,他日自己回首,至少能够满足自己。而当前的情况下,自己写一篇博客花费时间太久,终究原因在于写文章前,没有所写的技术掌握清楚,及建立好文章结构,以至所花时间太长,时间成本太高。
自学过一段时间画画,虽然很喜欢😍自己画的东西,设计的海报,但是只能做为一个兴趣,因为😌自己,满足不了别人的不能用来赚钱。
至于摄影,由于被前GF吐槽过,拍得太烂(帮她拍的,都被删了,当时心都碎…此处省略一万字。。。)开始,立志学好摄影,至少以后和小伙伴出去旅行,总不能别人把你拍的玉树临风,你却把别人拍得惨不忍睹。关注了好几个app,蜂鸟摄影、POCO摄影,以及买摄影书进阶,开始有了些许进步,总算能够把人像拍得可以看了,成功约到师妹来做模特(看图)。希望2018年能够坚持自己的摄影爱好,能够从逐渐模仿到能够自己创作一些pose、表情呀,最重要的是用好光。(首先要找到一个GF)
篮球,是我保持最久的兴趣了。从小学六年级开始,直到现在,打篮球对于我来说,是过瘾、最释放压力的方式了。遗憾的是,眼睛越来越近视了,打球越来越是凭感觉来打配合和投篮了。希望接下来的一年,要保护好眼睛,看电脑是要时不时休息下,处理好工作与运动的时间。今年没有外出旅行,一个人的时候,难免会想很多,却总是太懒,没有勇气(主要是一个人很寂寞)一个出去旅行,一个人出去走走,真正了解自己。2018年,我要独自出去外省旅行一次,坐坐火车,拿着相机,记录每天的自己,开启一个自我了解的前行。
曾经看到过一本书《有些事现在不做,一辈子都不会做了》,里面有很多很多自己想做的。有第一次献血 、握一次妈妈的手,真的是好多都想真正去实现,特别是对于家人,珍惜现在拥有,努有奋斗去争取更好的。
真正去尝试实践,你才知道自己真正喜欢什么,不喜欢什么。不要妄自菲薄,你的外在表现是什么人,你就是一个什么样的人。
(完)
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
1 | $ hexo new "My New Post" |
More info: Writing
1 | $ hexo server |
More info: Server
1 | $ hexo generate |
More info: Generating
1 | $ hexo deploy |
More info: Deployment
css 常用布局,一些盒模型包括怪异盒模型,定位布局,流布局,浮动布局,flex 和 grid 布局。
需求:要求左右两层定宽,中间层宽度自适应优先渲染,且中间层与两边层有固定的边距。
通常使用 浮动、负外边距、相对定位来布局,这是实现布局的最基本的原子技术。
初始思路:中间层自适应使用百分比,两边固定宽度使用 px 或其他绝对单位,三列均使用左浮动。出现的问题:中间层的内容会被两边的层覆盖。这里假设左边栏的宽度为 140px,右边栏的宽度为 120px。
<div id="body">
<div id="main"></div>
<div id="left-side"></div>
<div id="right=side"></div>
</div>
#main {
float: left;
width: 100%;
}
#left-side {
/* 利用浮动元素的负外边距来定位 */
float: left;
width: 140px;
margin-left: -100%;
}
#right-side {
/* 利用浮动元素的负外边距来定位 */
float: left;
width: 120px;
margin-left: -120px;
}
初始的状态这样的:通过简单的负边距,已经让sub和extra定位到正确的位置。但是中间层的内容被遮挡了,下面我们来设置bd的padding值给左右两个子面板留出空间。
#body {
padding-left: 160px;
padding-right: 140px;
}
这里中间层被左右边栏遮挡了,接下来,介绍两种解决方案。
解决思路: 在不更改页面的 HTML 结构情况下,在父元素使用通过使用 相对定位 relative 来实现定位,代码如下:
#body {
/* 给左右两个子面板留出空间 */
padding-left: 160px;
padding-right: 140px;
}
#main {
float: left;
width: 100%;
padding-left: 160px;
padding-right: 140px;
}
#left-side {
/* 利用浮动元素的负外边距来定位 */
float: left;
width: 140px;
margin-left: -100%;
/* 新增的代码,相对定位*/
position: relative;
left: -160px;
}
#right-side {
/* 利用浮动元素的负外边距来定位 */
float: left;
width: 120px;
margin-left: -120px;
/* 新增的代码,相对定位 */
position: relative;
right: -140px;
}
小结:
值得注意的是,圣杯布局有个问题,就是当中间 main 层的宽度小于两边栏的宽度时,布局就乱了。
预览地址:demo
解决思路:为了中间 div 内容不被遮挡,直接在中间的 div 内部创建子 div 来放置内容,在该子 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。
<div id="body">
<div id="main">
<div id="main-inner"></div> // ♪(^∀^●)ノ
</div>
<div id="left-side"></div>
<div id="right=side"></div>
</div>
#main {
float: left;
width: 100%;
height: 200px;
background-color: #ff7400;
}
/* 新增添的代码 */
#main-inner {
/* 给两边栏留足位置 */
margin-left: 160px;
margin-right: 140px;
}
/* 这里设置一样 */
#left-side {
float: left;
width: 140px;
margin-left: -100%;
height: 200px;
background-color: #ff7400;
}
#right-side {
float: left;
width: 120px;
margin-left: -120px; // 右边栏的宽度
height: 200px;
background-color: #ff7400;
}
“双飞翼”布局是通过新建的div的外边距来隔离各列,在它的子 div 中设置 margin-left 和 margin-right 来为两边栏留足位置,而圣杯布局是通过父容器的内边距来实现各列的间隙。
“双飞翼”: margin-left, margin-right, 额外的 div。简洁,对响应式更加友好。
“圣杯”: position: relative; right, left。 padding-left, padding-right
(完)