页面重构-让我们的布局自适应

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

总结

页面重构的方法和技巧有很多,自己应该保持一个谦卑的心,在重构的道路路上走下去。

一千张,我还差好多好多;

上个月读完格拉德威尔写的异类,第一章讲了一个效应叫做马太效应,“一个人从出生比不是就是一无所有,从出生开始我们就拥有了一定的资助和禀赋,能在众王面前站立人,好像完全凭借他的能力,事实上,总有潜在的优势,非凡的机遇和传统的文化令他们获益”

但是很多人都没有走完这一万小时,遇到挫折、批评、误解就轻言放弃。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华章科技

魔性程序员喊麦:一人我编程累,献给所有的IT精英们

投稿和反馈请发邮件至holly0801@163.com。转载大数据公众号文章,请向原文作者申请授权,否则产生的任何版权纠纷与大数据无关。

753
来自专栏编程坑太多

程序员该如何护肤?

1213
来自专栏北京马哥教育

那些你不知道的爬虫反爬虫套路

爬虫与反爬虫,是一个很不阳光的行业。 这里说的不阳光,有两个含义。 第一是,这个行业是隐藏在地下的,一般很少被曝光出来。很多公司对外都不会宣称自己有爬虫团队,甚...

2756
来自专栏BestSDK

一文揭秘,爬虫那些不为人知的套路

1、真实世界的爬虫比例 大家应该听过一句话吧,大概意思是说,整个互联网上大概有50%以上的流量其实是爬虫。第一次听这句话的时候,我还不是很相信,我觉得这个说法实...

3899
来自专栏逸鹏说道

端午漫谈(附:Ubuntu18.04下轻量截图软件)

有空就陪陪家人吧。今天陪外公吃了顿饭,陪老人家聊了会天,颇有点感触。发现技术真的是改变生活,小孩抖音自学跳舞,大人微信刷又刷,很多天海一方的老朋友都可以联系到了...

2444
来自专栏钱塘大数据

关于爬虫与反爬虫,这些“套路”你必须知道

爬虫与反爬虫,是一个很不阳光的行业。这里说的不阳光,有两个含义。 第一是,这个行业是隐藏在地下的,一般很少被曝光出来。很多公司对外都不会宣称自己有爬虫团队,甚至...

3754
来自专栏C语言及其他语言

那些让程序员目瞪口呆的BUG

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪l了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员对这个...

1103
来自专栏钱曙光的专栏

一周极客热文:Java开发牛人十大必备网站

新时代的学习不再是陈旧的课堂教学,而是个性化的学习,而网络自学也成为很多人的学习新方式,网站可以提供信息,以及一些很棒的讲座, 还能解答一般问题、面试问题等,质...

18310
来自专栏非著名程序员

开发者必知:谷歌做了一个艰难的决定

? 谷歌做了一个艰难的决定:弃用Java APIs。 所谓人红是非多,所以Android的崛起,必定伴随着战争。其中最具代表性的,最有争议的莫过于甲骨文和Go...

19310
来自专栏顶级程序员

盘点那些让程序员目瞪口呆的Bug都有什么?

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员们...

3205

扫码关注云+社区