Recently bored learned at the front end, to be honest there is no beauty front and moving bricks no difference, the only worth mentioning is his layout method. This method is used to write my dead pages, without the framework of various adaptive functions, and mainly want to record it thought.
Write front-end optimization algorithm differs from the algorithm can often be a little less of an array array, and the front end as long as chaos, several sets of several div nothing to do, no one will get to the bottom you wasted a few div. So basically every module sets a div, brother Ye offspring or, on the set of meaningful, as long as they took the trouble on the line. And always uphold a thought, write the contents of the first layout, write each piece must be clear thinking, skilled who will write several times, summed up the use of more and more about the components of the package, not brains twenty-three hours a set of front-end not a problem.
Ideological aspects of layout, flexible box layout will lose a lot of trouble, mainly because of his arrangement, and centered way can replace a variety of margins and float settings. Mobile terminal can only accommodate a variety of mobile phone screen, so you can look a little computer terminal. Narrowest resolution 1024px, widest 1920px, write pages in order to adapt to all screens, the best way is to give a portion of the contents of the minimum width, and then both sides of the blank, in fact, this is the moment Taobao pages and other methods used. Specifically, it is the overall content wrapped in a div, width is generally around 1000, and then use margin: 0 auto; horizontally centered, of course, you can then do a media query.
For the overall layout, me encapsulates two widths, wide-percentage (fluidwidth) width and a fixed length of formula (containerwidth). Percentage of wide-end PCs without the overall layout substantially only a part of the layout; integrally movable end portion of the layout are used, but there is something to prevent squeeze down. Fixed length wide-computer, a mobile terminal for both the overall layout.
For internal div, here I used three middle way center-all, justify, align, etc., would not be able to do the margin alignment. As for the alignment between the div, with a transverse latitude-spacearound, spacebetween, there are longitudinal longitude, sufficient to meet the majority of the arrangement.
The module between the pages, I use the margins to separate. There, each write web pages, when the layout gave a general background, I have here is the first layer of red yellow blue background, with a second layer of powder brown.
After writing static pages, the rest is dynamic pages. With most of the carousel view of swiper best, and the rest I just wrote some native js, js deep water plus I am not interested to be a front-end engineers did not go deep, so not much to describe. .
I offer the following frame layout:
/*------------------------公共样式表----------------------------*/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
a {
text-decoration: none;
}
p {
text-indent: 16px;
font-size: 15px;
color: #333333;
}
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
.center-align {
display: flex;
align-items: center;
}
.center-justify {
display: flex;
justify-content: center;
}
.latitude-spacearound {
display: flex;
align-items: center;
Content-The justify: Space-around;
}
.latitude {-spacebetween
the display: Flex;
align = left-items: Center;
The justify-Content: spacebetween;
}
.longitude {
the display: Flex;
Flex-direction: column;
}
.fixedwidth {
width: 1349px;
margin: Auto 0;
padding: 0. 6%;
Box-Sizing: border-Box;
}
/ * percentage column layout * /
.fluidwidth {
width: 100%;
Box-Sizing: border-Box;
}
first very grateful to me a few days ago with the zzw classmates, let me look less boring day boring. Honestly bootstrap4 actually learn about it, in theory, nothing to write out a problem, but I really did not write out a power. . Like a lot the past few months, not a procedural issues, but questions about why knock code, as well as aspects of life. Not to be a front-end, then I wrote bootstrap4 if in addition to a waste of brain memory, nothing else with the egg, if you really want to write a front-end, and learning is not a problem. In contrast, I wanted to do something you like, good, in terms of their meaningful. .
very sorry. .
---------------------
Author: Flynn_curry
Source: CSDN
Original: https: //blog.csdn.net/Flynn_curry/article/details/93312235
Disclaimer: This article as a blogger original article, reproduced, please attach Bowen link!