品乐购 · 2021 web前端工程师

[TOC] # 平了狗 ![](https://img.kancloud.cn/86/16/8616508d6a6d8b3835bced27c2fb6ad9_844x691.png) # 通栏导航栏 ![](https://img.kancloud.cn/a4/91/a491f1d43e6690d9aa2248c41f40f289_1312x313.png) ![](https://img.kancloud.cn/0a/83/0a837afbf7a290f1a540a19223f24781_1920x258.png) | ![](https://img.kancloud.cn/30/4c/304c4194b3a0bcb96aa5c867c2e28422_820x549.png) | ![](https://img.kancloud.cn/4d/87/4d87936ee6362fb2391d5e89a3e62f0c_745x741.png) | | --- | --- | ![](https://img.kancloud.cn/cb/a0/cba0805a32e379611371641c529eeecd_879x204.png) ## 插入小三角 | ![](https://img.kancloud.cn/c0/f0/c0f033f3349e97eeb81e71e27974e1b4_952x136.png) | ![](https://img.kancloud.cn/45/5b/455b1457793b03a1e89eb2c22a036cc8_601x167.png) | | --- | --- | | ![](https://img.kancloud.cn/14/32/14322417ac5b4fdaaf126dd52da7a4c7_1725x557.png) | ![](https://img.kancloud.cn/33/62/3362aae209c09b6604fa04f18c0360d7_1780x518.png) | | ![](https://img.kancloud.cn/26/fc/26fcefebf81babd188e47b30fc55da84_1468x562.png) | ![](https://img.kancloud.cn/82/4c/824c6e6d7d7ed234f7a7369029d30d84_572x206.png) | ## 行高h高**字体偏下** ![](https://img.kancloud.cn/f3/b5/f3b55255282bcedc9e6e3f783626bf00_830x42.png) # header 制作 ![](https://img.kancloud.cn/50/d2/50d2b74f154b4f687c1db4b03cc25617_1098x424.png) ## 主页logo 1、加一个h1 主页文字 2、h1 放a标签链接主页 3、把文字移到盒子外 text-indent:-9999px overfloe:hidden 或者直接 font-indent:0； 4、a标签里套个 title（提示文字） ![](https://img.kancloud.cn/1f/18/1f188d850ea56f3b4de110fdfca26494_897x48.png) ![](https://img.kancloud.cn/ec/85/ec85a3af9f3dcb2e2d01ef6af8872372_1076x374.png) ## 搜索框 | ![](https://img.kancloud.cn/5b/66/5b6654a71024e1e128fcf1408d3cd4ba_620x725.png) | ![](https://img.kancloud.cn/e0/10/e0100f15dac76fbb8750a0d801b6d21a_842x131.png) | | --- | --- | | ![](https://img.kancloud.cn/6b/85/6b85c7ec226f20001f7be6945b78cf08_690x858.png) | ![](https://img.kancloud.cn/36/d7/36d7629ded9a2f51fd44798a1aaff209_1540x260.png)![](https://img.kancloud.cn/68/2f/682f4c4b4168068656e01287679db7a1_374x95.png) | ## 右侧购物车 ![](https://img.kancloud.cn/52/c9/52c9e9a104709040d831536a188492c7_657x226.png) 调用小三角 ![](https://img.kancloud.cn/67/c4/67c47df8ead29ea226fedda48340add7_681x679.png) ### 购物车数量 ![](https://img.kancloud.cn/13/c0/13c0323851999c0564baa9dd3da4ed5f_1335x625.png) ![](https://img.kancloud.cn/ed/1c/ed1c73e5d06007612d907ef4a8d2b483_1116x530.png) ## nav制作 ![](https://img.kancloud.cn/a9/3b/a93ba416f31ff29c3855169241d2e016_1044x294.png) ![](https://img.kancloud.cn/1b/72/1b7296e06149186849ae1edc6f2c97e9_1920x667.png) | ![](https://img.kancloud.cn/9e/a7/9ea77100b06f880cb4f6e6265c194fc5_986x477.png) | ![](https://img.kancloud.cn/75/19/751904042cb11b0a22ad3155e8ff74fe_675x779.png) | | --- | --- | | ![](https://img.kancloud.cn/e4/c9/e4c9baec4a548296dc97880efdea731b_709x673.png) | ![](https://img.kancloud.cn/03/01/030135df0a131242e632ffc8cc3c340a_786x823.png)![](https://img.kancloud.cn/e5/16/e516eb0a6e253a673d6f9c8309ad684d_640x169.png) | # 底部 ![](https://img.kancloud.cn/90/c0/90c0dd2ca3ec2e982cf2933249f28289_1181x654.png) ## ps切图工具可以平均划分每个盒子大小 ![](https://img.kancloud.cn/05/8c/058cfea23a3b5fdb1d7715048fc4b21c_1460x761.png) ![](https://img.kancloud.cn/66/86/6686cbab5fae8b191a170a865dff3ed6_760x407.png) # 中间内容 ![](https://img.kancloud.cn/dd/1a/dd1a48e7b2226433bddf8b91fe381bbb_1207x758.png) 中间大图格式![](https://img.kancloud.cn/21/bd/21bd28b3ef6f184a22f0b98874f057fd_533x88.png) # 推荐模块 ![](https://img.kancloud.cn/44/ff/44ff05da7ceeab3b67b53569abbd55a4_1208x424.png) # 楼层区不要给高 ![](https://img.kancloud.cn/5d/12/5d12f8b53feba0d31819e1ed4c39f66d_1209x872.png) ![](https://img.kancloud.cn/99/92/9992a9807986dd05061cfcecefd0a222_1173x629.png) # 侧拉栏（放广告） ![](https://img.kancloud.cn/0a/6c/0a6c3c21c477ed5c673ea62d570c2e5b_609x727.png) ![](https://img.kancloud.cn/4e/a3/4ea366decc989fe94db6ac5ac2f37765_807x530.png) 销售进度条 ![](https://img.kancloud.cn/20/8d/208d6697b14a95cd91f1e80c0352d5df_725x575.png) html ![](https://img.kancloud.cn/ff/a7/ffa70af5e65c7f13adb6da43ddf37e57_1357x582.png) | ![](https://img.kancloud.cn/78/fb/78fb42ae67f3cffc3b8b012183db928f_1057x453.png) | | | --- | --- | | ![](https://img.kancloud.cn/9c/fc/9cfcedc95ef735a20cd40833559feacc_607x307.png) | ![](https://img.kancloud.cn/52/40/524098ce917a9ff70250c595a0f78fb1_557x268.png) | | 是在他之下套个盒子用背景颜色和百分比的宽width 填满![](https://img.kancloud.cn/9a/ff/9aff00e7e1771bcedc598225147fdfaa_841x652.png) | ![](https://img.kancloud.cn/d2/0c/d20ccc3e80d6e1d27fa68342d719d757_515x140.png) | # 分页制作（翻下一页） ![](https://img.kancloud.cn/b9/26/b926dd4ed384b3bf4680ebe1fb1a0688_1161x348.png) ![](https://img.kancloud.cn/e4/89/e48943844599ca0cc2cec5be385b4cb4_1220x593.png) 1、![](https://img.kancloud.cn/31/59/31590dfc458360d2465ebea10cdb636d_1243x222.png) 2、![](https://img.kancloud.cn/34/df/34dfdc55604d42003508ae2a7ae7f7b5_946x594.png) | ![](https://img.kancloud.cn/ca/f9/caf9a0614458e265eb536b1302e13f72_1156x149.png) | ![](https://img.kancloud.cn/14/06/1406ab3461c96973b86ace2981442f53_1238x597.png)![](https://img.kancloud.cn/50/c0/50c0db8aa454807f9b39ce52351b676e_759x213.png) | | --- | --- | | ![](https://img.kancloud.cn/d1/ab/d1ab0162adffba955f0339099214c555_1277x632.png)![](https://img.kancloud.cn/7d/2b/7d2b1e9db0be8c2085909bf99e0a137c_926x301.png) | ![](https://img.kancloud.cn/2a/d9/2ad9c2b4f5c3f7501a614a843ee84f67_1170x144.png) | | ![](https://img.kancloud.cn/1c/23/1c2395f975a5d33880e8837db0fd0888_1408x226.png) | | | --- | --- | | html![](https://img.kancloud.cn/5e/58/5e587287284411bd88713b8a1f1d6725_589x322.png) | css![](https://img.kancloud.cn/71/7d/717d8de9c7b402fff47772e23303148b_860x513.png) | | ![](https://img.kancloud.cn/15/97/1597190d7560ebf0c7456b2a33432ae2_924x112.png) | ![](https://img.kancloud.cn/0c/69/0c69b1d09798a157de8898835be0e4f7_1005x127.png) | | \--- | \--- | | ![](https://img.kancloud.cn/98/dc/98dc57fe65fcac480448e4a1fb3c95c4_886x782.png) | | # 产品介绍模块 ![](https://img.kancloud.cn/c9/1d/c91db68f5c9c959abff64d0f74698334_1306x727.png) ## 图片简介 | ![](https://img.kancloud.cn/d3/f5/d3f59268047f89e7ffa339dff67451b3_766x798.png) | | | --- | --- | | ![](https://img.kancloud.cn/d3/dc/d3dcdc15f09825f9d65b2c0335b255cf_1310x291.png) | ![](https://img.kancloud.cn/fb/38/fb38a921de3fe98c14702b9488ca0526_1031x375.png) | ## 产品详细信息区 ![](https://img.kancloud.cn/2c/ad/2cad485e8982beabbf6fca6fed348c0e_1090x850.png) | ![](https://img.kancloud.cn/7e/ec/7eec2b6a6e9986c897f93caa9e194758_359x795.png) | | | --- | --- | | ![ ](https://img.kancloud.cn/c0/cc/c0cc3efa8483aa3fc0fb35bb9fa431f1_1074x382.png) | | | ![](https://img.kancloud.cn/e7/18/e718453caafe5fff5d21401cd7cd6d79_779x449.png) | 页面选择 a标签里加 javascript: ;![](https://img.kancloud.cn/39/bc/39bc7c7d4489268df1cda9d9a9a08d3c_903x284.png) |