Unchanged and Variable html structure splitting and css design

The disassembly and combination of HTML structure

Intermittent progress bar

Below is a progress bar, it is estimated that everyone can see this progress bar and ordinary different, this progress bar is missing area, a bit like being eaten by mice, intermittent.

Intermittent progress bar

This was originally a friend sent to me, asked me what good advice, then think about it and do not think of any good way, you have to say a cut, that is what this article said the demolition, the structure is as follows:

The bottom gray is implemented by the progress background, each of the remaining done represents a blue segment, each undo represents a gray segment, each set corresponding width

. Progress
. progress-done
. Progress-undo
. progress-done
. Progress-undo
. progress-done
...

Second version

Remove undo and use absolute positioning directly against the done (because the progress container has the same gray as the undo gray)

. Progress
. progress-done*n

Third version

Use absolute positioning on the regular progress bar to add undo, which is relatively better and allows easy switching between general and specialization

. Progress
. progress-done
. progress-undone*n

Summed up from the above three versions: the first version is no matter 3,721, are torn down; the second version is to add some thinking, the blue is removed, the gray together; the third version is based on the second based on the actual scene transformation, further optimization of the idea of disassembly and combination, First put the intermittent blue into one, and then through the gray to remove each, to achieve the visual opening of the blue. This is the source of thought that this article splits and fits.

Below we continue to appreciate the beauty of the next dismantling.

Extended Application

Title Right Content

First, a simple common, the right side of the title has an operation, the following figure:

Title Right Content

For the first HTML structure as follows:

. BLOCK-HD
H3.block-tt
A.link-xxx

For the second structure, we have to use the combination, can no longer be a simple list, the code is as follows:

. BLOCK-HD
H3.block-tt
. hd-right
A.link-xxx
A.link-xxx

In contrast to both of these cases, the first is only one operation, we can position the operation directly to the right, while the second has two operations (or more), at which point we can not simply go to the location, but add a package (hd-right) to put all the operations together, The package is then positioned on the right side.

Here we put the scattered combination of positioning, reflecting the principle of the combined.

Classic graphics and text mixed row

The following figure: the first is the simplest, the left side of the picture to the right text; the second left picture has content below it, possibly a title or some operation; the third is on the second base, and there's a part of the right.

Here we evolve the structure over and over again:

Minimalism
. imgtext-mix
Img.mix-img
H3.mix-tt
. Mix-intro

Add link
. imgtext-mix
A.mix-img-link>img.mix-img
H3.mix-tt>a.mix-tt-link
. Mix-intro

First time, wrap the picture to the right content
. imgtext-mix
A.mix-img-link>img.mix-img
. mix-text
H3.mix-tt>a.mix-tt-link
. Mix-intro

Second time, the left side of the picture and other content wrapped
. imgtext-mix
. mix-left
A.mix-img-link>img.mix-img
. left-oper
. mix-text
H3.mix-tt>a.mix-tt-link
. Mix-intro

Third time, wrap the rightmost information
. imgtext-mix
. mix-left
A.mix-img-link>img.mix-img
. left-oper
. mix-text
H3.mix-tt>a.mix-tt-link
. Mix-intro
. mix-right
...

First from the minimalist, and then according to the space principle, one step by step combination, from the structure of the space on the division of the region to achieve the desired effect, this is from simple Shi to the classification of boiling, from the essence of the dismantling to the aesthetic embodiment of the combination.

Other disassembly

From the end to achieve the effect, we have to do the structure is nothing but up and down, left and right, separated from the cover of the disassembly. The example of the first progress bar is a good illustration of the coverage of the split (star comments can also be used), the extension of the application of the said more is about the disassembly, below we continue to talk about the separation of up and down with the split.

Split up and down

This is most typical of the site as a whole layout, as detailed in the HTML complete station structure design

Header.header>.inner-center
Section.section-mainr>.inner-center
Footer.footerr>.inner-center

Detachment from disassembly

If you use CSS to implement the results, all the structure to apply Fixed,absolute is a detached disassembly. The most typical here is fixed navigation, and the fixed lower right corner of the back to the top, the effect see W3cplus, when you scroll the scroll bar will find the top navigation has been fixed at the top, and the lower right corner will appear a small button to return to the top

Said so much, summed up is: The HTML structure is everywhere in the map of the idea of disassembly and combination.

The way to dismantle and close

The so-called demolition, is to make every element as far as possible independent or independent of each effect. Element Independent this relatively simple, relatively good understanding, is to each element have their corresponding label, and the effect of independent this will have to go according to actual combat analysis, flexible use.

The so-called combination, is to use as little as possible elements or the use of some elements of the label package to achieve unified control. Less label this piece, one div this has been made a good explanation, CSS3 's progress provides a strong technical support for this, and the package of this also have to be based on actual combat to choose.

In short, the HTML structure is certainly not the simpler the better, of course, is certainly not the more complex the better, but based on the dismantling of a choice between the way.

Invariant and variable in CSS design

A Face test

First of all, this is a face test, second, anyway, I did not do this interview questions, and finally forgot which factory face questions.

The specific requirements I forget, presumably means that this content in the window in the vertical direction of the center, to the picture for reference, the text extends up and down, above the text is more open up, the following text more down, the picture size fixed, the text how many not fixed (red line is I add, as the vertical direction of the middle lines, to assist the explanation). Here the text belongs to the variable factor, and the picture belongs to the fixed factor.

Thinking Analysis

First of all, we see the picture here on the same level, the number of words can not affect the picture, so we come to two possible solutions, the first text normal document flow, the absolute positioning of the picture, the second text absolute positioning, picture normal document flow.

Second, because the above text extends direction is facing up, itself violates the normal document flow direction (normal should be with the increase of the text downward to extend the height), so that the text section above must be absolutely positioning, set bottom value

Finally, combined with the above two reasons, we first use the second program test, text absolute positioning, picture normal document flow.

Here, we use the previous article to disassemble the idea to get the HTML structure as follows:

Ul.demo
Li
. text-top
Img.img-center
. text-bottom

The main CSS code is as follows:

. demo{
Position:absolute;
top:50%;
}
. Demo li{
Float:left;
width:120px;
Margin:0 20px;
position:relative;
}
. text-top{
Position:absolute;
bottom:90px;
left:0;
}
. img-center{
Margin-top: -34px;
width:120px;
height:68px;
}
. text-bottom{
Position:absolute;
top:50px;
}


Common examples

Content Fluid Layout

Here Select the sidebar fixed, the content is the remaining width of the fluid layout. The sidebar is a fixed factor and the content is a variable factor.

Section.section-main
. inner-center.clearfix
. main>.content
Aside.aside-right

. main{
Float:left;
width:100%;
}
. Main. content{
margin-right:320px;
}
. aside-right{
Float:left;
width:300px;
Margin-left: -320px;
}

graphic Mixed Row

Or the previous text mixed row, generally speaking, the picture is fixed width, and the text part is not set width. The fixed factor is the width of the picture, and the variable factor is the width of the text.

. imgtext-mix
A.mix-img-link>img.mix-img
. mix-text
H3.mix-tt>a.mix-tt-link
. Mix-intro

. mix-img-link{
Float:left;
width:200px;
margin-right:20px;
}
. mix-text{
Overflow:hidden;
}

the container is variable in width, but the width and height ratio must be

The constant factor is the aspect ratio, and the variable is the width.

Variable and constant of the moving end

There are a lot of people who have just started mobile side to ask a question whether the mobile end should be used as a percentage. In fact, put aside those new units REM, VW, VH and so on, moving the end of the percentage, PX is also available, is not what you think. With what units, the most important thing is to grasp the variable and immutable. If you have a good grasp, the mobile side is actually the same as the PC. Of course, if you are accustomed to the PC to set a fixed width, then the estimate will be frustrated.

Full-screen picture scrolling

Full screen of this thing, in the case of VW still can not be used, that is not 100% (the full screen is the width of the entire screen, excluding height).

Ul.imgslide
Li*4>img

Float layout
. imgslide{
width:400%;
}
. Imgslide li{
width:25%;
Float:left;
}

Absoulte layout
. imgslide{
width:100%;
height:100px;
position:relative;
}
. Imgslide li{
width:100%;
height:100%;
Position:absolute;
top:0;
left:0;
}
. Imgslide Li:nth-child (n+1) {
Transform:translate (100%, 0);
}

graphic and mixed arrangement table

Or the front of the graphic mixed row, haha, for the PC you may ignore the right text to set the width directly, but move the end that I'm sorry, you must consider this variable factor.

This estimate of 90% of the mobile end has this effect, of course, it is not possible to design a 375px manuscript, and then you do a 375px width effect. But if you are in proportion to the design draft, and then set the percentage of the picture and width, this situation changes in the width of the picture, of course, will affect the height of the picture changes (if it is a fixed height of the picture can not be seen, all kinds of tension or deformation), and the height of the picture changes will affect the overall row changes, That estimate to hold a different mobile phone, see the right text content or high or low is also drunk.

The percentage effect is probably the following figure:

So the general design here is the picture fixed size unchanged, the right text is variable, occupy the rest of the space. To achieve the same as the above graphics and text, of course, technical can use many methods such as flex,absolute,float, etc.

single-line List

Same Single-line list, title because the length is variable factor, it is not appropriate to directly control its width. The right side of some buttons or auxiliary information relative to the use of absolute positioning on the right more reasonable.

Ul.line-list
Li
P.title+i.icon-xxx

. line-list li{
position:relative;
padding-right:40px;
line-height:40px;
}
. line-list Li. icon-xxx{
Position:absolute;
right:10px;
top:50%;
Tranform:translate (0,-50%);
}
If the text is longer, you need to do more than omit truncation
. line-list Li. title{
padding-left:10px;
Text-overflow:ellipsis;
White-space:nowrap;
Overflow:hidden;
}

Equal

Here is the level of equal parts, the technology can be used Flex,float,table-cell and so on, in which float should be the lowest, because you have to set the width of the item, three equal to set 33.33%, four division set 25%, such as the re-use of too low, is not suitable for more advanced mobile end, so Flex and Table-cell is a good choice, do not need to care about the number of items (of course, a row can be shown below, the show is also sad reminders). So in this case even the unit is redundant.

Ul.equal-list
Li*n

Flex
. equal-list{
Display:flex;
}
. equal-list li{
Flex:1;
}

Table-cell
. equal-list{
display:table;
table-layout:fixed;
width:100%;
}
. equal-list li{
Display:table-cell;
}

Translate

The percentage of units used in translate is a percentage of their width, so it's a great advantage for unknown widths, especially for horizontal and vertical centers.

. center-translate{
Position:absolute;
left:50%;
top:50%;
Transform:translate (-50%,-50%);
}

Of course, there's a lot of change and variability, in short, at the mobile end of the variable factor than the PC, more than the width or height of the uncertainty, it is necessary to avoid the direct setting of the dead width or height, of course, fortunately, CSS3 support to make these uncertain factors of control to become simple.

change and invariant

Finally, whether it is a mobile end or a PC end, the way to set a specific width or height is doomed to lack of extensibility. Therefore, especially in the common components, it is necessary to further dig deeper, to learn more about the use of the scene, the special features of each scene, and even the future changes are predictable.

may say more about the width of the control, in fact, for the choice of methods, the same effect, there may be many ways to achieve, and each method has its own advantages and disadvantages, so also according to the actual situation to flexible use, this is also a variable. If all you are is across, it is a fixed mind, it doesn't matter.

If, from a higher point of view, nothing is constant, everything is mutable. Perhaps this site is immutable, to the site will have to change, so refused to dogmatism, everything from the actual situation, according to the needs analysis, come to a reasonable practice.