Some questions about writing styles for your own garden

A few days ago in order to give Aaron the great God, registered their own blog Park account, but have not had time to take care of, yesterday wrote code found some problems, want to organize into a blog when only realize that they have been a long time have not landed csdn. Last time I wrote a blog, I was learning Java EE, what I really like, want to do what I feel confused. Time is fleeting, flash two months past, looking at the previous blog only to find that they have not written Java code for a long while. This two months, from Java to the front-end to PHP back to the front, although all just learned some fur, but finally let me find their love, even though everyone is saying that the front end such a bad, but I decided to unswervingly go down, so the blog moved to the garden, this is a great start!

Well, this blog is not meant to talk about ideals, blog Park is the most attractive to me is the style of the individual blog can be defined by their own, want to be a front-end I will naturally not miss this practiced hand opportunity. Click Manage to enter the background interface, find the settings, found a text box with custom CSS, check the Disable default, back to the home page, the effect is like this

A look at this page there is a desire to layout the impulse there is no! At this time the HTML code of the Web page to sublime, simple analysis of the structure, in the head tag chain a new CSS file can be started

Naming specifications, comments in place, there is nothing more refreshing than to see this code, here I did the code folding, you can see the page by #home package, upper and lower layout, expand the code is too cumbersome, I will not each, roughly:

#header (head) divided into #blogtitle (blog name) and #navigator (navigation)

#main (middle) divided into #maincontent (content area) and #sidebar (sidebar)

#footer (footer) as part of the copyright notice

First on a I redefine the style after the (time-end tense, plus my blog just opened also no one to see, on the map of their own le Ah, there is no bootstrap, also did not consider the mobile display effect, just took the phone to try, or a bit miserable ... OK, heavy on the train of thought):

In order to ensure the normal transfer of background data, the above HTML code blog Garden is not allowed to change, which in the time of writing CSS code will bring some inconvenience, here are a few of my coding process encountered problems:

First, the original HTML code, the name of the blog in the navigation above, if I want to let the navigation on the name display, if you can change the HTML, just adjust the order of the two parts of the code and then slightly modified, but the HTML can not be modified, which I have not encountered before, fortunately, using some of the positioning of knowledge can be solved The method is to set relative positioning for their public parent box #header, and then to position the #blogtitle and #navigator respectively.

Second, the previous page is to use the local image, and then the entire folder to the personal site, this time to prepare the picture how to quote it? This problem is actually easy to solve, because the CSS URL can be cited from the network link, in order to prevent the chain failure, here I choose is to upload the selected pictures to their blog Park album, into the album to find uploaded images, view the image link to get the URL.

Third, or pictures, this time to say the size of the picture, first of all, our own selection of pictures are often relatively large (hundreds of k or even on M), increase the flow and reduce the speed, is not a wise choice, but the use of other pictures and difficult to wish, then we need to pick a good picture compression, Baidu a compression will have a lot of and is on-line compression, do not download what software, here I use is the figure good fast http://www.tuhaokuai.com/(now search, there is no advertising problem) My two pictures are pressed to 50k (select compression 30%) about to put up, and secondly, The sled dog background I used above is not scrolling with the scroll bar, it looks quite magical, actually used a property like background attachment:fixed, speaking of background, The original intention of the blog Park is to send an article about Background-size, finish this article and then organize the article.

Four, the content area mask design , also I think the most interesting point. In general, we will set the mask in the need to set the container to add a div.mask, set the background color, transparency what what, but this time, the HTML code can not be changed, how to do? Fortunately, CSS has provided the before, after selector, in my page specific use is like this

#main {position:relative;min-height:1200px;/*border:2px solid Red;*//*background:url ("banner.jpg") no-repeat;*/ Background:url ("http://images.cnblogs.com/cnblogs_com/iny7/775666/o_banner.jpg") no-repeat; background-attachment:fixed;background-size:cover;overflow:hidden;z-index:0;}

　　

#main: after{position:absolute;content: "Top:0;width:100%;height:100%;background-color: #ccc; opacity:0.9; Z-index: -1;/*ie*/filter:alpha (opacity=0.9);}

Set relative positioning for #main layers that need to add masks, and add an after pseudo-class, set absolute positioning, width 100%, background color transparency, and so on. The most critical is the two z-index. Why do you write like this? Here's the question:

First of all, not set the Mask #main layer (in order to make the long blog can be normal display, that is, the right side of the self-adaptation, the #main inside the left and right of the two areas I used to absolute, floating two-column layout)

In order to facilitate the explanation, here will be temporarily replaced by red border, it is easy to see that our content display has seriously received the influence of the dog head, but I really like this picture, how to do? It's a masked version! Using the method just proposed, do not set two z-index, we look at the effect:

This...... It's not the same as the deal! Although cover the dog head, but the text also covered, as if the Royal Park of the sky as pitch, not what I want, why so? To review the elements with Chrome.

Originally, this after selector is appended with the "element of this selector" instead of <div id= "main" > This line, and in this case, because the browser renders according to the order of the HTML, the rendered mask will naturally obscure the rendered content. In this case, using the before selector to add the mask to the front of the #main layer of content is not OK? Just do it, change it to before after the effect is like this

Strange phenomenon occurred, the left side of the absolute positioning of the sidebar to be shown, but the right floating positioning content area is still shrouded in haze, that is to say: absolute positioning of the mask layer is not covered by the subsequent floating positioning content layer, in order to prove this conjecture, The positioning method of the content area is changed from right floating to absolute positioning and relative positioning, the result is as follows:

Absolute positioning:

You can see the absolute positioning, the HTML code than the mask layer on the back of the #maincontent as desired display, and because the #sidebar more back, so the #sidebar border is pressed above the #maincontent (after testing, Changing their HTML code order will make the red color above the blue, which is no longer explained here.

Relative positioning:

And the above is the same, the HTML in the back of the div will be displayed on the upper

In addition, I have done several experiments, summed up is: do not consider Z-index case, has been set relative positioning in the parent box, the absolute positioning and relative positioning of the sub-box will be displayed in the floating positioning and standard document flow in the box above, The order of display between absolute and relatively positioned boxes is determined by the order in which they appear in the HTML document, and the more late the display of the box shows, the more the experiment has deepened my understanding of some theories that I did not fully understand when I studied CSS positioning. For example: Absolute positioning is out of standard document flow, relative positioning and floating is still within the document flow (will affect other elements)

With the support of the theory, and then back to the question just shown: to make the content area of the floating positioning appear on the relative positioning mask layer, only need to add relative positioning on the basis of floating, the effect is as follows

But this method adds additional positioning, adds code, and if we want to add one or more floating elements to the project, should we set relative positioning for each one? Since this question comes from the mask layer, is there any way to make all the other boxes appear properly by modifying the mask layer code once and for all? The answer is that the method comes from just the phrase " do not consider Z-index", first restores the code to the left absolute right floating, The display effect is:

We know that the z-index can only be used on elements that are set (relative absolute fixed) and not work for only floating maincontent, so this time from the z-index of the mask

The first step, the Z-index assignment for the parent element #main, here I give 0, the goal of this step is to make his child elements of the z-index regardless of how much is set to be displayed in the parent element (Z-index the principle of a lot of reference, here no longer repeat)

The second step is to set the z-index of the Mask layer to 1 (the value is small enough to have all the child elements above him without altering the other elements Z-index)

To see the final:

Because the mask layer is "pressed" to the bottom, so no three positioning elements can also be displayed on top of it!

Interested in this style of students can be downloaded to my GitHub, want to write their own style of the students can also be from the previous version of the original layout decoration or in the following message to find me get the code, you can

Https://github.com/iny7/Front-end/tree/master/cnblog

If it works for you, please give me a star yo ^_^.

Some questions about writing styles for your own garden