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

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

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

css重构之旅的更多相关文章

  1. 精练代码:一次Java函数式编程的重构之旅

    摘要:通过一次并发处理数据集的Java代码重构之旅,展示函数式编程如何使得代码更加精练. 难度:中级 基础知识 在开始之前,了解"高阶函数"和"泛型"这两个概念 ...

  2. CSS重构:样式表性能调优

    这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...

  3. 我的CSS布局之旅--持续更新

    虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的 ...

  4. 早安Visual Studio!一次重构之旅,夏洛特烦恼

    vs问题描述 我的IDE版本是vs2013,今天新开发了一个功能,是一个接口程序,当F5调试时,出现了莫名的错误,为什么呢?因为vs弹出了下面的一个框,只说是“未将对象引用设置到对象实例“. 点击”确 ...

  5. Css3盒子模型-css学习之旅(5)

    主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddinglef ...

  6. css文本样式-css学习之旅(4)

    color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-inde ...

  7. css3的样式讲解-css学习之旅(3)

    css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...

  8. Mawawa CSS 学习之旅 Display

    CSS 类型之 Display 更新时间: 2018-2-10: 一个良好的布局结构从 display 开始! 分类:外部值.内部值.列表值.属性值.混合值.显示值.全局值: 一.外部值 作用:主要用 ...

  9. 重构:CSS也面向对象

    最初接触到面向对象的CSS还是因为项目中的CSS已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构.在前端重构中,我们已经讨论过了JavaScript面向对象的重构,在这个时 ...

随机推荐

  1. React组件实现越级传递属性

    如果有这样一个结构:三级嵌套,分别是:一级父组件.二级子组件.三级孙子组件,且前者包含后者,结构如图: 如果把一个属性,比如color,从一级传递给三级,一般做法是使用props逐一向下传递,代码如下 ...

  2. 单片机课程设计——《基于AT89S52单片机和DS1302时钟芯片的电子时钟(可蓝牙校准)》

    引言 本设计以AT89S52单片机为控制核心,时钟芯片DS1302提供时钟源,配合LCD1602液晶显示模块,组成基本硬件系统,同时利用HC-05嵌入式蓝牙串口通讯模块,可在手机端进行日期.时间的校准 ...

  3. 五子棋AI大战OC实现

    Gobang 五子棋AI大战,该项目主要用到MVC框架,用算法搭建AI实现进攻或防守 一.项目介绍 1.地址: github地址:Gobang 2.效果图: 二.思路介绍 大概说下思路,具体看代码实现 ...

  4. 【caffe-windows】 caffe-master 之 训练自己数据集(图片转换成lmdb or leveldb)

    前期准备: 文件夹train:此文件夹中按类别分好子文件夹,各子文件夹里存放相应图片 文件夹test:同train,有多少类就有多少个子文件夹 trainlabels.txt : 存的是训练集的标签  ...

  5. ABAP 7.4 新语法-内嵌生命和内表操作

    1.内嵌声明 2.内表操作 3.opensql ************************************************************************ 1. ...

  6. [内存管理]连续内存分配器(CMA)概述

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 原文地址:http://lwn.net/Articles/396657/ 1 ...

  7. linux性能之iostat

    在使用linux系统的过程中,总是可能需要当前io性能的状态信息是怎么样?这里就就是一下iostat,可以通过iostat来初步查看io的状态信息. 1.常用方式 iostat -xdk 1 10 或 ...

  8. MongoDB3.4 shell CRUD操作

    输入db,显示你正在操作的数据库:切换数据库,输入use dbName,如果数据库不存在的话会自动帮我们创建一个:使用show dbs可以显示所有可用的数据库. 测试数据在文末 插入文档 插入操作的行 ...

  9. 【Java SE】如何用Java实现直接选择排序

    摘要:直接选择排序属于选择排序的一种,但是它的排序算法比冒泡排序的速度要快一些,由于它的算法比较简单,所以也比较适合初学者学习掌握. 适宜人群:有一定Java SE基础,明白Java的数据类型,数组的 ...

  10. PHP 无限级分类(递归)

    网上有很多,这是我自己做测试用的$arr = array( array('id'=>1,'name'=>'电脑','pid'=>0), array('id'=>2,'name' ...