Hacking QQ空间

写在前头


  QQ空间支持DIV+CSS,因此我们可以将诸多的CSS置入QQ空间之中。今天这个,我们的目标效果是这样的:

也就是说有个背景图片,然后加上字体阴影效果。

Hacking QQ空间_第1张图片

首先像往常一样,敲入日志,当然了,你也可以用以前的日志做实验。然后点QQ日志编辑上面的高级功能,出现如下图:

 

Hacking QQ空间_第2张图片

 再点击,HTML进入HTML编辑模式,如图所示:

Hacking QQ空间_第3张图片

 我们看到的是网页的代码,这也就是我们平时所见的网页了。


第一步:阴影效果
如这些文字所示,这就是我们看到的阴影效果的示例了

首先进入HTML编辑模式,在需要加阴影效果的文字前面加入这段代码:

font-size:16pt;color: #f00;text-shadow: 3px 3px 7px #111;text-align: center; "> 

在结束的文字块后面加上

因此我们就可以得到我们想要的阴影效果了。

       
        color,为字体颜色,font-size就是字体大小了,text-align对齐方式:居中。
        text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

示例一:

text-shadow: -1px 2px 3px #ffb69a;

       表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a,
这段文字就表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a
         示例二: 
         font-size :   2em ;    
       font-weight :   bold ;           
          color :   #777 ;  
           text-shadow   :       1px       1px       1px       #222   ;      
      
     表示X轴方向阴影向左2px,Y轴方向阴影向下2px,而阴影模糊半径2px,颜色为 #222,
示例文字: text-shadow: 2px 2px 2px #222

至于颜色什么的,如果有photoshop可以直接用PS选取了,或者打开这个网站: http://html-color-codes.info/chinese/ 直接选取里面的颜色获取里面的值,再敲入里面,替换掉。也可以采取RGB模式:

text-shadow: rgb(20, 24, 42) 6px 6px 7px;
      示例三 text-shadow: rgb(20, 24, 42) 6px 6px 7px;
       
    color: #fff; text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);


第二步:使用图片
Hacking QQ空间_第4张图片
如果我们在QQ日志中插入图片,比如右边的这张图片:http://b204.photo.store.qq.com/http_imgload.cgi?/rurl4_b=21826dd37028d77a6e12b2792df94a1945dfb8fdd006a32161361ab40baec044565e97771e9577fd63585349fec125a5970a2f61e0f1bfa91447c7a1d10dfbad7b3281132847cf2872f8d14d6361843fa516f553&a=204&b=20" style="width: 398px; height: 530px;"
这个是图片的地址和基本的属性,宽:398px;高:530px;
其次我们要做的是同第一步类似的作法也就是添加DIV。而在这之前我们要讲讲关于网页上面的z-index:也就是Z坐标。网页上有个层的概念也就是z-index了。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。这就我们用来解决背景图片的方法了。
z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。

将以下代码加入图片的地址之中
就是右边的图片的方式了。其次我们再构造一个新的层。而这一个层要加入我们的文字之中。
示例:
Power By Phodal
Power By Phodal
Hacking QQ空间_第5张图片
代码就如下所示:
Power By Phodal
Power By Phodal
  图片

         第一个DIV就是文字的信息我们可以看到他和图片的主要区别是z-index:99;还有的话,文字的代码应该是在图片之前,这种解决方案比较简单。然后再添加个position:relative;也就是它的位置是相对于图片的位置的,也可以用absolute但是是绝对固定的。然后top:200px;就是相对于图片来说由上往下说的,bottom:200px;是由以往上的,还有的话,还有left、right等等。再加上width、height这些属性来控制图片中的文字。

        当然这只是其中的一些技术,主要还是利用空间日志的HTML编辑模式。还有其它许多的,需要的可以和我交流。
So,enjoy it!
(PS:我是个Geek,不是个Hacker,Hack作标题是出于一种习惯)
写在前头


  QQ空间支持DIV+CSS,因此我们可以将诸多的CSS置入QQ空间之中。今天这个,我们的目标效果是这样的:

也就是说有个背景图片,然后加上字体阴影效果。

Hacking QQ空间_第6张图片

首先像往常一样,敲入日志,当然了,你也可以用以前的日志做实验。然后点QQ日志编辑上面的高级功能,出现如下图:

 

Hacking QQ空间_第7张图片

 再点击,HTML进入HTML编辑模式,如图所示:

Hacking QQ空间_第8张图片

 我们看到的是网页的代码,这也就是我们平时所见的网页了。


第一步:阴影效果
如这些文字所示,这就是我们看到的阴影效果的示例了

首先进入HTML编辑模式,在需要加阴影效果的文字前面加入这段代码:

font-size:16pt;color: #f00;text-shadow: 3px 3px 7px #111;text-align: center; "> 

在结束的文字块后面加上

因此我们就可以得到我们想要的阴影效果了。

       
        color,为字体颜色,font-size就是字体大小了,text-align对齐方式:居中。
        text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

示例一:

text-shadow: -1px 2px 3px #ffb69a;

       表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a,
这段文字就表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a
         示例二: 
         font-size :   2em ;    
       font-weight :   bold ;           
          color :   #777 ;  
           text-shadow   :       1px       1px       1px       #222   ;      
      
     表示X轴方向阴影向左2px,Y轴方向阴影向下2px,而阴影模糊半径2px,颜色为 #222,
示例文字: text-shadow: 2px 2px 2px #222

至于颜色什么的,如果有photoshop可以直接用PS选取了,或者打开这个网站: http://html-color-codes.info/chinese/ 直接选取里面的颜色获取里面的值,再敲入里面,替换掉。也可以采取RGB模式:

text-shadow: rgb(20, 24, 42) 6px 6px 7px;
      示例三 text-shadow: rgb(20, 24, 42) 6px 6px 7px;
       
    color: #fff; text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);


第二步:使用图片
Hacking QQ空间_第9张图片
如果我们在QQ日志中插入图片,比如右边的这张图片:http://b204.photo.store.qq.com/http_imgload.cgi?/rurl4_b=21826dd37028d77a6e12b2792df94a1945dfb8fdd006a32161361ab40baec044565e97771e9577fd63585349fec125a5970a2f61e0f1bfa91447c7a1d10dfbad7b3281132847cf2872f8d14d6361843fa516f553&a=204&b=20" style="width: 398px; height: 530px;"
这个是图片的地址和基本的属性,宽:398px;高:530px;
其次我们要做的是同第一步类似的作法也就是添加DIV。而在这之前我们要讲讲关于网页上面的z-index:也就是Z坐标。网页上有个层的概念也就是z-index了。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。这就我们用来解决背景图片的方法了。
z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。

将以下代码加入图片的地址之中
就是右边的图片的方式了。其次我们再构造一个新的层。而这一个层要加入我们的文字之中。
示例:
Power By Phodal
Power By Phodal
Hacking QQ空间_第10张图片
代码就如下所示:
Power By Phodal
Power By Phodal
  图片

         第一个DIV就是文字的信息我们可以看到他和图片的主要区别是z-index:99;还有的话,文字的代码应该是在图片之前,这种解决方案比较简单。然后再添加个position:relative;也就是它的位置是相对于图片的位置的,也可以用absolute但是是绝对固定的。然后top:200px;就是相对于图片来说由上往下说的,bottom:200px;是由以往上的,还有的话,还有left、right等等。再加上width、height这些属性来控制图片中的文字。

        当然这只是其中的一些技术,主要还是利用空间日志的HTML编辑模式。还有其它许多的,需要的可以和我交流。
So,enjoy it!
(PS:我是个Geek,不是个Hacker,Hack作标题是出于一种习惯)
事实证明CSDN的网站设计得很垃圾。

你可能感兴趣的:(Hacking QQ空间)