[Post] The most easy-to-understand CSS tutorial for Baidu Space

Although many experts have summarized this tutorial in the Baidu space bar, I think many of the tutorials are vague. At least I have encountered many questions that I cannot understand, I still need to experiment and explore it myself at 1.1 points. So I want to sort out some of my experiences and make some contributions for you to see. It is absolutely easy to understand and can be learned by fools ~~~

The content here is my experience in setting up my own space, so it is not complete, for example, I didn't introduce how to set the background color or image (because I don't like the background color or image, so I didn't study this ), I hope you will not give up on it.

How to modify CSS files:

After logging on to the console, choose Settings> template Settings> Custom template. A window is displayed, showing editable CSS.CodeFile. However, this is not the code of the template you are currently using, but the code of a Baidu default template, which cannot be selected. Baidu currently only provides this template for editing.

If you want to edit a template that you like, you need to copy the CSS code of the template first, then, replace the code that appears in the "Custom template". Then, you can edit the part you want to modify.

There are four options at the bottom of the window for editing CSS files: "save", "Save and apply", "cancel", and "preview". The differences between these options must be clarified, after each modification, you 'd better click "preview" to see if there are any errors and then "save". Instead of simply clicking "Save and apply" in the editing status, you should first save the changes, then preview the page again and make sure that there is no problem on each page. Then select "apply this template ".

To view your own or others' CSS code:

Open the space you want to view, click the right-hand key, and there will be an option "View Source File" in the menu. After clicking this option, a notepad file will pop up and "CSS" will be found in the file ", until the text "href ="/msnib/CSS/item/ed14a84473384f82b2b7dcb2.css ">" appears in this format (taking the space of msnib as an example ), then copy the "/CSS/item/ed14a84473384f82b2b7dcb2.css" section to the back of the spatial URL in the address bar, that is, "watermark. Generally, the text displayed in this method is non-branch and confusing. In this case, you can copy it to the Word document, which looks more organized.

Note: You can use this method to learn some code setting methods or find some resources you like, but it is best not to completely copy the results of others' work, setting a unique template is more fun ~~~

CSS content and setting methods of several main parts

Space background color/mouse setting area

To set a special mouse style, you must add the following to the first line of the code file:
A: hover {cursor: URL ('HTTP: // imgcache.qq.com/qzone/space_item/orig/11/187.ani ')}
Body {cursor: URL ('HTTP: // imgcache.qq.com/qzone/space_item/orig/11/1547.ani')} {background-color: # ffffff}

The link in the first line of brackets is the mouse state when the link is clicked. The link in the second line of brackets is the normal mouse state, the color code behind background-color in the second line refers to the background color of the entire space. The six-digit color code can be found here.

If you do not need to set a special mouse, this part only retains "body {background-color: # color code.

Space name/Title image setting area

# Header {Height: 300px; Background: URL (......)}
This is the main part of the space title bar. The text in {} is explained as follows:
"Height" refers to the height of the title bar, which must be the same as the height of the picture you placed in the title bar. The brackets behind it are the links of the picture to be the title, and the picture with a width of PX is more suitable, the image height can be determined based on your preferences.

# Header Div. LC {}
# Header Div. RC {}
If you want to place different images on the left and right sides of the title, add the left image link to the {} of the first line in the format of {Background: URL (......) No-repeat left }. Add the link of the right image to {} in the second line. Format: {Background: URL (......) No-repeat right }. Otherwise, you can leave it empty in.

# Header Div. Tit {top: 30px; left: 20px; line-Height: 22px; font-size: 30px; font-family:}
Here, we need to set the location of the space name (the number behind the top is the distance between the text and the upper boundary of the Space title bar, And the number behind the left is the distance from the left boundary ); font-size (the number behind font-size); font (the text behind font-family ).

# Header Div. Tit A. titlink {color: # ......; text-Decoration: None}
# Header Div. Tit A. titlink: visited {color: # ......; text-Decoration: None}
These two lines should be set the color of the space name text, but I don't know what the difference is between the two lines, so we can simply set them to the same. If you want to set the text to a bold or underline, change "text-Decoration:" followed by "NONE" to "bold" or "underline.

# Header Div. DESC {top: 60px; left: 20px; color: # ......; font-size: 13px}
This line is used to set the location, size, and font of the Space introduction (the line with the title below the space name). The setting method is the same as that of the space name.

# Tabline {top: Running PX; Background-color :#......}
This refers to the position and color of the separation line under the tab menu bar (Home Page/blog/album/friends/set that line), and the number behind the top refers to the distance between the split line and the upper boundary of the Space title bar, this number is determined based on the height of the title bar and the menu position (overlapped with the image or located below the image.

# Tab {top: 390px}
This refers to the position of the tab menu bar, And the number behind the top refers to the distance from the upper boundary of the Space title bar.

# Tab. on, # tab. on: Link, # tab. on: visited {margin-top: 2px; line-Height: 20px; Background-color :#......; color :#......; Font-size: 14px; font-weight: bold ;}
This line refers to the status, text position, background color, text color, font size, and so on after the tab menu is selected.

# Tab span {color: # f93a60; font-size: 14px}
This refers to the color and size of the separator (that is, the vertical line) in the middle of the tab menu.

# Tab A: link {color: # ......; text-Decoration: none; font-size: 14px}
This line indicates the status, text color, other definitions, and font size when the tab menu is not selected.

# Tab2 is the second tab menu bar under the tab menu (for example, the "basic options" and "template Settings" column under "Settings"). The setting method is the same as above.

. Stage {background-color :#......}
This is the background color/image settings of the Space content area (below the tab menu bar until the bottom of the Space). You can leave {} empty if you do not want to set it.

BlogArticleTitle/text setting area

# M_blog Div. Tit {font-size: 14px; font-weight: bold; line-Height: 50px; text-indent: 60px}
In the title bar settings of a blog post, the number behind line-height is used to define the height of the title bar, And the number behind text-indent is the distance from the title text to the right indent, if you do not need to indent, you can set it to 0. If you want to add a piece before the title of each article, you can add "Background: URL (image link) No-repeat" at the end ", then adjust the height of the title bar and the value of the text indent according to the size of the added image. All the cute animated emoticon icons in QQ can be used. Save them and upload them to the album of Baidu space.

# M_blog Div. Tit A {color: # ......; font-size: 14px; font-weight: bold}
Set the status of the blog article title link.

# M_blog Div. Tit A: visited {color: #047304}
Set the status after the blog post title is selected.

# M_blog Div. Date {margin: 5px 0 8px 0; color: #666666; text-align: right}
Set the date of a blog post. Margin refers to the distance from the title bar, and text-align refers to the position of the date (left to right or center ).

# M_blog Div. CNT {color: #666666; line-Height: 20px; font-size: 14px}
Blog article content settings: text color, line spacing, font size.

# M_blogs Div. More A {color: #047304; font-size: 14px}
"Read full text" link status settings.

# M_blog Div. More A: visited {color: #047304}
Set the status after the blog article title link is selected.

# M_blog Div. Opt {color: #047304; font-size: 12px}
Settings of the article operation area (such as editing and commenting.

# M_blog Div. Opt A {color: #047304; font-size: 12px}
Set the link status in the operation area of the article.

# M_blog Div. Opt A: visited {color: #047304}
The status of the selected link in the article operation area.

# M_blog Div. Line {margin-top: 10px; line-Height: 60px; Background: URL (image link) No-repeat Center}
Set the separation line between the article and the article. Margin-top refers to the distance between the separation line and the previous article, and line-height refers to the height of the separation line area, the position at the end of the separator line can be defined (no-repeat Center indicates not repeated, center, repeat-X indicates horizontal repetition ).

Music player settings

If you think that the default music player in the space is not good-looking, you can add this code at the end of the space to change the player size and color:

# Phx {filter: alpha (opacity = 60, finishopacity = 36, style = 0, startx = 20, starty = 40, finishx = 0, finishy = 0) Gray (); width: 225px; Height: 45px} This is my player code)

This code is a bit complicated. Let's take a look at what you can understand. Other code hasn't been explored yet:

Opacity = transparency. values between 0 and can be used. The lower the value, the higher the transparency. finishopacity = excessive transparency, that is, the transparency of the edge (I have not understood how to play it ); gray = color/style, can be set to default, gray, Xray, invert, etc., you can try it yourself; the number behind width indicates the width of the player, the number after height indicates the height of the playback bar.

How to Set A Separator

Between articles:
# M_blog Div. Line {margin-top: 10px; line-Height: 60px; Background: URL (image link) No-repeat Center}

Between comments:
# In_comment Div. Line {margin-top: 10px; line-Height: 50px; Background: URL (image link) No-repeat Center}

Separation line on friend page:
# M_friend Div. Line {margin-top: 17px; line-Height: 17px; Background: URL (image link) Repeat-x}

Separation line of the album page:
# M_albumlist Div. Line {margin-top: 17px; line-Height: 17px; Background: URL (image link) Repeat-x}

If you want to cancel the separation line, you can delete all the subsequent parts of "background ~~~

How to Set borders of modules in a space

The fourth part of the CSS Code (the Part prefixed with ". Mod") is used to set the status of each module in the space. I have never understood what it means before. I finally understood it today and explained it as follows:

Padding: This term is mentioned in almost every item. It indicates the distance between the text or image and the border in the specified area.

. Modbox: This line is used to set the position of the content of each module and the background color of the module. There is also a simple line border, such as none (no border) dotted (DOT border) dashed (broken line border) solid (Straight Line border) double (double line border) and so on.

For example, my settings :. modbox {padding: 10px 10px 0 10px; border-left: 1px solid # 9fa6ae; border-Right: 1px solid # 9fa6ae} indicates, the top, bottom, and left margins of the module are 10px, 0 10px, respectively. The left border is solid, the width is 1px, and the color is # 9fa6ae. The right border is solid, the width is 1px, and the color is # 9fa6ae. If you want to set the module background, add "background-color: # Six-color code" to the brackets ~~~~

To set complex border effects, you need to use the following parts:

. Modtl: Set the left corner of the upper border of the module
. MoDTC: Set the middle part of the upper border of the module
. Modtr: right corner of the upper border of the module
. Modbl: Set the left corner of the lower border of the module.
. Modbc: Specifies the middle part of the lower border of the module.
. Modbr: right corner of the lower border of the module
This part of settings can use a pattern. For example, I used this pattern on the top left of the border, the middle part, and the right side, after all the settings are complete, they are combined into a complete upper border. The specific settings are as follows:
. Modtl {Background: URL (http://hiphotos.baidu.com/grandma/pic/item/6e4c14d8609f513733fa1c8f.jpg) No-repeat top left}

Set the following items in sequence in the same way.

It would be interesting to design a pattern on your own. You can make a variety of distinctive borders. For example, if I am so stupid, I will only go online to find a ready-made border.

A new function is added to the space music player !!

Click "edit" in the music player on the homepage to see that only one song can be played in the past. Now, you can add links to five songs and play them cyclically, you can also select "show video box ". This new feature is really good !!!