CSS Refactoring Tour> Preface: My Freshman year, I will be a sophomore soon. Graduating from the summer vacation to the University of the year immediately past, immediately ushered in a sophomore life.The learning front has been around for almost a year. The pursuit of those visual effects and relatively high-end and novel technology, but ignored the most basic layout skills. Aftertaste
In March 2017, the mobile web site of the Hundred-cell education was the first project I had received from a company that was outsourced. I work with the team leader to complete, now the project has been successfully completed, in retrospect, I also follow the team leader learned a lot:
1) a list of announcements (you should consider in advance, a notice of the number of words must have a little) more should be done, or more than will be lined up in two lines, so that the layout into a chaotic state:
Toverflow:hidden;text-overflow:ellipsis;white-space:nowrap;
If the multi-line Overflow section displays an ellipsis:
Display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
2) The contents of an activity list (many similar cases), should be scalable. If you use margin to prop up the layout, it will make the layout is not scalable, the content will be dead, the situation changes, to leave a large amount of space, or cause overlap, where the layout into a chaotic state.
> himself somewhat guilty, did not develop the habit of blogging summary, and actually ignored the problem for three months
Instead, we continue to learn oop in JavaScript. After a few of the small projects, because they are a person to do, and the background of the people are not close, in fact, they have been using the fixed layout.
It is this:
the difference between a person doing a project and collaborating on a project has been shown that a person doing the project you will neglect a lot of problems, and what you have learned must be limited. and If you work with your predecessors, whether it be with the front-end or back-office predecessors, your problems can easily be found, and when you find the first emotion of the problem, it should be happy and joyful, because in the process of solving problems and bugs, is the fastest process of your progress (I don't think one, one)
Three months lapse
After three months, today May 29, this time I work with the director, I think I learned a lot, but also aware of their own problems,
Ignorant to pursue those visual effects, but ignored the most basic layout skills (I give myself this three months of summary reflection it)
An ignorant of the layout with margin, with very poor scalability.
> Remember, whether the first time I took my Fan Cochang is also the current director, or the old director, or the leader; a person who very seriously points out that you do not recognize the problem, you should be grateful to them, your progress and results can not be separated from the guidance of some people, I believe everyone's development career, there are always so some people, whether the , backstage or something else.
This time the project is not big, but the content is still more (my freshman year, for me a can learn a lot of things project is the best project, as to how much extra money now, are secondary)
First mention of a classic basic layout-adaptive height (everyone do not laughed at)
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><title>Document</title><Metaname= "Generator"content= "editplus®"><Metaname= "Author"content=""><Metaname= "Keywords"content=""><Metaname= "Description"content=""><styletext= "Text/css">/** Layout*/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><DivID= "Container"> <DivID= "header"> <DivID= "Header_left">left side of head</Div> <DivID= "Header_right">right side of head</Div> </Div> <DivID= "Main"> <DivID= "Main_content">Home Page Content</Div> </Div> <DivID= "Footer">Bottom (footer)</Div></Div></Body></HTML>refactoring layouts
Moving End multiplicity page layouts 8 great ways: http://www.divcss5.com/html5/h20001.shtml
Last night I read Zhang Xin. CSS fluid (adaptive) layout under the principle of width separation, page reconstruction of the three no criteria to benefit from the fluid layout has a new understanding of it
Flow layout like a long line in the school cafeteria, one is followed, so that the layout has a strong flexibility,
As Zhang Xin Asahi's article describes the principle of no width, sacrifice a layer of labels, set the width individually.
width, float, absolute positioning will hinder container fluidity, and padding and border will not,
The principle of using width separation is not to worry about the contents (the content in the "no-width criteria") will be offset by the width overflow open layout .
This work can help you to carefully analyze the following several page reconfiguration layout differences: http://wow.techbrood.com/fiddle/fork?id=25477;
Summarize
Page refactoring methods and techniques there are a lot of things that should keep a humble heart and go down the road to refactoring.
1000 sheets, I'm still a lot worse.
Last month read Gladwell wrote the heterogeneous, the first chapter of an effect called Matthew Effect, "a person from birth than is nothing, from birth we have a certain amount of money and endowment, can stand in front of the king of the people, as if entirely by virtue of his ability, in fact, there is always a potential advantage, They benefit from extraordinary opportunities and traditional culture. "
But a lot of people did not walk through these 10,000 hours, setbacks, criticisms, misunderstandings and give up lightly.
Recommend a heterogeneous reading:
Http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html
> If one day: you no longer seek love, just love, you no longer want to succeed, just do it, you no longer pursue the vague growth, but begin to cultivate their own temperament, your life is really the beginning.
PostScript--
because I learn the front-end experience is not enough, dry, hope as notes and mood record down.
later, after graduation or employment can also aftertaste at that time wrote a little childish "blog."
CSS refactoring Tour (i)