QQ秀DIY:亲自打造你的QQ专属形象
第一步:准备工作
第二步:基本结构
QQ秀代码由以下几个部分组成:
第三步:头部创建
头部是QQ秀的核心元素,代码如下:
```
#main {
position: absolute;
width: 200px;
height: 200px;
background: #fff;
}
.head {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: #f00;
}
```
第四步:眼睛创建
添加眼睛,让QQ秀变得灵动:
```
.eyes {
position: absolute;
top: 20px;
left: 40px;
width: 20px;
height: 20px;
background: #000;
}
```
第五步:嘴巴创建
让QQ秀开口说话:
```
.mouth {
position: absolute;
top: 60px;
left: 50px;
width: 50px;
height: 20px;
background: #ff0;
}
```
第六步:添加状态
为QQ秀添加不同的状态,使其更具交互性:
```
.head.happy {
background: #0f0;
}
.mouth.happy {
background: #0ff;
}
```
第七步:保存代码
保存“.qss”文件,并将其上传到QQ秀编辑器中。
小贴士: