search

博客列表 >某商城列表和详情页

某商城列表和详情页

葡萄枝子
葡萄枝子原创
2021年11月19日 23:38:51507浏览

某商城列表和详情页

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. }

详情页

上一条：JavaScript 实现简单数组排序，翻转，取较大值和较小值下一条：AlmaLinux镜像在阿里云镜像站首发上线
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多