发表于: 2017-03-07 22:04:41

3 657


今天做了的事:给一个远程的,嗯,算是师妹吧,写一个页面。做好了任务六的header。
明天要做的事:写任务六的身体部分。

今天遇到的问题:第一部分是关于那个师妹的问题,写一个算零钱的页面。

没有任何psd,只有一个效果图。平时做任务距离都是从psd上面量出来的,这次没有psd,距离值都是估摸着给,比较麻烦。不知道以后工作是什么方式的。标题和正文没什么可说的,这里我一个laabel和两个input就直接堆放在那里,本想一会再写样式,没想到直接就顺次排列了。从这里可以看粗来大概label和input都是行内元素无疑了。然后写底下这个零钱的文本框,一开始我把label和input放在一个div里面,然后四个div堆着放,但是会出现上下文本框之间有距离,之前我明明部署了清零,不知道为什么。然后观察这个效果图,文字和文本框分别左右对齐,在我的脑海里一下子出现了一条属性:justify-content:space-between;(顺便说一句阮一峰老师的博客图文并茂看了根本忘不掉好么)那么就确定了是要用flex布局无疑了。我得结构设计的是下面四个堆着的div外面还有一个大的div。一开始我把display:flex设置在了最外面的大的身上,但用了这条属性四个小div会在主轴上横向排列。然后我把主轴方向改成了竖着的方向,但发现这时没有与justtify-content相对应的且能起到同样功用的属性,第二次失败。最后我想到一个办法,就是把四个小div复用一个类名,然后在这个类名上设置display:flex;那么这个div下面label和input两个子项目自动成为flex项目了,然后再设置justify那条属性,漂漂亮亮的分开两边~~成功!而且上下文本框的间距也奇迹般的消失了,这里还是不知道为什么。可以说要不是沁修大佬让我把任务五下面列表部分样式优化我今天就不会想到这个解决办法,虽然此处有拍马屁的嫌疑不过确实就是这么回事我之前类名就没复用过啊~(hahaha我就是在拍哦)

接下来就是任务六的header,调用bootstrap没有jquery的插件然后下了三次bootstrap解压了都没有最后发现是在jquery官网单独下载的hehehe~然后很迷茫如果用了bootstrap的class那么我想改我得样式怎么办?要在我自己的样式里用同名class写么?这个我今晚可能要去慕课网找找答案了。而且今天知道了可以链入多个css,且在北京的黄国宝兄弟的日报里发现可以把一些清零啊,font-size什么的拎出来写在一个css里单独链入,这样省去了每个任务都要写一次这些东西的麻烦,我感觉很不错,明天准备也写一个我自己的。
今天的感悟:1.认识到自己的菜了,这么简单的一个小页面也要花那么久去写,还磕磕绊绊,所以要多加练习。2.本来我是想她是不是报名了线上辅导的课程,交了钱的,我就不敢不给她做东西,但是听了多方意见,觉得就算报名了也就只负责任务部分啊,况且整个写好了给她对她的学习也不是好事。不过还是能管则管把。3.这个页面感觉做得还是不好,f12模拟手机会出现问题,我准备在我学到js的时候重新写一遍这个,挺有意思的。4.js部分我不懂啊是我家健兄弟提供的技术支持,但是算法部分挺有意思而且在听了周日的算法课之后也算有些感触,这个小算法正好练习了一下。至于具体内容我暂时先不说,等哪天再放飞自我日报没有东西写,我在把这个算法写上去凑字数哈哈哈哈哈

做好的样子我挂在下面了,感兴趣的可以去看看我怎么写的,不过任务进度落下了好多啊啊啊啊啊!!!!


返回列表 返回列表
评论

    分享到