It took some time to look at CSS and personalize this new blog. Fortunately, here we use a blog system with csdn, saving a lot of trouble.

Here, I wrote my blog on yesky (which has been deprecated) Personalized setting experience, limited energy, just the results of finding materials for one night, please do not laugh.

Now, it seems to be quite satisfactory. In the future, the preparation is being decided. The background may be added to a title image, and an available counter and Google will be added, it is also possible to add Google ads-the code can be inserted here is really good, give people enthusiasm-if you can provide a "Photo Album", support Connecting External images, then upload the image to provide support for SWF files.

You can open the source file on the page to view the address of the called CSS file. The default CSS file called from the system is shown here. The personalized CSS section is here: blog.yesky.com/blog/username /customcss.aspx. you can open it with the compiler. Of course, the dedicated software is better.

I am using the cogitation style. Here I will make the following annotations for this file-I am also buying it now, because it may still be used in the future, and I don't want to waste my three hours just now, so here is a simple annotation.

... Found that the "insert code" function is not useful-or I still don't use it-and no help ..... No joy .....

// The body may be the subject content. -- Not Sure.
Body {
Font-size: 12px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
Margin: 0px;
Word-break: Break-all;
}
// -- Uncertain

TD
{
Font-size: 12px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
}
// Indicates hyperjoin text attributes.

A: visited,
A: active,
A: link {
Color: Navy;
Text-Decoration: none;
}

A: hover {
Text-Decoration: underline;
}
// H1, H2, H3, H4, H5 font size, and hyperlink effect definition of these font sizes.

H1 {
Margin: 0px;
Margin-top: 10px;
Margin-bottom: 5px;
Font-size: 18px;
}

H1 A: visited,
H1 A: active,
H1 A: link {
Color: #000;
}

H1 A: hover {
Color: # 47f;
Text-Decoration: none;
}

H2 {
Margin-top: 10px;
Margin-bottom: 3px;
Font-size: 13px;
}

H3 {
Font-size: 12px;
}

H5 {
Margin: 0px;
Padding: 0px;
}
// -- Not sure what text is defined

P {
Margin: 10px 0px;
}
Copyright definition at the bottom of the page

# Authors ul {
List-style: none;
Padding: 0px;
Margin: 0px 5px;
}
// Definitions of news items on the left

Div. News
{
Font-size: 11px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
Padding: 5px;
Padding-left: 10px;
}
-- The things on the top do not know the specific meaning.

. Headertitle
{
Font-size: 1.5em;
Margin: 0px;
}
// It refers to the definition of "Dragon grows up"

. Headertitles
{
Padding-top: 10px;
Padding-left: 10px;
Padding-Right: 10px;
Padding-bottom: 10px;
Width: 100%;
}

. Headertitles A: visited,
. Headertitles A: active,
. Headertitles A: link,
. Headertitles A: hover
{
Color: white;
Text-Decoration: none;
Font-size: 18px;
Font-weight: normal;
}
// It should be the aggregation on the top and the management part.

. Headerbar
{
Font-weight: normal;
Font-size: 11px;
Border-collapse: collapse;
Background-image: URL (images/bluetabback.gif );
Background-repeat: Repeat-X;
}

. Headerbar A: visited,
. Headerbar A: active,
. Headerbar A: Link
{
Color: whitesmoke;
Text-Decoration: none;
Font-weight: normal;
}
-- Unknown

. Headerbartab
{
Background-image: URL (images/bluetabface.gif );
Background-repeat: Repeat-X;
Border-collapse: collapse;
Padding: 0px;
}
// That is the top statistics, the one on the right

. Blogstatsbar
{
Text-align: right;
Font-weight: normal;
Font-size: 11px;
Color: Silver;
Border-collapse: collapse;
}
// Date, which is under each post

P. Date IMG {
Vertical-align: middle;
}

P. Date {
Font-size: 11px;
Font-weight: bold;
Margin-bottom: 0px;
Padding-top: 2px;
Padding-Right: 0px;
Padding-bottom: 4px;
Text-align: right;
}
-- Unknown

BLOCKQUOTE {
Font-style: italic;
}
// As the name implies, the question link of each post

Div. posttitle A: visited,
Div. posttitle A: active,
Div. posttitle A: Link
{
Color: Navy;
Text-Decoration: none;
}
// The style of each post box

Div. Post
{
Border-Right: gainsboro 2px solid;
Border-top: gainsboro 2px solid;
Border-left: gainsboro 2px solid;
Border-bottom: gainsboro 2px solid;
}
// Post Question Style

Div. posttitle
{
Padding-left: 3px;
Font-weight: bolder;
Font-size: 13px;
Padding-bottom: 3px;
Padding-top: 3px;
Border-bottom: gainsboro 1px solid;
Background-color: whitesmoke;
}
// Text attributes of each article and reply content

Div. posttext
{
Padding-Right: 10px;
Padding-left: 3px;
Font-size: 13px;
Padding-bottom: 5px;
Padding-top: 10px;
}
// The style of the small box at the bottom of the post

Div. postfoot
{
Background-color: whitesmoke;
Border-top: gainsboro 1px solid;
Font-size: 11px;
Padding-Right: 3px;
Padding-left: 3px;
Padding-bottom: 1px;
Padding-top: 1px;
Text-align: right;
}
// The top style, the dark blue image Style

# Top
{
Background-image: URL (images/bluetabbackground.gif );
Background-repeat: Repeat;
Color: whitesmoke;
Border-top: 4px solid black;
Border-bottom: 4px solid black;
Padding: 0px;
Margin: 0px;
}
// It should be the middle line of management or something-uncertain

# Tagline {
Font-size: 16px;
Margin: 0px;
Color: white;
}
// The menu on the left and corresponding H, the definition of the link

# Leftmenu {
Position: absolute;
Left: 0px;
Width: 180px;
Height: auto;
Background-color: whitesmoke;
Padding-top: 0px;
}

# Leftmenu H3 {
Font-size: 11px;
Margin: 0px;
Margin-top: 10px;
Padding-bottom: 2px;
Padding-left: 3px;
Border-top: solid 1px gainsboro;
}

# Leftmenu ul {
List-style: none;
Margin: 0px;
Padding-left: 5px;
Margin-left: 5px;
Margin-bottom: 10px;
Font-size: 11px;
}

# Leftmenu
{
Padding: 1px;
Text-Decoration: none;
}

# Leftmenu A: active,
# Leftmenu A: visited,
# Leftmenu A: Link
{}

# Leftmenu A: hover
{
Font-style: italic;
}
// Definition of the right body

# Main {
Margin-left: 180px;
Background-color: white;
Padding: 10px;
Border-left: 1px solid #555;
Border-bottom: 4px solid black;
}

# Footer {
Margin: 0px;
Padding-top: 5px;
Text-align: center;
Font-size: 10px;
}
// Definition of the reply box

# Commentform
{
Font-size: 11px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
}

Input, textarea
{
Font-size: 11px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
}

. Commentform
{
Font-size: 11px;
Font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
}

. Button
{
Border: 1px solid steelblue;
Background-color: gainsboro;
}
// The calendar Definition

. Cal
{
Border: 1px solid #186aa2;
Width: 100%;
Font-family: Arial;
Font-size: 12px;
Margin-top: 0px;
Margin-bottom: 10px;
Height: 180px;
Background-color: whitesmoke;
Padding: 0px;

}

. Caltitle
{
Background-color: #014e82;
Border-color: # ADF;
Font-family: Arial;
Font-size: 13px;
Font-weight: normal;
Color: #000;
Margin-left: 0px;
Padding: 0px;
Height: 100%;

}

. Calothermonthday
{
Color: #808080;
 
}

. Calselector
{
 
}

. Calnextprev
{
 
}

. Caldayheader
{
Background-color: #186aa2;
Color: #000;
 
}

. Calselectedday
{
 
}

. Calweekendday
{
 
}

. Caltodayday
{
/* Background-color: # 93c49c ;*/
Color: red;
}

Google can find a lot of tutorials on CSS, I see here: http://www.hongen.com/pc/homepage/css/css0101.htm
Here we mainly use the CSS attributes, because only after knowing each ":" Can we fill in something, can be customized-do not talk about it with a dedicated editor, huh, huh. Naturally, you can also use some advanced content to make more mysterious results-you have seen some of the experts in this field .....

For more information about weather forecasts, such as counters, search, online, and Google. Because csdn and here use the same blog system, and started earlier, it is also the place where programming experts live in the group (haha, you can only think so), so, it is recommended that you use site: csdn.com to search for Google, which is more convenient. Some people have summarized many personalized blog-based methods.

Q: Can you tell me how to do the weather forecast?
A: <br>
<B> & nbsp today's weather </B>
<Br>
<Center>
<IFRAME width = 157 Height = 240 frameborder = 0 scrolling = No src = 'HTTP: // appnews.qq.com/cgi-bin/news_qq_search? City = '> </iframe>
</Center>
<Br>

The Code is as above. You can also directly display your city, but you need to change the city code. I still don't know the city code, so the Default Knowledge is Shenzhen.