Page Custom CSS Code: page widening text wrap image zoom

First, the initial knowledge of the blog

First write a blog, in the settings to choose a favorite template

I fell in love at first sight! That minimalist style, I like!! However, after the application, but found that ...

Nani! The beautiful picture on the right side of the template?! I don't have anything at all. No picture is ugly ah, instant no love, set up to find the next,-"blog Sidebar Bulletin"-, here, put the Tickle 200px figure, good looking more immediately, or there is a picture will not be so monotonous ~

Ii. knowledge of CSS

After a few days, to write a blog, found a major problem, how the default width so narrow? Then I put the picture how to do, and, 2 side left so many blanks do not waste, leave a 5% is enough. So, began the 2 days of full toss.

Set up to find the next, found a page called custom CSS code of Things, school when learning the web design, but also a little impression, but how to use, er, it seems never really used ...

Another Google, did not find the page to widen the tutorial, hey, I just want to make the page a little wider ah, not much of the requirements of good felling? No way, ask for yourself. Check out a variety of tutorials and then F12 Tiger on Chrome and finally have a little bit of a harvest.

1. Since it is to be changed, it must be understood first. What is CSS? Open a Web page,ctrl+u (Chrome) to see the Source Code,

The CSS file has a # beginning ID selector, such as: #red {color:red;} , there is . The class selector at the beginning, such as:. Center {Text-align:center}; there are other. Learn more: http://www.w3school.com.cn/css/css_intro.asp

2. Dry and easy to get confused, the last picture to speak (picture is a chrome F12 See Debugging Interface)

, CSS is usually used in conjunction with a label called <div>,,<div></div> declares a chunk, usually <div id/class= "xxx"; The piece that is declared applies that style (attribute), and on the right side of the selection, you can see which file the style is from and what attributes it contains.

Tips: Click on properties to add/modify, and there will be a real-time effect, I'm just a little bit of a try, I have to say, Chrome is really very powerful.

Third, the modification process of the interface 1. Original:

, the width of the template is written dead to 1000 pixels, this causes the problem is large screen browser 2 side will leak a lot, and put pictures what is not convenient, is simply a waste of the page.

2. Width adjustment process

Start, by writing CSS rules in the settings to override the default settings, we let the width of the browser wide 95%,2 edge of each left a little, otherwise not good.

1 /*  */2{3    width: 95%4 }

Come on, Nani, what's going on right?

Looked at the original main below the child element MainContent was also written dead, 765 pixels wide

Change it, check the subordinate sex of the available values, decided to use a percentage, first write a 100% try, the results

The page becomes wider, and the text adapts itself to the line, but. I rub, where is my sidebar?! Pull down, the original ran down the ground ... That's not going to work. Later changed to 90%, 85%, because the side bar with a percentage will be pulled particularly ugly, and maincontent side width value can not be set to 100%-232px, so this problem has not been a good solution, can only be set to 80% and then in addition to the side of the column accounted for 200+16*2= 232px.

But it can cause two problems:

1. As the relative page 80% is set, the right sidebar is a fixed width, so the larger the screen resolution, the more empty on the right side of the sidebar. (The sidebar is left-aligned by default)

2. When the browser shrinks to a certain extent, the sidebar will still be squeezed to the bottom

By studying the layout of other people's blogs, and then setting the minimum width of the page to a certain extent solved the 2nd problem.

1 /*  */2{ min-width:}

After setting a value to ensure that the sidebar has not been squeezed to the bottom, the page appears with a horizontal scroll bar to solve the problem.

Later, by querying the CSS element syntax, I discovered a magical attribute called position. It solves the problem of coexistence between the main interface and the sidebar by specifying it.

1 /*The main interface width is automatic, 232 pixels are left on the right, and the parent element is the base for absolute positioning*/2 #mainContent{3 width:Auto;4 position:Absolute;5  Left:0px;6  Right:232px;7}8 /*side bar to the right*/9 #sideBar{float: Right}

3. Equal to Image Zoom

The above resolved to encounter a new problem, the picture how to zoom, the default maximum width of 1000px write dead, a beginning around a little way, after the change of max-width=100% also set the width: 100%; Let the picture can be filled with the parent element, but not only this year, and the browser resolution is very high (more than the original size of the picture), the picture will be more than magnification, so that caused distortion, it is difficult to see.

Originally I want to live first, but I think in the future may upload a large picture, you zoom point does not matter, but if put a small icon, you also to the year, that ... I can't even think about it.

Later I was on the internet to find how to make pictures only narrowed down, but different than the method of amplification, online a lot of CSS also have a lot of JS, look at all very troublesome, look at the head are big, tossing a night, woke up this morning after F12 various tune, get to find only set max-width: 100 %; You can achieve my needs.

1 /* make the picture smaller than the original size and not enlarge */ 2 #cnblogs_post_body img {3    max-width: 100%;  4 }

Also changed the width and height of the message column, so that the main interface with a little more.

Four, complete CSS source code

Finally, in the CSS code, there is a need to copy directly to your settings to paste and save a bit, pay attention to me is the same template Ah, otherwise there is no guarantee that there will be a problem.

1 /*less than 1024 pixels are no longer scaled horizontally to prevent the sidebar from being moved under the body, causing it to be too ugly, with position now removed*/2 #home{Min-width:1024px}3 /*the main interface and navigation bar are centered to display the 95% of the user's screen*/4 #main, #navigator{width:95%}5 /*The main interface width is automatic, 232 pixels are left on the right, and the parent element is the base for absolute positioning*/6 #mainContent{7 width:Auto;8 position:Absolute;9  Left:0px;Ten  Right:232px; One} A /*make the picture smaller than the original size and not enlarge*/ - #cnblogs_post_body img{ - Max-width:100%; the} - /*side bar to the right*/ - #sideBar{float: Right} -  + /*Message Board Width following parent element, height set to 200 pixels*/ - Div.commentform textarea{ + width:100%; A Height:200px; at} - /*because of the position:absolute of the MainContent, the property causes the display to have a problem, hiding the element*/ - #footer{Visibility:Hidden}

Page Custom CSS Code: page widening text wrap image zoom