页面重构-让我们的布局自适应
2018-06-24 01:24:26来源:未知 阅读 ()
css重构之旅
>前言: 今年我大一,马上就要大二了。从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活.学习前端也有将近一年了。一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基础的布局技巧。
回味
2017年3月,百格教育的手机端网站,是我接到的第一个公司外包的项目。我和组长合作完成,现在项目也已经顺利完成,回想起来,自己也跟着组长学到了不少:
1)一个公告的列表(你应该提前考虑到,一则公告的字数一定有多有少的)多出的应该做处理,不然超出会排成两行,使布局陷入混沌的状态:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
如果是多行溢出部分显示省略号:
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
2)一个活动列表的内容(许多类似的情况),应该的可伸缩的。如果你一昧用margin撑起来的布局,就会使布局不具有伸缩性,内容多少都会被定死,情况一有变化,要多留下大片空白,要么导致了重叠,在此使布局陷入混沌状态。
>自己多少有些愧疚,当时还没有养成写博客总结的习惯,而且居然忽视了这个问题三个月之久
转而继续了JavaScript中的oop学习。之后几个陆陆续续的小项目,由于都是自己一个人做,而且和后台的人联系不紧密,其实自己一直使用的都是固定布局。
正是如此:
一个人做项目和合作做项目的差别就已经显示出来,一个人做项目你会忽视很多问题,你学到的东西一定是有限的。而如果你跟前辈合作,不管是和前端还是后台的前辈,你的问题很容易被发现;当发现问题你的第一情绪,应该是开心和喜悦,因为在解决问题和bug的过程中,是你进步最快的过程(我觉得没有之一,一)
时隔三个月
时隔三个月,今天5月29号,这次我跟主任合作,我觉得我学到了很多很多,也意识到了自己的问题,
一昧去追求那些视觉的效果,反而忽略了最基础的布局技巧(是我给自己这三个月的总结反思吧)
一昧用margin撑起来的布局,具有很差的伸缩性。
>记得,无论第一次带我的家兴学长也是现任主任;还是老主任,还是组长;一个人如果很很认真的指出你们没有认识到的问题,你应该感激他们,你的进步和成果离不开一些人的指导,我相信每个人的研发生涯中,总有这么一些人,无论是前端,后台还是其他。
这次的项目不大,但是内容还是比较多的(今年我大一,对我来说一个能学到很多东西项目才是最好的项目,至于现在挣多少外快,都是次要的)
先提到一个经典的基础布局-自适应高度(大家不要见笑)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="Generator"content="EditPlus®"> <meta name="Author"content=""> <meta name="Keywords"content=""> <meta name="Description"content=""> <style text="text/css"> /** 布局 */ body { margin:0px; } #container { width:100%; margin:0 auto; border:1px solid 81cfa2 ; } #header { width:100%; float:left; clear:both; border:1px solid #81cfa2; } #header_left { width:50%; border:1px solid #81cfa2 ; float:left; } #header_right { width:49%; border:1px #F00 solid; float:right; } #main { width:100%; float:left; clear:both; border:1px #F00 solid; } #main_content{ width:100%; border:1px solid blue; } #footer { width:100%; float:left; clear:both; border:1px #F00 solid; } </style> </head> <body> <div id="container"> <div id="header"> <div id="header_left"> 头部左侧 </div> <div id="header_right"> 头部右侧 </div> </div> <div id="main"> <div id="main_content"> 主页内容 </div> </div> <div id="footer">底部(footer)</div> </div> </body> </html>
重构布局
移动端重构页面布局8大方法:http://www.divcss5.com/html5/h20001.shtml
昨天晚上读了张鑫旭的CSS流体(自适应)布局下宽度分离原则、页面重构的三无准则获益匪浅,对流体布局有了新的认识吧
流式布局就像在学校食堂排长队打饭一样,来一个就跟在后面,这样使布局具有很强的伸缩性,
正如张鑫旭的文章介绍的无宽度原则,牺牲一层标签,单独设置宽度。
宽度,浮动,绝对定位都会阻碍容器流动性,而padding和border不会,
使用宽度分离的原则就不用担心里面的内容(里面的内容需遵循“无宽度准则”)会因为宽度溢出撑开布局而造成错位了。
这个作品可以帮你仔细分析下几种页面重构布局的差异:
http://wow.techbrood.com/fiddle/fork?id=25477;
总结
页面重构的方法和技巧有很多,自己应该保持一个谦卑的心,在重构的道路路上走下去。
一千张,我还差好多好多;
上个月读完格拉德威尔写的异类,第一章讲了一个效应叫做马太效应,“一个人从出生比不是就是一无所有,从出生开始我们就拥有了一定的资助和禀赋,能在众王面前站立人,好像完全凭借他的能力,事实上,总有潜在的优势,非凡的机遇和传统的文化令他们获益”
但是很多人都没有走完这一万小时,遇到挫折、批评、误解就轻言放弃。
推荐一篇异类的读后感:
http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html
>如果有一天:你不再寻找爱情,只是去爱;你不再渴望成功,只是去做;你不再追求空泛的成长,只是开始修养自己的性情;你的人生一切,才真正开始。
后记--
因为我学习前端经验还不够,干货不多,希望当做笔记和心情记录下来。
以后、毕业或者就业后还可以回味那时写的些许稚嫩的“博客”。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:关于前端规范
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash