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 /* 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>