Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 某商城列表和详情页
Blogger Information
Blog 70
fans 1
comment 0
visits 52942
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
某商城列表和详情页
葡萄枝子
Original
505 people have browsed it

某商城列表和详情页

css核心样式

  1. base.css
  1. @charset "utf-8";
  2. /*
  3. 重置浏览器样式
  4. */
  5. body, div, section, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, select, textarea {
  6.     margin: 0;
  7.     padding: 0;
  8. }
  10. div, button, input, select, textarea {
  11.     font: 12px "微软雅黑", "宋体", "arial", "sans-serif";
  12. }
  14. ul, ol {
  15.     list-style: none;
  16. }
  18. h1, h2, h3, h4, h5, h6 {
  19.     font-size: 100%;
  20.     font-weight: 500;
  21. }
  23. a {
  24.     color: var(--fontColor);
  25.     text-decoration: none;
  26.     font-size: 14px;
  27. }
  29. a:hover {
  30.     text-decoration: underline;
  31. }
  33. /*
  34. 颜色变量
  35. */
  36. :root {
  37.     --fontIcon120: rgb(120, 0, 0);
  38.     --bgColor: #90D7EC;
  39.     --colorBlack: black;
  40.     --bgWhite: white;
  41.     --fontColorRed: #a10000;
  42.     --fontColor: #262626;
  43.     --container: 1200px;
  44.     --container-full: 100%;
  45.     --borderColor: #DBDBDB;
  46.     --backgroundColor: #f4f4f4;
  47.     --borderSmColor: #d6d6d6;
  48.     --hoverColor: #A10000;
  49. }
  1. eduwork.css
  1. @charset "utf-8";
  2. /*
  3. 伸缩盒
  4.  */
  5. .d-flex {
  6.     display: flex;
  7. }
  9. .d-inline-flex {
  10.     display: inline-flex;
  11. }
  13. /*弹性流方向与换行*/
  14. .flex-column {
  15.     flex-direction: column;
  16. }
  18. .flex-wrap {
  19.     flex-wrap: wrap;
  20. }
  22. /*主轴对齐方式*/
  23. .justify-content-start {
  24.     justify-content: flex-start;
  25. }
  27. .justify-content-center {
  28.     justify-content: center;
  29. }
  31. .justify-content-end {
  32.     justify-content: flex-end;
  33. }
  35. .justify-content-between {
  36.     justify-content: space-between;
  37. }
  39. .justify-content-around {
  40.     justify-content: space-around;
  41. }
  43. .justify-content-evenly {
  44.     justify-content: space-evenly;
  45. }
  47. /*单行容器交叉轴对齐*/
  48. .align-items-start {
  49.     align-items: flex-start;
  50. }
  52. .align-items-center {
  53.     align-items: center;
  54. }
  56. .align-items-end {
  57.     align-items: flex-end;
  58. }
  60. /*多行容器交叉轴对齐*/
  61. .algin-content-start {
  62.     align-content: flex-start;
  63. }
  65. .align-content-center {
  66.     align-content: center;
  67. }
  69. .align-content-end {
  70.     align-content: flex-end;
  71. }
  73. .align-content-between {
  74.     align-content: space-between;
  75. }
  77. .align-content-around {
  78.     align-content: space-around;
  79. }
  81. .align-content-enenly {
  82.     align-content: space-evenly;
  83. }
  85. /*项目增长比例*/
  86. .flex-grow1 {
  87.     flex-grow: 1;
  88. }
  90. .flex-grow2 {
  91.     flex-grow: 2;
  92. }
  94. .flex-grow3 {
  95.     flex-grow: 3;
  96. }
  98. .flex-grow4 {
  99.     flex-grow: 4;
  100. }
  102. /*项目收缩比例*/
  103. .flex-shrink1 {
  104.     flex-shrink: 1;
  105. }
  107. .flex-shrink2 {
  108.     flex-shrink: 3;
  109. }
  111. .flex-shrink3 {
  112.     flex-shrink: 3;
  113. }
  115. .flex-shrink4 {
  116.     flex-shrink: 4;
  117. }
  119. /*项目宽度*/
  120. .flex-basis5 {
  121.     flex-basis: 5%;
  122. }
  124. .flex-basis10 {
  125.     flex-basis: 10%;
  126. }
  128. .flex-basis15 {
  129.     flex-basis: 15%;
  130. }
  132. .flex-basis20 {
  133.     flex-basis: 20%;
  134. }
  136. .flex-basis25 {
  137.     flex-basis: 25%;
  138. }
  140. .flex-basis30 {
  141.     flex-basis: 30%;
  142. }
  144. .flex-basis35 {
  145.     flex-basis: 35%;
  146. }
  148. .flex-basis40 {
  149.     flex-basis: 40%;
  150. }
  152. .flex-basis45 {
  153.     flex-basis: 45%;
  154. }
  156. .flex-basis50 {
  157.     flex-basis: 50%;
  158. }
  160. .flex-basis55 {
  161.     flex-basis: 55%;
  162. }
  164. .flex-basis60 {
  165.     flex-basis: 60%;
  166. }
  168. .flex-basis65 {
  169.     flex-basis: 65%;
  170. }
  172. .flex-basis70 {
  173.     flex-basis: 70%;
  174. }
  176. .flex-basis75 {
  177.     flex-basis: 75%;
  178. }
  180. .flex-basis80 {
  181.     flex-basis: 80%;
  182. }
  184. .flex-basis85 {
  185.     flex-basis: 85%;
  186. }
  188. .flex-basis90 {
  189.     flex-basis: 90%;
  190. }
  192. .flex-basis95 {
  193.     flex-basis: 95%;
  194. }
  196. .flex-basis100 {
  197.     flex-basis: 100%;
  198. }
  200. /*
  201. 边框
  202.  */
  203. .border-box {
  204.     box-sizing: border-box;
  205. }
  207. .border {
  208.     border: 1px solid var(--borderColor);
  209. }
  211. .border2 {
  212.     border: 2px solid var(--borderColor);
  213. }
  215. .border-top {
  216.     border-top: 1px solid var(--borderColor);
  217. }
  219. .border-right {
  220.     border-right: 1px solid var(--borderColor);
  221. }
  223. .border-bottom {
  224.     border-bottom: 1px solid var(--borderColor);
  225. }
  227. .border-left {
  228.     border-left: 1px solid var(--borderColor);
  229. }
  231. /*去边框*/
  232. .border-0 {
  233.     border: none !important;
  234.     outline: none;
  235. }
  237. .border-top-0 {
  238.     border-top: none !important;
  239. }
  241. .border-right-0 {
  242.     border-right: none !important;
  243. }
  245. .border-bottom-0 {
  246.     border-bottom: none !important;
  247. }
  249. .border-left-0 {
  250.     border-left: none !important;
  251. }
  253. /*边框样式*/
  254. .border-dashed {
  255.     border-style: dashed;
  256. }
  258. .border-top-dashed {
  259.     border-top-style: dashed;
  260. }
  262. .border-right-dashed {
  263.     border-right-style: dashed;
  264. }
  266. .border-bottom-dashed {
  267.     border-bottom-style: dashed;
  268. }
  270. .border-left-dashed {
  271.     border-left-style: dashed;
  272. }
  274. /*圆角*/
  275. .border-radius-5 {
  276.     border-radius: 5px;
  277. }
  279. .border-top-left-radius-5 {
  280.     border-top-left-radius: 5px;
  281. }
  283. .border-top-right-radius-5 {
  284.     border-top-right-radius: 5px;
  285. }
  287. .border-bottom-left-radius-5 {
  288.     border-bottom-left-radius: 5px;
  289. }
  291. .border-bottom-right-radius-5 {
  292.     border-bottom-right-radius: 5px;
  293. }
  295. .border-radius-10 {
  296.     border-radius: 10px;
  297. }
  299. .border-top-left-radius-10 {
  300.     border-top-left-radius: 10px;
  301. }
  303. .border-top-right-radius-10 {
  304.     border-top-right-radius: 10px;
  305. }
  307. .border-bottom-left-radius-10 {
  308.     border-bottom-left-radius: 10px;
  309. }
  311. .border-bottom-right-radius-10 {
  312.     border-bottom-right-radius: 10px;
  313. }
  315. /*
  316. 外边距
  317.  */
  318. .m-auto {
  319.     margin-top: 0;
  320.     margin-bottom: 0;
  321.     margin-left: auto;
  322.     margin-right: auto;
  323. }
  325. .m-0 {
  326.     margin-top: 0;
  327.     margin-right: 0;
  328.     margin-bottom: 0;
  329.     margin-left: 0;
  330. }
  332. .m-1 {
  333.     margin-top: 5px;
  334.     margin-right: 5px;
  335.     margin-bottom: 5px;
  336.     margin-left: 5px;
  337. }
  339. .m-2 {
  340.     margin-top: 10px;
  341.     margin-right: 10px;
  342.     margin-bottom: 10px;
  343.     margin-left: 10px;
  344. }
  346. .m-3 {
  347.     margin-top: 15px;
  348.     margin-right: 15px;
  349.     margin-bottom: 15px;
  350.     margin-left: 15px;
  351. }
  353. .m-4 {
  354.     margin-top: 20px;
  355.     margin-right: 20px;
  356.     margin-bottom: 20px;
  357.     margin-left: 20px;
  358. }
  360. /*上外边距*/
  361. .mt-0 {
  362.     margin-top: 0;
  363. }
  365. .mt-1 {
  366.     margin-top: 5px;
  367. }
  369. .mt-2 {
  370.     margin-top: 10px;
  371. }
  373. .mt-3 {
  374.     margin-top: 15px;
  375. }
  377. .mt-4 {
  378.     margin-top: 20px;
  379. }
  381. /*右外边距*/
  382. .mr-0 {
  383.     margin-right: 0;
  384. }
  386. .mr-1 {
  387.     margin-right: 5px;
  388. }
  390. .mr-2 {
  391.     margin-right: 10px;
  392. }
  394. .mr-3 {
  395.     margin-right: 15px;
  396. }
  398. .mr-4 {
  399.     margin-right: 20px;
  400. }
  402. /*下外边距*/
  403. .mb-0 {
  404.     margin-bottom: 0;
  405. }
  407. .mb-1 {
  408.     margin-bottom: 5px;
  409. }
  411. .mb-2 {
  412.     margin-bottom: 10px;
  413. }
  415. .mb-3 {
  416.     margin-bottom: 15px;
  417. }
  419. .mb-4 {
  420.     margin-bottom: 20px;
  421. }
  423. /*左外边距*/
  424. .ml-0 {
  425.     margin-left: 0;
  426. }
  428. .ml-1 {
  429.     margin-left: 5px;
  430. }
  432. .ml-2 {
  433.     margin-left: 10px;
  434. }
  436. .ml-3 {
  437.     margin-left: 15px;
  438. }
  440. .ml-4 {
  441.     margin-left: 20px;
  442. }
  444. /*左右外边距*/
  445. .mx-0 {
  446.     margin-left: 0;
  447.     margin-right: 0;
  448. }
  450. .mx-1 {
  451.     margin-left: 5px;
  452.     margin-right: 5px;
  453. }
  455. .mx-2 {
  456.     margin-left: 10px;
  457.     margin-right: 10px;
  458. }
  460. .mx-3 {
  461.     margin-left: 15px;
  462.     margin-right: 15px;
  463. }
  465. .mx-4 {
  466.     margin-left: 20px;
  467.     margin-right: 20px;
  468. }
  470. /*上下外边距*/
  471. .my-0 {
  472.     margin-top: 0;
  473.     margin-bottom: 0;
  474. }
  476. .my-1 {
  477.     margin-top: 5px;
  478.     margin-bottom: 5px;
  479. }
  481. .my-2 {
  482.     margin-top: 10px;
  483.     margin-bottom: 10px;
  484. }
  486. .my-3 {
  487.     margin-top: 15px;
  488.     margin-bottom: 15px;
  489. }
  491. .my-4 {
  492.     margin-top: 20px;
  493.     margin-bottom: 20px;
  494. }
  496. /*
  497. 内边距
  498. */
  499. .p-0 {
  500.     padding-top: 0;
  501.     padding-right: 0;
  502.     padding-bottom: 0;
  503.     padding-left: 0;
  504. }
  506. .p-1 {
  507.     padding-top: 5px;
  508.     padding-right: 5px;
  509.     padding-bottom: 5px;
  510.     padding-left: 5px;
  511. }
  513. .p-2 {
  514.     padding-top: 10px;
  515.     padding-right: 10px;
  516.     padding-bottom: 10px;
  517.     padding-left: 10px;
  518. }
  520. .p-3 {
  521.     padding-top: 15px;
  522.     padding-right: 15px;
  523.     padding-bottom: 15px;
  524.     padding-left: 15px;
  525. }
  527. .p-4 {
  528.     padding-top: 20px;
  529.     padding-right: 20px;
  530.     padding-bottom: 20px;
  531.     padding-left: 20px;
  532. }
  534. /*上内边距*/
  535. .pt-0 {
  536.     padding-top: 0;
  537. }
  539. .pt-1 {
  540.     padding-top: 5px;
  541. }
  543. .pt-2 {
  544.     padding-top: 10px;
  545. }
  547. .pt-3 {
  548.     padding-top: 15px;
  549. }
  551. .pt-4 {
  552.     padding-top: 20px;
  553. }
  555. /*右内边距*/
  556. .pr-0 {
  557.     padding-right: 0;
  558. }
  560. .pr-1 {
  561.     padding-right: 5px;
  562. }
  564. .pr-2 {
  565.     padding-right: 10px;
  566. }
  568. .pr-3 {
  569.     padding-right: 15px;
  570. }
  572. .pr-4 {
  573.     padding-right: 20px;
  574. }
  576. /*下内边距*/
  577. .pb-0 {
  578.     padding-bottom: 0;
  579. }
  581. .pb-1 {
  582.     padding-bottom: 5px;
  583. }
  585. .pb-2 {
  586.     padding-bottom: 10px;
  587. }
  589. .pb-3 {
  590.     padding-bottom: 15px;
  591. }
  593. .pb-4 {
  594.     padding-bottom: 20px;
  595. }
  597. /*左内边距*/
  598. .pl-0 {
  599.     padding-left: 0;
  600. }
  602. .pl-1 {
  603.     padding-left: 5px;
  604. }
  606. .pl-2 {
  607.     padding-left: 10px;
  608. }
  610. .pl-3 {
  611.     padding-left: 15px;
  612. }
  614. .pl-4 {
  615.     padding-left: 20px;
  616. }
  618. /*左右内边距*/
  619. .px-0 {
  620.     padding-left: 0;
  621.     padding-right: 0;
  622. }
  624. .px-1 {
  625.     padding-left: 5px;
  626.     padding-right: 5px;
  627. }
  629. .px-2 {
  630.     padding-left: 10px;
  631.     padding-right: 10px;
  632. }
  634. .px-3 {
  635.     padding-left: 15px;
  636.     padding-right: 15px;
  637. }
  639. .px-4 {
  640.     padding-left: 20px;
  641.     padding-right: 20px;
  642. }
  644. /*上下内边距*/
  645. .py-0 {
  646.     padding-top: 0;
  647.     padding-bottom: 0;
  648. }
  650. .py-1 {
  651.     padding-top: 5px;
  652.     padding-bottom: 5px;
  653. }
  655. .py-2 {
  656.     padding-top: 10px;
  657.     padding-bottom: 10px;
  658. }
  660. .py-3 {
  661.     padding-top: 15px;
  662.     padding-bottom: 15px;
  663. }
  665. .py-4 {
  666.     padding-top: 20px;
  667.     padding-bottom: 20px;
  668. }
  670. /*
  671. 宽高
  672. */
  673. .w-5 {
  674.     width: 5%;
  675. }
  677. .w-10 {
  678.     width: 10%;
  679. }
  681. .w-15 {
  682.     width: 15%;
  683. }
  685. .w-20 {
  686.     width: 20%;
  687. }
  689. .w-25 {
  690.     width: 25%;
  691. }
  693. .w-30 {
  694.     width: 30%;
  695. }
  697. .w-35 {
  698.     width: 35%;
  699. }
  701. .w-40 {
  702.     width: 40%;
  703. }
  705. .w-45 {
  706.     width: 45%;
  707. }
  709. .w-50 {
  710.     width: 50%;
  711. }
  713. .w-55 {
  714.     width: 55%;
  715. }
  717. .w-60 {
  718.     width: 60%;
  719. }
  721. .w-65 {
  722.     width: 65%;
  723. }
  725. .w-70 {
  726.     width: 70%;
  727. }
  729. .w-75 {
  730.     width: 75%;
  731. }
  733. .w-80 {
  734.     width: 80%;
  735. }
  737. .w-85 {
  738.     width: 85%;
  739. }
  741. .w-90 {
  742.     width: 90%;
  743. }
  745. .w-95 {
  746.     width: 95%;
  747. }
  749. .w-100 {
  750.     width: 100%;
  751. }
  753. .w-200 {
  754.     width: 200%;
  755. }
  757. .w-300 {
  758.     width: 300%;
  759. }
  761. .h-5 {
  762.     height: 5%;
  763. }
  765. .h-10 {
  766.     height: 10%;
  767. }
  769. .h-15 {
  770.     height: 15%;
  771. }
  773. .h-20 {
  774.     height: 20%;
  775. }
  777. .h-100 {
  778.     height: 100%;
  779. }
  781. .h-200 {
  782.     height: 200%;
  783. }
  785. .h-300 {
  786.     height: 300%;
  787. }
  789. .w-1px {
  790.     width: 1px
  791. }
  793. .w-2px {
  794.     width: 2px;
  795. }
  797. .w-3px {
  798.     width: 3px;
  799. }
  801. .w-5px {
  802.     width: 5px;
  803. }
  805. .w-10px {
  806.     width: 10px;
  807. }
  809. .w-15px {
  810.     width: 15px
  811. }
  813. .w-20px {
  814.     width: 20px;
  815. }
  817. .w-25px {
  818.     width: 25px;
  819. }
  821. .h-1px {
  822.     height: 1px;
  823. }
  825. .h-2px {
  826.     height: 2px;
  827. }
  829. .h-3px {
  830.     height: 3px;
  831. }
  833. .h-5px {
  834.     height: 5px;
  835. }
  837. .h-10px {
  838.     height: 10px;
  839. }
  841. .h-15px {
  842.     height: 15px;
  843. }
  845. .h-20px {
  846.     height: 20px;
  847. }
  849. .h-25px {
  850.     height: 25px;
  851. }
  853. /*
  854. 定位
  855.  */
  856. .position-absolute {
  857.     position: absolute;
  858. }
  860. .position-relative {
  861.     position: relative;
  862. }
  864. .position-fixed {
  865.     position: fixed;
  866. }
  868. .fl {
  869.     float: left;
  870. }
  872. .fr {
  873.     float: right;
  874. }
  876. .left-0 {
  877.     left: 0;
  878. }
  880. .left-5 {
  881.     left: 5px;
  882. }
  884. .left-10 {
  885.     left: 10px;
  886. }
  888. .left-15 {
  889.     left: 15px;
  890. }
  892. .left-20 {
  893.     left: 20px;
  894. }
  896. .right-0 {
  897.     left: 0;
  898. }
  900. .right-5 {
  901.     right: 5px;
  902. }
  904. .right-10 {
  905.     right: 10px;
  906. }
  908. .right-15 {
  909.     right: 15px;
  910. }
  912. .right-20 {
  913.     right: 20px;
  914. }
  916. .top-0 {
  917.     top: 0;
  918. }
  920. .top-5 {
  921.     top: 5px;
  922. }
  924. .top-10 {
  925.     top: 10px;
  926. }
  928. .top-15 {
  929.     top: 15px;
  930. }
  932. .top-20 {
  933.     top: 20px;
  934. }
  936. .bottom-0 {
  937.     bottom: 0;
  938. }
  940. .bottom-5 {
  941.     bottom: 5px;
  942. }
  944. .bottom-10 {
  945.     bottom: 10px;
  946. }
  948. .bottom-15 {
  949.     bottom: 15px;
  950. }
  952. .bottom-20 {
  953.     bottom: 20px;
  954. }
  956. .clear {
  957.     clear: both;
  958.     display: block;
  959.     font-size: 0;
  960.     height: 0;
  961.     line-height: 0;
  962.     overflow: hidden;
  963. }
  965. .z-index1 {
  966.     z-index: 1;
  967. }
  969. .z-index2 {
  970.     z-index: 2;
  971. }
  973. .z-index100 {
  974.     z-index: 100;
  975. }
  977. /*文本*/
  978. .fontSize12 {
  979.     font-size: 12px;
  980. }
  982. .fontSize14 {
  983.     font-size: 14px;
  984. }
  986. .fontSize16 {
  987.     font-size: 16px;
  988. }
  990. .fontSize18 {
  991.     font-size: 18px;
  992. }
  994. .fontSize20 {
  995.     font-size: 20px;
  996. }
  998. .fontSize22 {
  999.     font-size: 22px;
  1000. }
  1002. .fontSize24 {
  1003.     font-size: 24px;
  1004. }
  1006. .fontSize26 {
  1007.     font-size: 26px;
  1008. }
  1010. .fontSize28 {
  1011.     font-size: 28px;
  1012. }
  1014. .fontSize30 {
  1015.     font-size: 30px;
  1016. }
  1018. .fontSize50 {
  1019.     font-size: 50px !important;
  1020. }
  1022. .bold {
  1023.     font-weight: bold;
  1024. }
  1026. .lighter {
  1027.     font-weight: lighter;
  1028. }
  1030. .text-left {
  1031.     text-align: left;
  1032. }
  1034. .text-center {
  1035.     text-align: center;
  1036. }
  1038. .text-right {
  1039.     text-align: right;
  1040. }
  1042. /*
  1043. 显隐
  1044. */
  1045. .show, .d-block {
  1046.     display: block;
  1047. }
  1049. .hide, .d-none {
  1050.     display: none;
  1051. }
  1053. .d-inline {
  1054.     display: inline;
  1055. }
  1057. .d-inline-block {
  1058.     display: inline-block;
  1059. }
  1061. .visibility-hide {
  1062.     visibility: hidden;
  1063. }
  1065. .visibility-visible {
  1066.     visibility: visible;
  1067. }
  1069. .overflow-hidden {
  1070.     overflow: hidden;
  1071. }
  1073. .overflow-x-hidden {
  1074.     overflow-x: hidden;
  1075. }
  1077. .overflow-y-hidden {
  1078.     overflow-y: hidden;
  1079. }
  1081. /*其它*/
  1082. .container {
  1083.     width: var(--container);
  1084.     margin: 10px auto;
  1085. }
  1087. .container-full {
  1088.     width: var(--container-full);
  1089. }
  1091. .bg-transparent {
  1092.     background: transparent;
  1093. }
  1095. .border-dark {
  1096.     border-color: var(--fontColorRed);
  1097. }
  1099. img {
  1100.     width: 100%;
  1101.     vertical-align: center;
  1102. }
  1104. .textWhite {
  1105.     color: white;
  1106. }
  1108. .textBlack {
  1109.     color: var(--colorBlack);
  1110. }
  1112. .textRed {
  1113.     color: var(--fontColorRed);
  1114. }
  1116. .textColor {
  1117.     color: var(--fontColor);
  1118. }
  1120. .fontIcon120 {
  1121.     color: var(--fontIcon120);
  1122. }
  1124. .bgColor {
  1125.     background-color: var(--backgroundColor);
  1126. }
  1128. .bgCover {
  1129.     background-color: var(--bgColor);
  1130. }
  1132. .bgWhite {
  1133.     background-color: var(--bgWhite);
  1134. }
  1136. .bgBlack {
  1137.     background-color: var(--colorBlack);
  1138. }
  1140. .bgRed {
  1141.     background-color: #A10000;
  1142. }
  1144. .bgDb {
  1145.     background-color: #dbdbdb;
  1146. }
  1148. .borderSmColor {
  1149.     border-color: var(--borderSmColor);
  1150. }
  1152. .cursor:hover {
  1153.     cursor: pointer;
  1154. }
  1156. .hover:hover {
  1157.     color: var(--hoverColor);
  1158. }
  1160. .hoverBgRed:hover {
  1161.     background-color: #A10000;
  1162. }
  1164. .hoverWhite:hover {
  1165.     color: white;
  1166. }
  1168. .hoverShadow:hover {
  1169.     box-shadow: 0 0 2px 1px #ccc;
  1170. }
  1172. .hoverOverflow:hover {
  1173.     overflow: visible;
  1174. }
  1176. .hoverVisibility {
  1177.     visibility: visible;
  1178. }
  1180. .transition1s {
  1181.     transition: all 1s ease;
  1182. }
  1184. .decoration-none, .decoration-none:hover {
  1185.     text-decoration: none;
  1186. }
  1. layout.css
  1. @charset "utf-8";
  3. /*导航*/
  4. nav > ul > li::after {
  5.     content: "";
  6.     display: block;
  7.     position: relative;
  8.     height: 2px;
  9.     top: 10px;
  10.     background: #A10000;
  11.     transform: scaleX(0);
  12.     transition: all .3s;
  13. }
  15. nav > ul > li:hover::after {
  16.     transform: scaleX(1.3);
  17. }
  19. nav > ul > li > ul {
  20.     visibility: hidden;
  21. }
  23. nav > ul > li:hover ul {
  24.     visibility: visible;
  25. }
  27. nav > ul > li a:hover {
  28.     text-decoration: none;
  29. }
  31. nav > ul > li > ul {
  32.     background-color: rgba(255, 255, 255, .3);
  33. }
  35. /*顶部banner*/
  36. .banner > div {
  37.     animation: banner 15s infinite;
  38. }
  40. .banner > div:hover {
  41.     animation-play-state: paused;
  42. }
  44. @keyframes banner {
  45.     33.33% {
  46.         margin-left: -100%;
  47.     }
  48.     66.66% {
  49.         margin-left: -200%;
  50.     }
  51. }
  53. /*侧栏*/
  54. aside {
  55.     /*top: calc(50% - 120px);*/
  56.     top: 50%;
  57.     transform: translate(0, -50%);
  58. }
  60. aside > span:hover {
  61.     background-color: var(--hoverColor);
  62.     color: white;
  63. }
  65. aside > span:hover::before {
  66.     font-size: 12px;
  67. }
  69. aside > span:first-child:hover::before {
  70.     content: "我的购物";
  71. }
  73. aside > span:nth-child(2):hover::before {
  74.     content: "搜索商品";
  75. }
  77. aside > span:nth-child(3):hover::before {
  78.     content: "个人中心";
  79. }
  81. aside > span:last-child:hover::before {
  82.     content: "扫码关注";
  83. }
  85. /*导航图文*/
  86. .nav-t {
  87.     width: 820px;
  88.     margin: 0 auto;
  89.     position: relative;
  90.     top: -50px;
  91.     background: white url("/img/bg.jpg") repeat-x bottom;
  92. }
  94. .nav-t > a > img {
  95.     transition: all 1s;
  96. }
  98. .nav-t > a > img:hover {
  99.     transform: scale(1.1);
  100. }
  102. /*卡片*/
  103. .w-365px {
  104.     width: 365px;
  105. }
  107. .h-365px {
  108.     height: 365px;
  109. }
  111. .w-268px {
  112.     width: 268px;
  113. }
  115. .h-268px {
  116.     height: 268px;
  117. }
  119. .card-cover {
  120.     position: relative;
  121.     overflow: hidden;
  122. }
  124. .card-cover > .cover-item {
  125.     position: absolute;
  126.     background-color: var(--bgColor);
  127.     border-radius: 5px 5px 0 0;
  128.     opacity: .2;
  129.     transition: all .3s;
  130. }
  132. .card-cover > .cover-item:first-of-type {
  133.     top: -100%;
  134.     left: -100%;
  135. }
  137. .card-cover > .cover-item:last-of-type {
  138.     top: 100%;
  139.     left: 100%;
  140. }
  142. .card-cover:hover > .cover-item {
  143.     top: 0;
  144.     left: 0;
  145. }
  147. /*其它*/
  148. .w-53px {
  149.     width: 53px;
  150. }
  152. .color777 {
  153.     color: #777;
  154. }

商城列表页

  1. list.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Ewshop - list</title>
  6.     <link rel="stylesheet" href="./css/base.css"/>
  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
  8.     <link rel="stylesheet" href="./css/layout.css">
  9.     <link rel="stylesheet" href="./css/list.css">
  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
  11.     <link rel="icon" href="./img/icon.png"/>
  12. </head>
  13. <body>
  15. <!--头部-->
  16. <header class="container d-flex justify-content-between">
  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
  18.     <div class="d-flex justify-content-center align-items-center">
  19.         <a href="" title="登录" class="fontSize14">登录</a>
  20.         <span class="mx-1">|</span>
  21.         <a href="" title="注册" class="fontSize14">注册</a>
  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
  25.         </form>
  26.         <div class="d-flex justify-content-center align-items-center font">
  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
  30.         </div>
  31.     </div>
  32. </header>
  34. <!--导航-->
  35. <nav class="bcontainer-full">
  36.     <ul class="d-flex justify-content-center m-auto">
  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
  38.         <li class="mx-4 px-2 py-2">
  39.             <a href="#" title="" class="hover">编程图书</a>
  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  42.                 </li>
  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  44.                 </li>
  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  46.                 </li>
  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  48.                 </li>
  49.             </ul>
  50.         </li>
  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
  54.     </ul>
  55. </nav>
  57. <!--banner-->
  58. <section class="banner container-full overflow-hidden">
  59.     <div class="d-flex w-300">
  60.         <a href="" title="" class="d-block w-100"><img src="./img/001.jpeg" alt="" class="w-100"/></a>
  61.         <a href="" title="" class="d-block w-100"><img src="./img/2.jpeg" alt="" class="w-100"/></a>
  62.         <a href="" title="" class="d-block w-100"><img src="./img/3.jpeg" alt="" class="w-100"/></a>
  63.     </div>
  64. </section>
  66. <!--侧栏-->
  67. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
  68.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
  69.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
  70.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
  71.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
  72. </aside>
  74. <!--面包屑-->
  75. <section class="container-full py-1 border-bottom">
  76.     <div class="container">
  77.         <a href="" title="" class="fontSize12 color777">首页</a>
  78.         <span class="mx-2">/</span>
  79.         <a href="" title="" class="fontSize12 color777">编程书籍</a>
  80.         <span class="mx-2">/</span>
  81.         <span class="fontSize12">细说系列</span>
  82.     </div>
  83. </section>
  85. <!--列表头部-->
  86. <section class="container-full border-bottom">
  87.     <div class="container d-flex justify-content-between align-items-center">
  88.         <h3 class="fontSize16 bold">细说系列</h3>
  89.         <div class="w-200px h-40px border-box overflow-hidden hoverOverflow z-index2">
  90.             <div class="w-200px h-40px border d-flex justify-content-between align-items-center border-box px-2 cursor">
  91.                 <span>排序方式</span>
  92.                 <span class="iconfont icon-xiajiantou"></span>
  93.             </div>
  94.             <div class="w-200px h-40px line-height-40px border border-top-0 border-box px-2 cursor bgWhite hoverBgRed hoverWhite">
  95.                 <span>新品上市</span>
  96.             </div>
  97.             <div class="w-200px h-40px line-height-40px border border-top-0 border-box px-2 cursor bgWhite hoverBgRed hoverWhite">
  98.                 <span>销量从高到低</span>
  99.             </div>
  100.             <div class="w-200px h-40px line-height-40px border border-top-0 border-box px-2 cursor bgWhite hoverBgRed hoverWhite">
  101.                 <span>销量从低到高</span>
  102.             </div>
  103.             <div class="w-200px h-40px line-height-40px border border-top-0 border-box px-2 cursor bgWhite hoverBgRed hoverWhite">
  104.                 <span>价格从高到低</span>
  105.             </div>
  106.             <div class="w-200px h-40px line-height-40px border border-top-0 border-box px-2 cursor bgWhite hoverBgRed hoverWhite">
  107.                 <span>价格从低到高</span>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </section>
  113. <!--列表主体-->
  114. <section class="container d-flex justify-content-between pt-4">
  115.     <a href="" title="" class="d-block decoration-none">
  116.         <img src="./img/pro01.jpg" alt="">
  117.         <p class="fontSize12">【细说】细说PHP</p>
  118.         <p class="textRed">￥ 159.00</p>
  119.     </a>
  121.     <a href="" title="" class="d-block decoration-none">
  122.         <img src="./img/pro01.jpg" alt="">
  123.         <p class="fontSize12">【细说】细说PHP</p>
  124.         <p class="textRed">￥ 159.00</p>
  125.     </a>
  127.     <a href="" title="" class="d-block decoration-none">
  128.         <img src="./img/pro01.jpg" alt="">
  129.         <p class="fontSize12">【细说】细说PHP</p>
  130.         <p class="textRed">￥ 159.00</p>
  131.     </a>
  133.     <a href="" title="" class="d-block decoration-none">
  134.         <img src="./img/pro01.jpg" alt="">
  135.         <p class="fontSize12">【细说】细说PHP</p>
  136.         <p class="textRed">￥ 159.00</p>
  137.     </a>
  138. </section>
  140. <!--底部-->
  141. <footer class="container-full border-top mt-4">
  142.     <!--上部分-->
  143.     <section class="container d-flex justify-content-around">
  144.         <div class="d-flex align-items-center">
  145.             <img src="./img/foot1.png" alt="" class="w-53px">
  146.             <span class="ml-2 fontSize14">7天无理由退货</span>
  147.         </div>
  148.         <div class="border-right"></div>
  149.         <div class="d-flex align-items-center">
  150.             <img src="./img/foot2.png" alt="" class="w-53px">
  151.             <span class="ml-2 fontSize14">15天免费换货</span>
  152.         </div>
  153.         <div class="border-right"></div>
  154.         <div class="d-flex align-items-center">
  155.             <img src="./img/foot3.png" alt="" class="w-53px">
  156.             <span class="ml-2 fontSize14">满599包邮</span>
  157.         </div>
  158.         <div class="border-right"></div>
  159.         <div class="d-flex align-items-center">
  160.             <img src="./img/foot4.png" alt="" class="w-53px">
  161.             <span class="ml-2 fontSize14">手机特色服务</span>
  162.         </div>
  163.     </section>
  165.     <!--下部分-->
  166.     <section class="p-4 bgBlack text-center textWhite">
  167.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
  168.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
  169.     </section>
  170. </footer>
  172. </body>
  173. </html>
  1. list.css
  1. @charset "utf-8";
  2. /*列表页*/
  3. .w-200px {
  4.     width: 200px;
  5. }
  7. .h-40px {
  8.     height: 40px;
  9. }
  11. .line-height-40px {
  12.     line-height: 40px;
  13. }

列表页

详情页

  1. info.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Ewshop - info</title>
  6.     <link rel="stylesheet" href="./css/base.css"/>
  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
  8.     <link rel="stylesheet" href="./css/layout.css">
  9.     <link rel="stylesheet" href="./css/info.css">
  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
  11.     <link rel="icon" href="./img/icon.png"/>
  12. </head>
  13. <body>
  15. <!--头部-->
  16. <header class="container d-flex justify-content-between">
  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
  18.     <div class="d-flex justify-content-center align-items-center">
  19.         <a href="" title="登录" class="fontSize14">登录</a>
  20.         <span class="mx-1">|</span>
  21.         <a href="" title="注册" class="fontSize14">注册</a>
  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
  25.         </form>
  26.         <div class="d-flex justify-content-center align-items-center font">
  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
  30.         </div>
  31.     </div>
  32. </header>
  34. <!--导航-->
  35. <nav class="bcontainer-full">
  36.     <ul class="d-flex justify-content-center m-auto">
  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
  38.         <li class="mx-4 px-2 py-2">
  39.             <a href="#" title="" class="hover">编程图书</a>
  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  42.                 </li>
  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  44.                 </li>
  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  46.                 </li>
  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
  48.                 </li>
  49.             </ul>
  50.         </li>
  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
  54.     </ul>
  55. </nav>
  57. <!--banner-->
  58. <section class="banner container-full overflow-hidden">
  59.     <div class="d-flex w-300">
  60.         <a href="" title="" class="d-block w-100"><img src="./img/001.jpeg" alt="" class="w-100"/></a>
  61.         <a href="" title="" class="d-block w-100"><img src="./img/2.jpeg" alt="" class="w-100"/></a>
  62.         <a href="" title="" class="d-block w-100"><img src="./img/3.jpeg" alt="" class="w-100"/></a>
  63.     </div>
  64. </section>
  66. <!--侧栏-->
  67. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
  68.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
  69.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
  70.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
  71.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
  72. </aside>
  74. <!--面包屑-->
  75. <section class="container-full py-1 border-bottom">
  76.     <div class="container">
  77.         <a href="" title="" class="fontSize12 color777">首页</a>
  78.         <span class="mx-2">/</span>
  79.         <a href="" title="" class="fontSize12 color777">编程书籍</a>
  80.         <span class="mx-2">/</span>
  81.         <span class="fontSize12">细说系列</span>
  82.     </div>
  83. </section>
  85. <!--内容详情-->
  86. <section class="container">
  87.     <section class="d-flex mb-4 pt-4">
  88.         <section class="flex-basis50">
  89.             <div class="w-60"><img src="./img/proDet01_big.jpg" alt=""></div>
  90.             <div class="d-flex w-60">
  91.                 <img src="./img/proDet01.jpg" alt="">
  92.                 <img src="./img/proDet01.jpg" alt="">
  93.                 <img src="./img/proDet01.jpg" alt="">
  94.                 <img src="./img/proDet01.jpg" alt="">
  95.             </div>
  96.         </section>
  98.         <section class="flex-basis50">
  99.             <div class="border-bottom pb-4">
  100.                 <h1 class="fontSize24">[细说] 细说PHP</h1>
  101.                 <p class="color777">【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p>
  102.                 <p class="textRed bold fontSize16">￥ 159.00</p>
  103.             </div>
  104.             <div class="border-bottom pb-4 my-4">
  105.                 <p>颜色分类</p>
  106.                 <p class="d-flex">
  107.                     <img src="./img/proDet01.jpg" alt="" class="w-50px mr-3">
  108.                     <img src="./img/proDet01.jpg" alt="" class="w-50px mr-3">
  109.                     <img src="./img/proDet01.jpg" alt="" class="w-50px mr-3">
  110.                     <img src="./img/proDet01.jpg" alt="" class="w-50px mr-3">
  111.                 </p>
  112.                 <p>数量 库存<span class="textRed">2000</span>件</p>
  113.                 <div class="d-flex mt-4 align-items-center align-items-center">
  114.                     <div class="border py-1 px-2 cursor">-</div>
  115.                     <div class="mx-2"><input type="text" value="1" size="1" class="border-0 text-center"></div>
  116.                     <div class="border py-1 px-2 cursor">+</div>
  117.                 </div>
  118.             </div>
  119.             <div class="mt-4 py-4 d-flex justify-content-between">
  120.                 <button class="bgRed border py-3 textWhite w-200px">立刻购买</button>
  121.                 <button class="bgWhite border py-3 w-200px">加入购物车</button>
  122.             </div>
  123.         </section>
  124.     </section>
  126.     <section class="mt-50px d-flex justify-content-between">
  127.         <section class="flex-basis82">
  128.             <div class="border-top border-bottom d-flex">
  129.                 <div class="px-3 py-2 border-bottom border-dark">商品详情</div>
  130.                 <div class="px-3 py-2">所有评价</div>
  131.             </div>
  132.             <div class="mt-4">
  133.                 <img src="./img/det01.jpg" alt="">
  134.                 <img src="./img/det01.jpg" alt="">
  135.                 <img src="./img/det01.jpg" alt="">
  136.                 <img src="./img/det01.jpg" alt="">
  137.                 <img src="./img/det01.jpg" alt="">
  138.             </div>
  139.         </section>
  141.         <section class="flex-basis16">
  142.             <div class="border">
  143.                 <div class="d-flex justify-content-center bgColor">
  144.                     <div class="px-3 py-2">为你推荐</div>
  145.                 </div>
  146.                 <div class="p-3">
  147.                     <img src="./img/see01.jpg" alt="">
  148.                     <p>【细说】细说PHP</p>
  149.                     <p>￥158.00</p>
  150.                 </div>
  151.                 <div class="p-3">
  152.                     <img src="./img/see01.jpg" alt="">
  153.                     <p>【细说】细说PHP</p>
  154.                     <p>￥158.00</p>
  155.                 </div>
  156.                 <div class="p-3">
  157.                     <img src="./img/see01.jpg" alt="">
  158.                     <p>【细说】细说PHP</p>
  159.                     <p>￥158.00</p>
  160.                 </div>
  161.                 <div class="p-3">
  162.                     <img src="./img/see01.jpg" alt="">
  163.                     <p>【细说】细说PHP</p>
  164.                     <p>￥158.00</p>
  165.                 </div>
  166.             </div>
  167.         </section>
  168.     </section>
  169. </section>
  171. <!--猜你喜欢-->
  172. <section class="container-full bgfb py-4">
  173.     <h3 class="text-center py-2">猜你喜欢</h3>
  174.     <section class="d-flex justify-content-between">
  175.         <a href="" title="" class="decoration-none text-center pl-4 d-flex align-items-center"><i class="iconfont icon-xiangzuojiantou fontSize50 opcity3"></i></a>
  176.         <div class="container d-flex justify-content-around">
  177.             <div>
  178.                 <img src="./img/like04.jpg" alt="">
  179.                 <p class="fontSize16">【细说】细说PHP</p>
  180.                 <p class="textRed fontSize16">￥158.00</p>
  181.             </div>
  182.             <div>
  183.                 <img src="./img/like04.jpg" alt="">
  184.                 <p class="fontSize16">【细说】细说PHP</p>
  185.                 <p class="textRed fontSize16">￥158.00</p>
  186.             </div>
  187.             <div>
  188.                 <img src="./img/like04.jpg" alt="">
  189.                 <p class="fontSize16">【细说】细说PHP</p>
  190.                 <p class="textRed fontSize16">￥158.00</p>
  191.             </div>
  192.             <div>
  193.                 <img src="./img/like04.jpg" alt="">
  194.                 <p class="fontSize16">【细说】细说PHP</p>
  195.                 <p class="textRed fontSize16">￥158.00</p>
  196.             </div>
  197.         </div>
  198.         <a href="" title="" class="decoration-none text-center pr-4 d-flex align-items-center"><i class="iconfont icon-xiangyoujiantou fontSize50 opcity3"></i></a>
  199.     </section>
  200. </section>
  202. <!--底部-->
  203. <footer class="container-full border-top mt-4">
  204.     <!--上部分-->
  205.     <section class="container d-flex justify-content-around">
  206.         <div class="d-flex align-items-center">
  207.             <img src="./img/foot1.png" alt="" class="w-53px">
  208.             <span class="ml-2 fontSize14">7天无理由退货</span>
  209.         </div>
  210.         <div class="border-right"></div>
  211.         <div class="d-flex align-items-center">
  212.             <img src="./img/foot2.png" alt="" class="w-53px">
  213.             <span class="ml-2 fontSize14">15天免费换货</span>
  214.         </div>
  215.         <div class="border-right"></div>
  216.         <div class="d-flex align-items-center">
  217.             <img src="./img/foot3.png" alt="" class="w-53px">
  218.             <span class="ml-2 fontSize14">满599包邮</span>
  219.         </div>
  220.         <div class="border-right"></div>
  221.         <div class="d-flex align-items-center">
  222.             <img src="./img/foot4.png" alt="" class="w-53px">
  223.             <span class="ml-2 fontSize14">手机特色服务</span>
  224.         </div>
  225.     </section>
  227.     <!--下部分-->
  228.     <section class="p-4 bgBlack text-center textWhite">
  229.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
  230.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
  231.     </section>
  232. </footer>
  234. </body>
  235. </html>
  1. info.css
  1. @charset "utf-8";
  2. .w-50px {
  3.     width: 50px;
  4. }
  5. .w-200px {
  6.     width: 200px;
  7. }
  8. .mt-50px {
  9.     margin-top: 50px;
  10. }
  11. .flex-basis82 {
  12.     flex-basis: 82%;
  13. }
  14. .flex-basis16 {
  15.     flex-basis: 16%;
  16. }
  17. .bgfb {
  18.     background-color: #fbfbfb;
  19. }
  20. .opcity3 {
  21.     opacity: .3;
  22. }

详情页

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：写的很详细了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post