10-minute HTML + CSS to make your blog grow taller, 10-minute HTML skills

Using HTML & CSS in 10 minutes makes the blog garden grow taller and HTML in 10 minutes

I have always liked the topic of the blog Park: coffee. But after reading it for a long time, I still feel that there are too many unnecessary things, so I sorted them out and recorded them as follows:
Open management, we can see that the blog Park can easily customize html and css drops, it is really considerate! Tools used:Firefox + firebug1. add a sub-title. [This is really good for me to write comments.]: 2. coffee themes are all in a yellow color. It is too monotonous when you look at them too much: use custom CSS code on the page for replacement! Because I only make minor changes on coffee, I still have to leave this check box unselected. Open firebug, find the background image address of the title, and replace it with your favorite. I will replace it with the star topic on the Baidu homepage. [The image address is from Baidu and will never be hung up. Haha, wit me] At the same time, the background color of the body is deepened with pure yellow.

Body {color: #000; background: url ('HTTP: // 7.su.bdimg.com/skin/85.jpg? 2 ') left top;/* plain yellow background deepen */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 homepage star */height: 178px;} # blogTitle {height: 178px; clear: both; background: url ('HTTP: // 4.su.bdimg.com/skin/12.jpg? 2 ') no-repeat ;}

3. it is useless to remove more links in the commonly used links on the right. google in the same search is useless in China. Remove it. [PS: these are all hit by the firebug to find the corresponding tag and then operate on the drop, so you just need to use firebug to quickly find the tag you want, DIY it]

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

4. if too much text is added to the sidebar on the right, it will appear complicated. If it is removed, it will appear that piece of plain yellow is very dazzling. I tried to change the background, it is hard to see the above words, but it is still pure yellow, so I want to add some images, preferably dynamic, a station should not load too many resources, so I decided not to use dynamic images, so we can see the following artifact! This can be used as an image. In fact, it is called a sidebar announcement, but as long as the HTML in it is defined as an absolute position, you can place things anywhere on the page, so with HTML and CSS, you can do a lot of things. [sign, JS also needs to apply for permissions... you can use CSS to create a cool dynamic image.Zhenzhan BaoHaha!

<svg viewBox="0 0 160 160" width="160" height="160">  <circle  cx="80" cy="80" r="50" />  <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">    <path d="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>      <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />    </path>  </g>  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" /></svg>

 

You can write HTML at will, so you can add a small ball behind the title that used to write CSS exercises. It looks mysterious to flash it, you can only display it in FireFox ......] Add:

<div class="three_ball"></div>

Add the following content to 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. Do not forget to add the following content to the top and end of the page:

<p align="center">It's not who you are underneath, it's what you do that defines you</p><p align="center">Brick walls are there for a reason :they let us prove how badly we want things</p>

Finally:

TIPS: I keep remembering the id and class in css when learning. In fact, you only need to think aboutId is # all have a vertical strokeIn this way, you can definitely remember every time you use it!

When I first learned CSS, I felt like this little guy that I could fly ............

The html countdown Code takes 10 minutes.

This is easy to use. You can try it. If you have other requirements, you can ask.
<HTML>
<HEAD>
<Script language = "JavaScript" type = "text/javascript">
<! --
Var c = 60*10 // 10 minutes
Var t
Function timedCount ()
{
Document. getElementById ('timer'). value = c
C = C-1
T = setTimeout ("timedCount ()", 1000)
}
// -->
</Script>
</HEAD>
<Body onload = "timedCount ();">
Remaining Time (seconds): <input id = "timer" type = "text" value = "100"/>
</Body>
</HTML>