10 minutes with html,css let the blog garden become tall

have been very fond of the theme of the blog Park: Coffee, but look at a long time, the total feeling is too much unnecessary things, so I tidied up the next, record as follows:
Open management, you can see the blog Park can be very convenient to freely customize HTML and CSS drip, really intimate! Using tools: Firefox+firebug1. Add a sub-title "It's great for me to write comments like this,": 2.coffee theme all Unified as a kind of yellow, see more is too monotonous: Customize CSS code through the page for Exchange! Because I just coffee on the small change, so this still must be unchecked. Open Firebug Find the title of the background map address, and then change it to you like, I replaced the Baidu homepage star theme, "The picture address is Baidu, absolutely will not hang haha, wit me" at the same time the body background color also with pure yellow deepened.

Body{Color:#000;background:url (' http://7.su.bdimg.com/skin/85.jpg?2 ') left top;/*pure yellow background and deep*/font-family:Verdana,arial,helvetica,sans-serif;font-size:9pt;Min-height:80%;Line-height:1.5;}#header{background:url (' http://4.su.bdimg.com/skin/12.jpg?2 ') right top no-repeat;/*Baidu Home Sky*/Height:178px;}#blogTitle{Height:178px;Clear:both;background:url (' http://4.su.bdimg.com/skin/12.jpg?2 ') no-repeat;}

3. There is a more link in the right common link is useless, remove; The same search inside Google in the domestic is useless, remove; [PS: These are used Firebug hit to find the corresponding label and then operate the drip, so you just use Firebug, quickly find the label you want, DIY it]

#itemListLink {display:none!important;} #widget_my_google {display:none!important;}

4. On the right side sidebar if you add too much text, will appear miscellaneous, if removed, it will appear that a piece of pure yellow is dazzling, try to change the background, found the above word is very difficult to see, or pure yellow good, so you want to add image up, preferably dynamic, a station do not load too many resources, so decided not to use the dynamic picture, So I saw the following artifact! This can do some image, in fact, he called the sidebar announcement, but as long as you write in the HTML definition to absolute position, you can put things anywhere in the page, sowith HTML and CSS, you can do a lot of things ."Sign,js also want to apply for permission ..." then use CSS to make a cool dynamic image. The treasure of the town stationBar, haha!

<svgViewBox= "0 0"width= " the"Height= " the">  <CircleCX= "a"Cy= "a"R= " the" />  <gTransform= "Matrix (0.866, -0.5, 0.25, 0.433, +)">    <PathD= "M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70z"Fill=green>      <AnimatetransformAttributeName= "Transform"type= "Rotate" from= "0 0" to= "0 0 0"dur= "1s"RepeatCount= "Indefinite" />    </Path>  </g>  <PathD= "M 50,0 A 50,50 0 0,0-50,0z"Transform= "Matrix (0.866, -0.5, 0.5, 0.866, +)" /></svg>

can be arbitrary to write HTML, then after the title to add a previous practice of writing CSS Ball, playing under the next, a flash of a good mystery, there is Wood "but only Firefox can show ..." in the HTML add:

<class= "Three_ball"></div>

Add in CSS:

. Three_ball{width:15px;Height:15px;background:Rgba (0,0,0,0);Border-radius:50%;margin:100px Auto;position:Absolute; Left:25px;Top:25px;Animation:three_ball 3s ease-in-out infinite;}@keyframes Three_ball{0% {Box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px-15px 0 0 #ff0;}8%{Box-shadow:15px-15px 0 0 #fff, -15px 15px 0 0 #fff, -15px-15px 0 0 #f0f;}17%{Box-shadow:15px-15px 0 0 #fff, 15px 15px 0 0 #fff, -15px-15px 0 0 #0ff;}25%{Box-shadow:15px-15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #f00;}33%{Box-shadow:-15px-15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}42%{Box-shadow:-15px-15px 0 0 #fff, 15px-15px 0 0 #fff, -15px 15px 0 0 #ff0;}50%{Box-shadow:-15px-15px 0 0 #fff, 15px-15px 0 0 #fff, 15px 15px 0 0 #fff;}58%{Box-shadow:-15px 15px 0 0 #fff, 15px-15px 0 0 #fff, 15px 15px 0 0 #f00;}67%{Box-shadow:-15px 15px 0 0 #fff, -15px-15px 0 0 #fff, 15px 15px 0 0 #00f;}75%{Box-shadow:-15px 15px 0 0 #fff, -15px-15px 0 0 #fff, 15px-15px 0 0 #f0f;}83%{Box-shadow:15px 15px 0 0 #fff, -15px-15px #fff 0 0, 15px-15px 0 0 #ff0;}92%{Box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px-15px 0 0 #0ff;}100%{Box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px-15px 0 0 #f00;}}

5. Don't forget to dot the top and bottom of the page:

<align= "center">It's not the WHO is underneath, it's what's it Ines you</p><align= "center"  >Brick Walls is there for a reason:they let us prove how badly we want things</p& gt;

At last:

Tip: Learn to always put the CSS inside the ID and class with what mark wrong, in fact, you just want to ID # has a vertical stroke, so you can definitely remember it every time you use it! When just learning CSS, just like this little guy to feel that he will fly up ....

10 minutes with html,css let the blog garden become tall