├── 111111.png ├── css └── index.css ├── homework.html └── images ├── 111111副本.png ├── Layer-6.png ├── QQ截图20200928141040.png ├── bg.png ├── bg3.png ├── bg4.png ├── bg5.png ├── logo-拷贝-2.png ├── logo-拷贝.png ├── logo.png ├── shouzhi.png ├── shouzibg.png ├── sideBg.png ├── t1.png ├── time.png ├── user.png ├── 互动图标.png ├── 人物.png ├── 修改.png ├── 光.jpg ├── 关闭.png ├── 减.png ├── 增加.png ├── 摄像头.png ├── 曾.png ├── 椭圆-12-拷贝.png ├── 椭圆-12.png ├── 组-1.png ├── 组-18.png ├── 赠送.png └── 钟表.png /111111.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dingzhiyuan123/ps-html/768577a64e0c44674d5aaecb9f033e595ec53ee6/111111.png -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0} 2 | .background{ 3 | width: 1482px; 4 | height: 1165px; 5 | background: url("../images/QQ截图20200928141040.png"); 6 | position: relative; 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | .ipad{ 11 | width: 1280px; 12 | height: 860px; 13 | position: absolute; 14 | top: 105px; 15 | left: 105px; 16 | border: 10px solid rgb(37, 48, 57); 17 | border-radius: 60px; 18 | background-color: rgb(0, 0, 3); 19 | overflow: hidden; 20 | } 21 | .fanhuijian{ 22 | width: 63px; 23 | height: 61px; 24 | position: relative; 25 | left: 45px; 26 | top: 400px; 27 | border: 1px solid #999; 28 | border-radius: 50%; 29 | } 30 | .fanhuijian img{ 31 | position: absolute; 32 | left: -2px; 33 | top: 0px; 34 | } 35 | 36 | .shexiangtou{ 37 | width: 18px; 38 | height: 18px; 39 | position: relative; 40 | left: 1219px; 41 | top: 350px; 42 | border: 1px solid #999; 43 | border-radius: 50%; 44 | z-index: 10; 45 | 46 | } 47 | .guang{ 48 | position: absolute; 49 | right: 0%; 50 | bottom: -7%; 51 | z-index: 0; 52 | } 53 | .zhuban{ 54 | width: 1030px; 55 | height: 775px; 56 | background:url("../images/bg.png"); 57 | position: relative; 58 | top:-42px ; 59 | left: 140px; 60 | z-index: 10; 61 | border-radius: 3px; 62 | } 63 | .zhuban::before{ 64 | content:""; 65 | display: table; 66 | } 67 | .left{ 68 | height: 660px; 69 | width: 303px; 70 | margin-top: 25px; 71 | position: relative; 72 | } 73 | .toppitiao{ 74 | width: 303px; 75 | height: 44px; 76 | background: url("../images/t1.png")repeat-x; 77 | border-top-right-radius: 8px; 78 | border-top-left-radius: 8px; 79 | } 80 | .toppitiao::before{ 81 | content: ""; 82 | display:table; 83 | } 84 | .toppitiao img{ 85 | height:35px; 86 | display: block; 87 | margin-left: 6px; 88 | margin-top: 4px; 89 | } 90 | .dianming{ 91 | width: 303px; 92 | height: 66px; 93 | background: url("../images/sideBg.png"); 94 | position: relative; 95 | } 96 | .dianming::before{ 97 | content:""; 98 | display: table; 99 | } 100 | .renwu img{ 101 | width: 21px; 102 | height: 21px; 103 | display: block; 104 | margin-left: 12px; 105 | margin-top: 12px; 106 | } 107 | .renwu p{ 108 | color: rgb(236, 189, 133); 109 | position: absolute; 110 | top: 11px; 111 | left: 40px; 112 | font-weight: 550; 113 | } 114 | .time img{ 115 | width: 21px; 116 | height: 21px; 117 | display: block; 118 | margin-left: 12px; 119 | margin-top: 4px; 120 | } 121 | .time p{ 122 | color: rgb(236, 189, 133); 123 | position: absolute; 124 | top: 36px; 125 | left: 40px; 126 | font-weight: 550; 127 | } 128 | .shouzhititle{ 129 | position: absolute; 130 | width: 303px; 131 | height: 44px; 132 | background: url("../images/bg3.png")repeat-x; 133 | box-shadow: 0px -7px 12px 1px #000; 134 | } 135 | .shouzhititle img{ 136 | width: 21px; 137 | height: 21px; 138 | display: block; 139 | margin-left: 12px; 140 | margin-top: 11px; 141 | } 142 | .shouzhititle p{ 143 | color: rgb(205, 205, 205); 144 | font-size: 18px; 145 | position: absolute; 146 | top: 7px; 147 | left: 37px; 148 | } 149 | .hjhj{ 150 | height: 414px; 151 | width: 303px; 152 | background: url("../images/shouzibg.png"); 153 | } 154 | .hjhj1{ 155 | position: relative; 156 | top: 44px; 157 | width: 303px; 158 | height: 44px; 159 | background-color: rgb(239, 230, 212); 160 | border-bottom: 1px solid #999; 161 | } 162 | .hjhj1::before{ 163 | content:""; 164 | display: table; 165 | } 166 | .hjhj1 ul{ 167 | overflow: hidden; 168 | text-align: center; 169 | margin-top: 11px; 170 | } 171 | .hjhj1 li{ 172 | float: left; 173 | list-style: none; 174 | width: 60px; 175 | color: rgb(128, 55,23); 176 | font-weight: 550; 177 | } 178 | .hjhj2{ 179 | position: relative; 180 | top: 44px; 181 | width: 303px; 182 | height: 44px; 183 | background-color: rgb(239, 230, 212); 184 | border-bottom: 1px solid #999; 185 | } 186 | .hjhj2::before{ 187 | content:""; 188 | display: table; 189 | } 190 | .hjhj2 ul{ 191 | overflow: hidden; 192 | text-align: center; 193 | margin-top: 11px; 194 | } 195 | .hjhj2 li{ 196 | float: left; 197 | list-style: none; 198 | width: 60px; 199 | color: rgb(128, 55,23); 200 | font-weight: 550; 201 | } 202 | .hjhj3{ 203 | position: relative; 204 | top: 44px; 205 | width: 303px; 206 | height: 44px; 207 | background-color: rgb(239, 230, 212); 208 | border-bottom: 1px solid #999; 209 | } 210 | .hjhj3::before{ 211 | content:""; 212 | display: table; 213 | } 214 | .hjhj3 ul{ 215 | overflow: hidden; 216 | text-align: center; 217 | margin-top: 11px; 218 | } 219 | .hjhj3 li{ 220 | float: left; 221 | list-style: none; 222 | width: 60px; 223 | color: rgb(128, 55,23); 224 | font-weight: 550; 225 | font-size: 15px; 226 | } 227 | .hjhj4{ 228 | position: relative; 229 | top: 44px; 230 | width: 303px; 231 | height: 44px; 232 | background-color: rgb(239, 230, 212); 233 | border-bottom: 1px solid #999; 234 | } 235 | .hjhj4::before{ 236 | content:""; 237 | display: table; 238 | } 239 | .hjhj4 ul{ 240 | overflow: hidden; 241 | text-align: center; 242 | margin-top: 11px; 243 | } 244 | .hjhj4 li{ 245 | float: left; 246 | list-style: none; 247 | width: 60px; 248 | color: rgb(128, 55,23); 249 | font-weight: 550; 250 | font-size: 15px; 251 | } 252 | #ppp{ 253 | font-size: 15px; 254 | margin-left: 20px; 255 | } 256 | .hjhj4 img{ 257 | width: 20px; 258 | height: 20px; 259 | position: absolute; 260 | left: 0px; 261 | top: 12px; 262 | } 263 | #pop{ 264 | width: 80px; 265 | } 266 | .hjhj5{ 267 | position: relative; 268 | top: 44px; 269 | width: 303px; 270 | height: 44px; 271 | background-color: rgb(239, 230, 212); 272 | border-bottom: 1px solid #999; 273 | } 274 | .hjhj5::before{ 275 | content:""; 276 | display: table; 277 | } 278 | .hjhj5 ul{ 279 | overflow: hidden; 280 | text-align: center; 281 | margin-top: 11px; 282 | } 283 | .hjhj5 li{ 284 | float: left; 285 | list-style: none; 286 | width: 60px; 287 | color: rgb(128, 55,23); 288 | font-weight: 550; 289 | font-size: 15px; 290 | } 291 | .leftbottom{ 292 | width: 303px; 293 | height: 136px; 294 | background-color: rgb(243, 231, 191); 295 | box-shadow: 0px -1px 7px 1px #000; 296 | position: relative; 297 | } 298 | .zonggong{ 299 | width:215px; 300 | height: 50px; 301 | background-color: rgb(242, 241, 211); 302 | position: absolute; 303 | left: 19px; 304 | top: 26px; 305 | text-align: center; 306 | } 307 | .zonggong p{ 308 | margin-top: 10px; 309 | color:rgb(187, 47, 32); 310 | font-size: 22px; 311 | } 312 | .sousuo{ 313 | width: 256px; 314 | height: 30px; 315 | position: relative; 316 | top: 88px; 317 | overflow: hidden; 318 | margin-left: 5px; 319 | } 320 | .sousuo input{ 321 | position: absolute; 322 | top: 0; 323 | left: 0; 324 | height:30px; 325 | width: 215px; 326 | border: none; 327 | border-radius: 6px; 328 | } 329 | .sousuo button{ 330 | position: absolute; 331 | top: 0; 332 | right: 0; 333 | width: 40px; 334 | height: 30px; 335 | background-color: white; 336 | border: 0; 337 | border-radius: 6px; 338 | } 339 | .qwert span{ 340 | width: 20px; 341 | height: 20px; 342 | position: absolute; 343 | top: 7px; 344 | right: 46px; 345 | z-index: 20; 346 | } 347 | .qwert{ 348 | color: #555; 349 | } 350 | .xuanfu::before{ 351 | content:""; 352 | display: table; 353 | } 354 | .xuanfu{ 355 | width: 40px; 356 | height: 506px; 357 | position: absolute; 358 | right: 0; 359 | top: 154px; 360 | background: rgba(0, 0, 0, 0.6); 361 | text-align: center; 362 | } 363 | .xuanfu img{ 364 | margin-top: 13px; 365 | } 366 | .right{ 367 | height: 660px; 368 | width: 723px; 369 | margin-top: 25px; 370 | position: relative; 371 | right: -307px; 372 | top: -685px; 373 | } 374 | .toppitiao1{ 375 | width: 723px; 376 | height: 44px; 377 | background: url("../images/t1.png")repeat-x; 378 | border-top-right-radius: 8px; 379 | border-top-left-radius: 8px; 380 | } 381 | .bq1{ 382 | width: 106px; 383 | height: 44px; 384 | background-color: rgb(198, 65, 46); 385 | position: relative; 386 | left: 63px; 387 | top: 57px; 388 | text-align: center; 389 | border-top-right-radius: 3px; 390 | border-top-left-radius: 3px; 391 | border-top: 1px solid rgb(207, 207, 207); 392 | } 393 | .bq1 p{ 394 | color: white; 395 | font-size: 17px; 396 | margin-top: 10px; 397 | } 398 | .bq2{ 399 | width: 106px; 400 | height: 44px; 401 | background-color: rgb(236,189,133); 402 | position: relative; 403 | left: 174px; 404 | top: 12px; 405 | text-align: center; 406 | border-top-right-radius: 3px; 407 | border-top-left-radius: 3px; 408 | border-top: 1px solid rgb(207, 207, 207); 409 | } 410 | .bq2 p{ 411 | color:rgb(136, 73, 29); 412 | font-size: 17px; 413 | margin-top: 10px; 414 | } 415 | .bq3{ 416 | width: 106px; 417 | height: 44px; 418 | background-color: rgb(236,189,133); 419 | position: relative; 420 | left: 285px; 421 | top: -33px; 422 | text-align: center; 423 | border-top-right-radius: 3px; 424 | border-top-left-radius: 3px; 425 | border-top: 1px solid rgb(207, 207, 207); 426 | } 427 | .bq3 p{ 428 | color:rgb(136, 73, 29); 429 | font-size: 17px; 430 | margin-top: 10px; 431 | } 432 | .bq4{ 433 | width: 106px; 434 | height: 44px; 435 | background-color: rgb(236,189,133); 436 | position: relative; 437 | left: 396px; 438 | top: -78px; 439 | text-align: center; 440 | border-top-right-radius: 3px; 441 | border-top-left-radius: 3px; 442 | border-top: 1px solid rgb(207, 207, 207); 443 | } 444 | .bq4 p{ 445 | color:rgb(136, 73, 29); 446 | font-size: 17px; 447 | margin-top: 10px; 448 | } 449 | .bq5{ 450 | width: 106px; 451 | height: 44px; 452 | background-color: rgb(236,189,133); 453 | position: relative; 454 | left: 507px; 455 | top: -123px; 456 | text-align: center; 457 | border-top-right-radius: 3px; 458 | border-top-left-radius: 3px; 459 | border-top: 1px solid rgb(207, 207, 207); 460 | } 461 | .bq5 p{ 462 | color:rgb(136, 73, 29); 463 | font-size: 17px; 464 | margin-top: 10px; 465 | } 466 | .plm{ 467 | width: 87px; 468 | height: 514px; 469 | background: url("../images/bg5.png")repeat-y; 470 | margin-left: 12px; 471 | position: relative; 472 | top: -123px; 473 | border-top-left-radius: 26px; 474 | border-bottom-left-radius: 26px; 475 | } 476 | .baise{ 477 | width: 616px; 478 | height: 514px; 479 | background:rgb(253, 253, 245); 480 | position: relative; 481 | top: -637px; 482 | right: -98px; 483 | border-top-right-radius: 8px; 484 | border-bottom-right-radius: 8px; 485 | } 486 | .line{ 487 | width: 590px; 488 | height: 3px; 489 | background-color: rgb(198, 65, 46); 490 | position: relative; 491 | top: 23px; 492 | left: 4px; 493 | } 494 | .box1{ 495 | width: 105px; 496 | height: 70px; 497 | background-color: white; 498 | border: 1px solid rgb(248, 232, 209); 499 | position: relative; 500 | top: 39px; 501 | left: 5px; 502 | box-shadow: 6px 6px 4px 1px rgb(248, 232, 209); 503 | 504 | } 505 | .nji{ 506 | color: rgb(202, 84, 69); 507 | } 508 | .edc{ 509 | text-align: left; 510 | margin-top: -20px; 511 | margin-left: 15px; 512 | } 513 | .box2{ 514 | width: 105px; 515 | height: 70px; 516 | background-color: white; 517 | border: 1px solid rgb(248, 232, 209); 518 | position: relative; 519 | top: -33px; 520 | left: 125px; 521 | box-shadow: 6px 6px 4px 1px rgb(248, 232, 209); 522 | } 523 | .edc1{ 524 | text-align: left; 525 | margin-top: 8px; 526 | margin-left: 15px; 527 | } 528 | .box3{ 529 | width: 105px; 530 | height: 70px; 531 | background-color: white; 532 | border: 1px solid rgb(248, 232, 209); 533 | position: relative; 534 | top: -105px; 535 | left: 245px; 536 | box-shadow: 6px 6px 4px 1px rgb(248, 232, 209); 537 | } 538 | .box4{ 539 | width: 105px; 540 | height: 70px; 541 | background-color: white; 542 | border: 1px solid rgb(248, 232, 209); 543 | position: relative; 544 | top: -177px; 545 | left: 365px; 546 | box-shadow: 6px 6px 4px 1px rgb(248, 232, 209); 547 | } 548 | .box5{ 549 | width: 105px; 550 | height: 70px; 551 | background-color: white; 552 | border: 1px solid rgb(248, 232, 209); 553 | position: relative; 554 | top: -249px; 555 | left: 485px; 556 | box-shadow: 6px 6px 4px 1px rgb(248, 232, 209); 557 | } 558 | .dibuleft{ 559 | position: absolute; 560 | left: 12px; 561 | bottom: 64px; 562 | } 563 | .dibuleft p{ 564 | color: rgb(248, 232, 209); 565 | 566 | } 567 | .xuanxiang{ 568 | width: 480px; 569 | height: 75px; 570 | position: relative; 571 | top: -671px; 572 | right: -373px; 573 | } 574 | .xuanxiang ul{ 575 | overflow: hidden; 576 | text-align: center; 577 | } 578 | .xuanxiang span{ 579 | font-size: 47px; 580 | color:rgb(248, 232, 209); 581 | } 582 | .xuanxiang li{ 583 | float: left; 584 | list-style: none; 585 | } 586 | .xuanxiang p{ 587 | color: rgb(248, 232, 209); 588 | } 589 | .ios{ 590 | margin-right: 24px; 591 | } 592 | .shouyin{ 593 | width: 130px; 594 | height: 55px; 595 | background-color: rgb(195, 63, 43); 596 | position: absolute; 597 | bottom: 12px; 598 | right: 17px; 599 | text-align: center; 600 | } 601 | .shouyin::before{ 602 | content: ""; 603 | display: table; 604 | } 605 | .shouyin span{ 606 | display: block; 607 | font-size: 30px; 608 | margin-top: 7px; 609 | color: rgb(248, 232, 209); 610 | } 611 | -------------------------------------------------------------------------------- /homework.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |黑侠(光谷店)
32 |2016-04-06 10:23 AM
36 |收支明细
41 |戚风蛋糕
72 |三明治
82 |戚风蛋糕
115 |蛋挞
118 |全麦面包
121 |戚风蛋糕
124 |三明治
127 |0001
139 |巧克力蛋糕
140 |0001
145 |巧克力蛋糕
146 |0001
151 |巧克力蛋糕
152 |0001
157 |巧克力蛋糕
158 |0001
163 |巧克力蛋糕
164 |会员信息:
170 |管理台
177 |购物卡
181 |会员
185 |促销
189 |预定
193 |交班
197 |挂单
201 |