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

>如果有一天：你不再寻找爱情，只是去爱；你不再渴望成功，只是去做；你不再追求空泛的成长，只是开始修养自己的性情；你的人生一切，才真正开始。

后记--
因为我学习前端经验还不够，干货不多，希望当做笔记和心情记录下来。
以后、毕业或者就业后还可以回味那时写的些许稚嫩的“博客”。

页面重构-让我们的布局自适应相关推荐

后端工程师入门前端页面重构（二）：心法 I
本文由 KnewHow 发表在 ScalaCool 团队博客. 上一篇博客是我们<后端工程师入门前端页面重构>系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零. 那么 ...
CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
一.再说关于"鑫三无准则" "鑫三无准则"这个概念貌似最早是在去年的去年一篇名叫"关于Google圆角高光高宽自适应按钮及其拓展"的文章中提 ...
如何学习页面重构/对页面重构理解
笔者是前端小白一枚,在往前端页面重构方向学习成长中,今天花了一天时间学习相关的文章在这里集合一些关于重构基础概念和成长建议,希望能对想了解和学习页面重构的同学有所帮助文章中提到的相关文章均说明链接 ...
页面重构“鑫三无准则” 之“无宽度”准则
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 一.关于&q ...
[css] 页面重构“鑫三无准则” 之“无宽度”准则
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1152 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
你是一个职业的页面重构工作者吗？
做为一个专职的页面重构者,我们从事的工作简单的说就是"将设计稿转换成WEB页面",这一过程可以很简单到直接把PSD从PS里导出成网页:也可复杂到需要考虑页面中每个标签的使用,考虑& ...
设置页面左右结构（其中一端自适应）
在网页中往往需要左右结构,例如下面效果: 那么下面就实现以下: 效果: 代码如下: <!DOCTYPE html> <html><head><meta cha ...

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

css重构之旅

回味

时隔三个月

重构布局

总结

页面重构-让我们的布局自适应相关推荐

最新文章

热门文章