![]()
![]()
![]()
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>个人星※空间</title>
6 <meta name="Keywords" content="关键字">
7 <meta name="Descript" content="描述">
8 <style>
9 *
10 {
11 margin: 0;
12 padding:0;
13 }
14 .dabeijing
15 {
16 width: 1024px;
17 background: url(images/大背景.jpg) 0 0 repeat-y;
18 margin: 0 auto;
19 }
20 .houtou
21 {
22 width: 948px;
23 height: 224px;
24 margin: 0 auto;
25 background: url(images/空间.jpg) ;
26 }
27 .zhengjianzhengti
28 {
29 width: 932px;
30 margin: 0 auto;
31 margin-top: 10px;
32 overflow: hidden;
33 }
34 .zuocezhengti
35 {
36 width: 227px;
37 float: left;
38 }
39 .yinyuedaren
40 {
41 width: 227px;
42 height: 350px;
43 background-color: #fed3a6;
44 overflow: hidden;
45 }
46 .outer
47 {
48 height: 44px;
49 background: url(images/zhongbu.jpg) 0 0 repeat;
50 }
51 .left
52 {
53 height: 44px;
54 background: url(images/left.jpg) left top no-repeat;
55 }
56 .right
57 {
58 height: 44px;
59 background: url(images/right.jpg) right top no-repeat;
60 }
61 .xiangyou
62 {
63 width: 22px;
64 height: 22px;
65 padding-left: 13px;
66 padding-top: 10px;
67 float: left;
68 }
69 .t1
70 {
71 font-family:宋体;
72 font-size: 14px;
73 color: #b41f25;
74 font-weight: bold;
75 margin-left: 6px;
76 text-align: center;
77 line-height: 44px;
78 float: left;
79 }
80 .nvren
81 {
82 width: 200px;
83 height: 200px;
84 background: url(images/女人.jpg);
85 margin: 0 auto;
86 }
87 .gerenziliao
88 {
89 width: 66px;
90 height: 24px;
91 background: url(images/个人资料.jpg) no-repeat;
92 margin-top: 8px;
93 margin-left: 10px;
94 float: left;
95 }
96 .jiaoyouziliao
97 {
98 width: 66px;
99 height: 24px;
100 background: url(images/交友资料.png) no-repeat;
101 margin:8px 5px 6px;
102 float: left;
103 }
104 .jiaweihaoyou
105 {
106 width: 66px;
107 height: 24px;
108 background: url(images/加为好友.png) no-repeat;
109 margin-top: 8px ;
110 margin-bottom: 6px;
111 float: left;
112 }
113 .toutayipiao
114 {
115 width: 66px;
116 height: 24px;
117 background: url(images/投他一票.jpg) no-repeat;
118 margin-top: 6px;
119 margin-left: 10px;
120 float: left;
121 }
122 .geitaliuyan
123 {
124 width: 66px;
125 height: 24px;
126 background: url(images/给他留言.jpg) no-repeat;
127 margin-top: 6px;
128 margin-left:5px;
129 float: left;
130 }
131 .songtakapian
132 {
133 width: 66px;
134 height: 24px;
135 background: url(images/送他卡片.jpg) no-repeat;
136 margin-top: 6px;
137 margin-left:5px;
138 float: left;
139 }
140 .zhong1
141 {
142 height: 25px;
143 width: 227px;
144 background: url(images/中1.jpg) 0 0 repeat;
145 margin-top: 13px;
146 float: left;
147 }
148 .zuo1
149 {
150 height: 25px;
151 background: url(images/下1.jpg) left top no-repeat ;
152 }
153 .you1
154 {
155 height: 25px;
156 background: url(images/右1.jpg) right top no-repeat;
157 }
158 .yinyuehe
159 {
160 width: 227px;
161 height: 350px;
162 background-color: #fed3a6;
163 margin-top: 13px;
164 overflow: hidden;
165 }
166 .more
167 {
168 font-family:宋体;
169 font-size: 14px;
170 color: #b41f25;
171 font-weight: bold;
172 margin-left: 89px;
173 text-align: center;
174 line-height: 44px;
175 float: left;
176 }
177 .gedan1
178 {
179 width: 55px;
180 height: 23px;
181 background: url(images/歌单一.jpg) no-repeat;
182 margin-left: 8px;
183 float: left;
184 }
185 .gedan2
186 {
187 width: 55px;
188 height: 23px;
189 background: url(images/歌单二.jpg) no-repeat;
190 margin-left: 5px;
191 float: left;
192 }
193 .gedan3
194 {
195 width: 55px;
196 height: 23px;
197 background: url(images/歌单三.jpg) no-repeat;
198 margin-left: 5px;
199 float: left;
200 }
201 .geming
202 {
203 margin-top: 20px;
204 font-family: "宋体";
205 font-size: 14px;
206 color: #020001;
207 height: 194px;
208 margin-left: 21px;
209 float: left;
210 }
211 .g1
212 {
213 float: left;
214 height: 22px;
215 line-height: 22px;
216 }
217 .g2
218 {
219 float: left;
220 height: 22px;
221 line-height: 22px;
222 }
223 .g3
224 {
225 float: left;
226 height: 22px;
227 line-height: 22px;
228 }
229 .g4
230 {
231 float: left;
232 height: 22px;
233 line-height: 22px;
234 }
235 .g5
236 {
237 float: left;
238 height: 22px;
239 line-height: 22px;
240 }
241 .g6
242 {
243 float: left;
244 height: 22px;
245 line-height: 22px;
246 }
247 .g7
248 {
249 float: left;
250 height: 22px;
251 line-height: 22px;
252 }
253 .g8
254 {
255 float: left;
256 height: 22px;
257 line-height: 22px;
258 }
259 .geming p
260 {
261 border-bottom-style: dotted;
262 width: 181px;
263
264 }
265 .erji
266 {
267 float: right;
268 padding-top: 8px;
269 }
270
271 .shitingquanbu
272 {
273
274 float: right;
275 padding-top: 9px;
276 font-family: "宋体";
277 font-size: 14px;
278 font-weight: bold;
279 color: #b41f25;
280 }
281 .houtui
282 {
283 width: 54px;
284 height: 24px;
285 background: url(images/后退.jpg) no-repeat;
286 margin-top: 8px;
287 margin-left: 20px;
288 float: left;
289 }
290 .ayi
291 {
292 /*width: 66px;
293 height: 24px;*/
294 margin-top: 8px;
295 margin-left: 32px;
296 font-size: 14px;
297 font-family: "宋体";
298 font-weight: bold;
299 color: #b21f25;
300 margin-left: 25px;
301 float: left;
302 }
303 .qianjin
304 {
305 width: 54px;
306 height: 24px;
307 background: url(images/前进.jpg) no-repeat;
308 margin-top: 8px;
309 margin-left: 25px;
310 float: left;
311 }
312 .zhong2
313 {
314 height: 25px;
315 width: 227px;
316 background: url(images/中1.jpg) 0 0 repeat;
317 margin-top: 44px;
318 float: left;
319 }
320 .jingjigongsi
321 {
322 margin-top: 13px;
323 }
324 .zhong3
325 {
326 height: 25px;
327 width: 227px;
328 background: url(images/中1.jpg) 0 0 repeat;
329 margin-top: 49px;
330 float: left;
331 }
332 .rili
333 {
334 margin-top: 16px;
335 height: 278px;
336
337 }
338 .more2
339 {
340 font-family:宋体;
341 font-size: 14px;
342 color: #b41f25;
343 font-weight: bold;
344 margin-left: 106px;
345 text-align: center;
346 line-height: 44px;
347 float: left;
348 }
349 .yuanjiao
350 {
351 border:6px solid #feba73;
352 height: 188px;
353 width: 193px;
354 border-radius: 0 0 6px 6px;/*设置圆角*/
355 border-top: 0;
356 margin-left: 11px;
357 }
358 .biaotou
359 {
360 font-family: "宋体";
361 font-size: 14px;
362 font-weight: bold;
363 color: #b31d26;
364 padding-top: 9px;
365 margin-left: 53px;
366 }
367 .riqi
368 {
369 margin-top: 10px;
370 }
371 .riqi ul
372 {
373 width: 13px;
374 height: 114px;
375
376 list-style: none;
377 }
378 .l1
379 {
380 margin-left: 22px;
381 float: left;
382 }
383 .l2
384 {
385 margin-left: 11px;
386 float: left;
387 }
388 .l3
389 {
390 margin-left: 11px;
391 float: left;
392 }
393 .l4
394 {
395 margin-left: 11px;
396 float: left;
397 }
398 .l5
399 {
400 margin-left: 11px;
401 float: left;
402 }
403 .l6
404 {
405 margin-left: 11px;
406 float: left;
407 }
408 .l7
409 {
410 margin-left: 11px;
411 float: left;
412 }
413 .suoxie
414 {
415 font-family: "宋体";
416 font-size: 14px;
417 font-weight: bold;
418 color: #b21f25;
419 }
420 .shuzi13
421 {
422 width: 18px;
423 height: 18px;
424 background-color:#b41f23;
425 }
426 .xiabu
427 {
428 font-family: "宋体";
429 font-size: 14px;
430 font-weight: bold;
431 float: left;
432 }
433 .dec
434 {
435 padding-left: 33px;
436 float: left;
437 color: #b51e23;
438 }
439 .fvb
440 {
441 margin-left: 65px;
442 float: right;
443 }
444 .zhong4
445 {
446 height: 25px;
447 width: 227px;
448 background: url(images/中1.jpg) repeat;
449 margin-top: 14px;
450 float: left;
451 }
452 .zhongjianzhengti
453 {
454 width: 453px;
455 height: 1154px;
456 border: 1px solid red;
457 float: left;
458 }
459 .diyikuai
460 {
461 width: 227px;
462 height: 350px;
463 background-color: #fed3a6;
464 overflow: hidden;
465 }
466 </style>
467 }
468 </head>
469 <body>
470 <!-- 头部 -->
471 <div class="dabeijing"> <!-- 整个页面大背景 -->
472 <div class="houtou"><!-- 猴头 -->
473 </div>
474 <div class="zhengjianzhengti"><!-- 中间三大块 -->
475 <div class="zuocezhengti"><!-- 左侧整体 -->
476 <div class="yinyuedaren"><!-- 音乐达人 -->
477 <div class="outer">
478 <div class="left">
479 <div class="right">
480 <img class="xiangyou" src="images/向右.jpg" alt="">
481 <div class="t1">音乐达人</div>
482 </div>
483 </div>
484 </div>
485 <div class="nvren"></div>
486 <div class="gerenziliao"></div>
487 <div class="jiaoyouziliao"></div>
488 <div class="jiaweihaoyou"></div>
489 <div class="toutayipiao"></div>
490 <div class="geitaliuyan"></div>
491 <div class="songtakapian"></div>
492 <div class="zhong1">
493 <div class="zuo1">
494 <div class="you1"></div>
495 </div>
496 </div>
497 </div>
498 <div class="yinyuehe"><!-- 音乐盒 -->
499 <div class="outer">
500 <div class="left">
501 <div class="right">
502 <img class="xiangyou" src="images/向右.jpg" alt="">
503 <div class="t1">音乐盒</div>
504 <div class="more" >
505 <a href="###">more</a>
506 </div>
507 </div>
508 </div>
509 </div>
510 <div class="gedan1"></div>
511 <div class="gedan2"></div>
512 <div class="gedan3"></div>
513 <div class="geming">
514 <p class="g1">
515 1.有沒有人告诉你-陈楚生
516 <img class="erji" src="images/耳机.jpg" alt="">
517 </p>
518 <p class="g2">
519 2.改变自己-王力宏
520 <img class="erji" src="images/耳机.jpg" alt="">
521 </p>
522 <p class="g3">
523 3.还不是因为爱-苏醒
524 <img class="erji" src="images/耳机.jpg" alt="">
525 </p>
526 <p class="g4">
527 4.西界-林俊杰
528 <img class="erji" src="images/耳机.jpg" alt="">
529 </p>
530 <p class="g5">
531 5.我们的歌-王力宏
532 <img class="erji" src="images/耳机.jpg" alt="">
533 </p>
534 <p class="g6">
535 6.如果你也听说-张惠妹
536 <img class="erji" src="images/耳机.jpg" alt="">
537 </p>
538 <p class="g7">
539 7.热浪-温岚
540 <img class="erji" src="images/耳机.jpg" alt="">
541 </p>
542 <p class="g8 ">
543 8.少年游-魏晨-快乐男声
544 <img class="erji" src="images/耳机.jpg" alt="">
545 </p>
546 <p>
547 <a class="shitingquanbu" href="###">试听全部</a>
548 </p>
549 </div>
550 <div class="zhong2">
551 <div class="zuo1">
552 <div class="you1"></div>
553 </div>
554 </div>
555 </div>
556 <div class="yinyuedaren jingjigongsi"><!-- 经纪公司 -->
557 <div class="outer">
558 <div class="left">
559 <div class="right">
560 <img class="xiangyou" src="images/向右.jpg" alt="">
561 <div class="t1">经纪公司</div>
562 <div class="more" >
563 <a href="###">more</a>
564 </div>
565 </div>
566 </div>
567 </div>
568 <div class="nvren"></div>
569 <div class="houtui"></div>
570 <div class="ayi">阿姨</div>
571 <div class="qianjin"></div>
572 <div class="zhong3">
573 <div class="zuo1">
574 <div class="you1"></div>
575 </div>
576 </div>
577 </div>
578 <div class="yinyuedaren rili"><!-- 日历 -->
579 <div class="outer">
580 <div class="left">
581 <div class="right">
582 <img class="xiangyou" src="images/向右.jpg" alt="">
583 <div class="t1">日历</div>
584 <div class="more2" >
585 <a href="###">more</a>
586 </div>
587 </div>
588 </div>
589 </div>
590 <div class="yuanjiao">
591 <div class="biaotou"><!-- 英文表头 -->
592 January 2007
593 </div>
594 <div class="riqi"><!-- 日期 -->
595 <ul class="l1"><!-- 第一列 -->
596 <li class="suoxie">M</li>
597 <li>1</li>
598 <li>8</li>
599 <li>15</li>
600 <li>22</li>
601 <li>29</li>
602 </ul>
603 <ul class="l2"><!-- 第二列 -->
604 <li class="suoxie">T</li>
605 <li>2</li>
606 <li>9</li>
607 <li>16</li>
608 <li>23</li>
609 <li>30</li>
610 </ul>
611 <ul class="l3"><!-- 第三列 -->
612 <li class="suoxie">W</li>
613 <li>3</li>
614 <li>10</li>
615 <li>17</li>
616 <li>24</li>
617 <li>31</li>
618 </ul>
619 <ul class="l4"><!-- 第四列 -->
620 <li class="suoxie">T</li>
621 <li>4</li>
622 <li>11</li>
623 <li>18</li>
624 <li>25</li>
625 </ul>
626 <ul class="l5"><!-- 第五列 -->
627 <li class="suoxie">F</li>
628 <li>5</li>
629 <li>12</li>
630 <li>19</li>
631 <li>26</li>
632 </ul>
633 <ul class="l6"><!-- 第六列 -->
634 <li class="suoxie">S</li>
635 <li>6</li>
636 <li class="shuzi13">13</li>
637 <li>20</li>
638 <li>27</li>
639 </ul>
640 <ul class="l7"><!-- 第七列 -->
641 <li class="suoxie">S</li>
642 <li>7</li>
643 <li>14</li>
644 <li>21</li>
645 <li>28</li>
646 </ul>
647 </div>
648 <div class="xiabu"><!-- 下部 -->
649 <p class="dec"> <DEC </p>
650 <p class="fvb">FVB></p>
651 </div>
652 </div>
653 <div class="zhong4">
654 <div class="zuo1">
655 <div class="you1"></div>
656 </div>
657 </div>
658 </div>
659 </div>
660 <div class="zhongjianzhengti"><!-- 中间整体 -->
661 <div class="diyikuai"><!-- 第一块-视频 -->
662 <div class="outer">
663 <div class="left">
664 <div class="right">
665 <img class="xiangyou" src="images/向右.jpg" alt="">
666 <div class="t1 ">视频</div>
667 <div class="more" >
668 <a href="###">more</a>
669 </div>
670 </div>
671 </div>
672 </div>
673 </div>
674 </div>
675 </div>
676 </div>
677 </body>
678 </html>