这两天重构的几个页面

时间:2020-12-18 17:16:09

登录界面的底色不要设置,直接只设置阴影和圆角还有1px的白色边框就可以有玻璃的效果了。换不同的背景可以看出效果。炫目的背景透出来的效果更好一些。

这两天重构的几个页面

这两天重构的几个页面

中间的内容区域设置min-height:100%可以白色区域纵向铺满屏幕,不会出现内容少时页面只有一半的尴尬场面。

这两天重构的几个页面

由于右边的列表很长很长……滚动到下面的时候header就看不到了,不滚动的时候footer就看不到了,所以就使用了header和footer采用完全fixed的设置。另外,右边橘色的块块原本是放在页面中部的,但是,因为是一个随时可能发生的随机操作,最后决定把它也fixed,放在右边固定的位置,这样用户什么时候想点都可以点到了,而不用将网页滚上滚下的。

这两天重构的几个页面

 

这几天重构页面的感触是:

1、同一系列的页面结构一定要统一,比如一个contianer里面包装一个header、一个content、一个footer的模式。系列中不同页面的内容可以独立的在content中再做detail。这样对页面进行CSS布局的时候可以保证同一系列的页面的外观是一致的。

2、layout、image and color、font set要分开。这次页面重构中,颜色和字体是没怎么改动的,主要的改动集中在布局上,但是之前的CSS代码是将同一个元素的布局、颜色、字体写到一起,所有很混乱,感觉一直在代码中跳来跳去的修改。后来索性安装原则把它们分开,改动就可以集中在CSS代码的固定区域了,比较方便清晰。

3、CSS3.0带来的圆角、渐变、阴影(box shadow和text shadow)都超有用超方便,以前要做阴影做圆角还要专门切图,还要对准位置,很麻烦,而且不能自适应。现在直接写入CSS代码中,由浏览器来渲染为前端设计师提供很大便利,一大进步。