CSS refactoring Tour (i)

Source: Internet
Author: User

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:


If the multi-line Overflow section displays an ellipsis:


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;


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:

> 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.

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.