css和h1-h6组成一个logo

先看一下效果:

使 believe
BUT 中间还是藏了一个 lie

源码:

<font style="LINE-HEIGHT: 1.3em" size="6"color="#c0c0c0">即</font> 
<font style="LINE-HEIGHT: 1.3em" size="3"color="#c0c0c0">使</font> 
<font style="LINE-HEIGHT: 1.3em"color="#e00000"size="5" face="impact">believe</font>,<br /> 
<font style="LINE-HEIGHT: 1.3em"face="黑体" size="6">BUT</font> 
<font style="LINE-HEIGHT: 1.3em"face="黑体">中间还是藏了一个</font> 
<font style="LINE-HEIGHT: 1.3em"face="Impact"size="5" color="#ffc0cb">lie</font>

h1-h6+css 实现以上效果:

<div class="bt"> 
<h1>Q</h1> 
<h4>C</h4> 
<h3>menglei.net</h3> 
<h5>清</h5> 
<h6>晨</h6> 
<h2>博客</h2> 
</div>
<style> 
.bt{ width:250px} 
.bt h1,h2,h3,h4,h5,h6{display:inline; line-height:1.3em} 
.bt h1{color:#c0c0c0; font-size:30px; font-weight:normal} 
.bt h4{color:#c0c0c0; font-size:18px; font-weight:normal;} 
.bt h3{color:#e00000; font-size:24px; font-family:Impact;font-weight:normal; margin-right:80px;} 
.bt h5{font-size:30px; font-family:黑体; font-weight:normal; padding-left:37px} 
.bt h6{font-size:25px; font-family:黑体; font-weight:normal} 
.bt h2{color:#ffc0cb; font-size:24px; font-family:Impact;font-weight:normal} 
</style>

效果如图

Q

C

menglei.net

博客