Css reconstruction journey (1): css reconstruction journey

Css reconstruction journey (1): css reconstruction journey
Css refactoring tour> preface: my freshman year this year is about to become a sophomore year. The year from the summer of my senior high school graduation to the university will soon pass, and the university will soon begin its second year of life. The pursuit of those visual effects and relatively high-end and novel technologies ignores the most basic layout skills. Aftertaste

In March 2017, the mobile phone website of baige education was the first outsourcing project I received. I have completed the cooperation with the team lead, and now the project has been successfully completed. In retrospect, I have learned a lot from the team lead:

1) A list of announcements (you should consider in advance that there must be a small number of words in an announcement) should be processed. Otherwise, the announcement will be lined up in two rows, chaotic layout:

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

 

The ellipsis is displayed in the multi-row Overflow Section:

display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;

2) The content of an activity list (in many similar cases) should be scalable. If you use a margin-based layout, it will make the layout unscalable and the content will be fixed. When the situation changes, you need to leave a large blank space or overlap, the layout is in chaos.

 

> I was somewhat embarrassed. At that time, I had not developed the habit of writing blog summaries, and I ignored this problem for three months.
In turn, we continue to learn oop in JavaScript. In the next few small projects, they all work on their own, and they are not closely connected with people in the background. In fact, they have always used a fixed layout.

 

This is exactly the case:

The difference between Project Creation and Project Creation by one person has already been shown. If you do a project by one person, you will ignore many problems. What you learn must be limited.If you cooperate with your predecessors, whether it's with the front-end or back-end predecessors, your problems will be easily discovered. When you discover problems, your first mood should be happy and happy, because the process of solving problems and bugs is the fastest progress (I don't think so, I)

Three months later

After three months, today, on July 15, May 29, I joined hands with the director. I felt that I had learned a lot and realized my own problems,
I tried to pursue those visual effects, but ignored the most basic layout skills (I gave myself a summary and reflection over the past three months)
The layout supported by margin has poor scalability.

> Remember, no matter whether the first time I brought my senior student is also the current Director, the old director, or the group lead. If a person seriously points out the problems you did not recognize, you should be grateful to them, your progress and achievements cannot be separated from the guidance of some people. I believe that there are always such people in your R & D career, whether they are the frontend, backend, or others.

This project is not big, but there are still a lot of content (my freshman year this year, for me, a project that can learn many things is the best, as to how much extra money is earned now, it is secondary)

Let's first mention a classic basic layout-adaptive height (don't laugh)

 

<! Doctype html> Rebuild Layout
Mobile reconstruction page layout 8 Methods: http://www.divcss5.com/html5/h20001.shtml
I read Zhang xinxu's CSS fluid (Adaptive) Layout last night. The three no-Principles of width separation and page reconstruction have benefited a lot. I have a new understanding of Fluid layout.
The stream layout is like waiting for a long meal in the school canteen, so that the layout is highly scalable,
As ZHANG xinxu's article introduces the no-width principle, sacrifice a layer of labels and set the width separately.
The width, float, and absolute positioning will impede container mobility, while padding and border will not,
With the principle of width separation, you don't have to worry about the content in the content (the content must follow the "no width criterion") because the width overflows to open the layout and cause dislocation.
This work helps you carefully analyze the differences between several page reconstruction la s:
Http://wow.techbrood.com/fiddle/fork? Id = 25477;
Summary
There are many methods and techniques for page reconstruction. You should keep yourself humble and go on the road of reconstruction.

One thousand sheets, I am still a lot worse;
 
Last month, after reading the heterogeneous data written by Gladwell, the first chapter describes an effect called the Matthew effect. "From birth to birth, we have a certain level of funding and endowment, standing in front of the Kings seems to rely entirely on his ability. In fact, there are always potential advantages, and extraordinary opportunities and traditional cultures will benefit them"
However, many people did not finish these 10 thousand hours, so they gave up in case of setbacks, criticism, or misunderstanding.
We recommend a heterogeneous post-reading experience:
Http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html

> If one day: you no longer look for love, just love; you no longer desire to succeed, just do it; you no longer pursue vague growth, just start to cultivate your own temperament; everything in your life begins.
 
Postscript --

I don't have enough front-end experience, but I don't have much to learn. I hope to record my notes and mood.

In the future, after graduation or employment, you can review some of the immature "blogs" you wrote at that time ".