发表于: 2017-03-26 23:42:21
2 710
【今天完成的事情】
今天写完了任务10提交审核。
【明天计划的事情】
1、任务11
2、翻译问题4-(4)
【遇到的问题】
1、前天说的想找找别的只用纯css的方法来写那个下拉菜单,原来想的是做一个纯色的矩形方框,然后在方框上面做个三角形,而不用背景图片。我的想法可能有什么不对的地方吧,没找到也没想到方法。所以暂时先不纠结。
2、重新设置radio样式。搜索实现的办法以及看师兄师姐写的,在这个搜索查找的过程中花了很多时间,最后终于在segmentfault里看到一个问答。(css 能改变input type radio和checkbox 圆圈或方框的大小吗?https://segmentfault.com/q/1010000002547288)这里面看到的其中一种方案,代码量还比较小,我就跟着试了一下,就改好了单选框的样式。
3、input的文本框独自占一行,想了一下,给他设置个具体宽度就好了。大于768px的时候用rem做单位,小于768px的时候用vw做单位。
4、解决问题2的时候想起来之前有个计划:想要理解一下各种符号是什么意思。看了几篇文章介绍。
(1)详解css中"点","井号","逗号","空格","冒号"的用法:http://blog.csdn.net/zhengzhb/article/details/7241642
(2)CSS中的大於(>)是什麼意思?: https://pjchender.blogspot.com/2015/07/css.html
(3)CSS中加號(+)和取代符號(~) 的意思:https://pjchender.blogspot.com/2015/07/css_25.html
(4)The 30 CSS Selectors You Must Memorize:https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
(还有+号和~号不能完全理解,文章(4)看起来讲得很齐全,明天试试翻译这篇文章或者继续搜索去理解这些选择器。)
【收获】
1、现在把这些符号什么意思列下来:
(1) #a,b{…………} (1)一个id叫a和一个标签是b的样式
(2) #a b{…………} (2)一个id叫a下面的一个标签是b的样式
(3) #a:b{…………} (3)一个id叫a的伪类b的样式
(4) #a.b{…………} (4)一个id叫a的下面的class叫b的样式
(5) .a > .b{…………} (5)设置class名为a下的class名为b的样式,class名为a下的其他元素不影响
2、修改radio样式的其中一个方法,运用:checked、border、border-radius并加入<span>标签来实现。
【3月13至3月19日周报】
<这周完成的事>
这周做完了任务9和任务10.
<下周计划的事>
下周计划做完任务11,任务12吧。希望任务13也可以开始。
<这周还没解决完的问题>
不同浏览器不同设备下页面样式不统一的问题。
<这周的收获>
1、知道用bootstrap做响应式导航栏的方法。
(1)head标签里除了需要引用bootstrap的css文件以外,还需要引用JQuery和js;
(2)做响应式导航栏三条横杠的按钮:
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-btn" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
(3)做导航栏里每个链接用无序列表,并且在无序列表外的div加入bootstrap里collapse、navbar-collapse这两个class选择器和example-navbar-collapse这个id选择器:
2、学会在搭配hexo的情况下,用github.io来展示完成的任务页面。
3、理解了一部分在css选择器中各种不同的符号的含义。
4、修改下拉菜单、按钮样式和radio样式。
(1)修改下拉菜单、按钮样式时需要用到appearance:none来去掉原本的样式。
(2)修改下拉菜单样式的其中一个方法是利用背景图片来实现。
(3)修改radio样式的其中一个方法,运用:checked、border、border-radius并加入<span>标签来实现。
评论