回想这整个周下来,做的事情不多也不少,但是觉得能够写出来这么多app的静态页面,心里也觉得是很开心了。
第一天,我做了登录之前的页面,因为之前从来没有接触过rem布局,所以一开始的时候,是有点无从下手的,于是就先去百度了一下rem相关的布局,了解到它是一种专门用来适应各种不同大小屏幕的方式,之前用的网页布局是px,所以从来没有写过rem,在写的过程中了解到rem都是针对于根元素也就是html进行控制的。所以需要在js中写一段脚本,告诉浏览器不同的屏幕宽度应该有不同的适应标准。并且在设置宽的时候尽量选择百分比,而不要选择rem,同时尽量不要设置大的div的margin,而应该使用padding,防止出现不可预期的错误。
聚焦输入框,默认值消失(其实是将值变成了透明色):
input:focus::-webkit-input-placeholder {
color: transparent;
/* transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值 */
}
/* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder {
color: transparent;
}
/* Mozilla Firefox 19+ */
input:focus::-moz-placeholder {
color: transparent;
}
图文排版:
左右:div中包裹两个标签,分别包含文字和图片,所以那就需要对其进行浮动,当图文不在同一个水平线的时候,需要对其中的图形进行vertical:middle操作。
上下:div中同样包裹两个标签,对其进行换行处理,并对div的行高进行设置,调整文字的位置。
水平方向的滚动:
首先对其父元素进行样式设置:
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;(超出不换行)
子元素需要左浮
做一个自己希望的下拉框样式:
首先写一个下拉框内容,将此下拉框的透明度设置为0,并将其z-index设置成为最大,让此元素在最上层,其次在下拉框上覆盖一个span标签,并根据需要利用border写一个自己需要的下拉箭头,当改变值得时候利用vue同时改变vue中的内容就可以达到下拉框的效果
最后,在切换选项卡的时候,我利用的:is来关联当前我点击的是哪个选项卡,i进而改变内容。
虽然东西不多,但这也是一个慢慢积累的过程,希望自己每一次做总结的时候都在更加优秀一点呀!