大家好！
导航栏大家一定都熟悉，那么我们就开门见山，在劈山吧，走起。
导航栏栏，有横排的有竖排的，但是都逃不掉logo或img的组合与超链接的联动
首先我们可以根据需求使用我们需要的代码标签
比如，竖排的布局我们可以优先使用有序标签进行编辑html5的页面，这样的话就事半功倍了
此次下来，就可以节省css的代码量，还可以减少时间的成本，加快工作效率
横排的可以使用无须列表标签精选html5的页面，布局就会变得相对简单
此上要懂得运用标签的特性
然后是整体的布局以及框架，布局很重要，框架要想好，这样的事情必然会使你提高%50以上的效率
让大家见笑了，下面是我的导航栏和布局大体的样式
供参考：
综合导航栏=====》
HTML5代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../index/css/index.css">
<title>导航栏</title>
</head>
<body>
<div class="box_a">
<h1>
全部分类
</h1>
<!-- -->
<ul>
<li>
<a href="#">
<svg id="top" t="1660294952693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10484" width="16" height="16"><path d="M514 512m-492.5 0a492.5 492.5 0 1 0 985 0 492.5 492.5 0 1 0-985 0Z" fill="#DCDDDD" p-id="10485"></path><path d="M511.999 919.098c-54.943 0-108.25-10.766-158.437-31.996-48.476-20.506-92.012-49.861-129.4-87.25-37.389-37.39-66.746-80.926-87.252-129.402-21.233-50.192-31.999-103.505-31.999-158.457 0-54.943 10.766-108.25 31.999-158.439 20.506-48.475 49.863-92.011 87.252-129.4 37.389-37.389 80.925-66.745 129.4-87.253 50.188-21.232 103.495-31.999 158.437-31.999s108.249 10.766 158.439 31.999c48.474 20.508 92.011 49.864 129.399 87.253 37.39 37.389 66.745 80.925 87.252 129.4 21.233 50.189 31.999 103.496 31.999 158.439 0 54.952-10.766 108.264-31.999 158.457-20.507 48.477-49.863 92.014-87.252 129.402s-80.926 66.744-129.399 87.25c-50.188 21.23-103.496 31.996-158.439 31.996z m0-807.794c-220.939 0-400.686 179.747-400.686 400.688 0 220.948 179.747 400.702 400.686 400.702 220.938 0 400.688-179.754 400.688-400.702 0-220.94-179.748-400.688-400.688-400.688z" p-id="10486"></path><path d="M511.999 108.103c223.014 0 403.889 180.875 403.889 403.889 0 223.049-180.875 403.903-403.889 403.903-223.012 0-403.887-180.854-403.887-403.903 0-223.013 180.875-403.889 403.887-403.889z" fill="#31BDEB" p-id="10487"></path><path d="M539.76 958.82H428.441a3.195 3.195 0 0 1-2.327-1.004 3.192 3.192 0 0 1-0.868-2.38l22.008-387.138c-20.971-10.971-38.993-30.93-52.216-57.869-13.793-28.101-21.083-61.355-21.083-96.169 0-90.028 49.169-163.272 109.606-163.272 60.436 0 109.605 73.244 109.605 163.272 0 34.813-7.29 68.063-21.08 96.162-13.218 26.928-31.233 46.884-52.193 57.855l23.062 387.151a3.203 3.203 0 0 1-3.195 3.392z m-107.931-6.402h104.532l-22.983-385.854a3.21 3.21 0 0 1 1.779-3.062c20.202-9.965 38.38-29.819 51.182-55.902 13.361-27.224 20.426-59.5 20.426-93.339 0-42.018-10.901-81.555-30.694-111.327-19.523-29.369-45.274-45.542-72.508-45.542-27.235 0-52.988 16.174-72.511 45.542-19.792 29.772-30.693 69.309-30.693 111.327 0 33.841 7.063 66.121 20.427 93.348 12.806 26.089 30.989 45.947 51.198 55.914a3.199 3.199 0 0 1 1.78 3.052l-21.935 385.843z m233.192-20.94a3.205 3.205 0 0 1-3.193-3.421c0.172-2.489 17.093-249.333 17.093-279.785 0-23.36-9.241-32.854-20.94-44.876-3.073-3.157-6.251-6.422-9.459-10.136-16.095-18.63-20.042-45.067-21.695-87.34-1.623-41.434 21.862-147.713 22.863-152.218a3.203 3.203 0 0 1 3.125-2.507h17.913a3.203 3.203 0 0 1 3.199 3.331c-0.024 0.602-2.445 60.774-3.248 109.826-0.381 22.759 3.134 29.789 5.263 31.955 0.985 1.002 1.848 1.117 2.411 1.117 2.449 0 6.234-2.664 9.419-6.633 4.22-5.3 5.795-30.052 5.795-44.408 0-0.056 0.003-0.113 0.005-0.17l4.894-91.986a3.201 3.201 0 0 1 3.196-3.031h30.935a3.2 3.2 0 0 1 3.195 3.012c0.064 1.096 6.539 109.849 11.312 129.674 2.588 10.776 5.411 13.624 6.543 13.623 0.733 0 2.184-0.89 4.055-3.382 3.11-4.145 4.752-21.444 5.063-31.448l-3.247-108.181a3.198 3.198 0 0 1 0.902-2.325 3.197 3.197 0 0 1 2.297-0.973h17.082a3.203 3.203 0 0 1 3.146 2.602c1.066 5.598 26.112 137.514 25.3 174.874-0.849 39.064-21.196 61.018-40.874 82.248-19.036 20.592-15.37 43.271-15.331 43.496 0.019 0.107 0.032 0.215 0.039 0.321l15.438 219.321 10.517 42.874a3.202 3.202 0 0 1-2.803 3.949l-109.899 10.583a4.09 4.09 0 0 1-0.311 0.014z m-9.628-573.881c-3.603 16.607-23.623 110.917-22.168 148.072 1.597 40.819 5.278 66.2 20.141 83.403 3.084 3.569 6.194 6.765 9.203 9.856 12.21 12.545 22.755 23.381 22.755 49.341 0 28.96-14.63 243.99-16.851 276.457l102.458-9.866-9.7-39.545a3.272 3.272 0 0 1-0.084-0.538L745.7 655.328c-0.389-2.493-3.506-26.61 16.971-48.761 19.737-21.294 38.376-41.405 39.172-78.038 0.735-33.86-21.118-151.856-24.699-170.933h-11.13l3.151 104.979c0.002 0.064 0.002 0.128 0 0.193-0.141 4.652-1.108 28.22-6.346 35.195-2.956 3.941-6.043 5.941-9.173 5.941-7.456 0-10.858-10.575-12.769-18.528-4.507-18.714-10.195-109.624-11.299-127.78h-24.885l-4.727 88.871c-0.003 4.42-0.248 39.594-7.196 48.32-2.187 2.726-7.951 9.039-14.42 9.039-2.613 0-5.025-1.049-6.976-3.032-5.102-5.188-7.424-17.144-7.101-36.549 0.696-42.496 2.604-93.311 3.122-106.648h-12.002z m-349.74 515.264c-0.328 0-0.659-0.051-0.979-0.154l-66.438-21.354a3.203 3.203 0 0 1-2.22-3.156l18.025-534.572a3.203 3.203 0 0 1 3.521-3.076c0.36 0.037 8.889 0.929 15.892 4.442 0.354 0.177 0.72 0.354 1.095 0.535 7.118 3.436 16.865 8.143 43.656 51.551 22.063 35.726 26.478 95.384 30.025 143.319 1.016 13.726 1.975 26.693 3.253 37.834 6 52.318-2.277 77.146-10.16 92.929-7.516 15.063-32.872 30.786-39.767 34.859l7.297 193.521a3.203 3.203 0 0 1-3.2 3.322z m-63.157-26.864l59.786 19.217-7.197-190.876a3.207 3.207 0 0 1 1.625-2.909c0.312-0.175 31.216-17.76 38.883-33.129 7.487-14.992 15.336-38.697 9.528-89.342-1.292-11.269-2.256-24.297-3.277-38.091-3.496-47.24-7.848-106.032-29.087-140.428-25.81-41.819-34.946-46.229-40.992-49.149-0.402-0.194-0.794-0.384-1.179-0.576-3.462-1.737-7.487-2.735-10.267-3.267l-17.823 528.55z" p-id="10488"></path><path d="M257.241 313.732l-18.025 534.572 66.438 21.355-7.37-195.444s31.972-18.047 40.174-34.486c8.201-16.422 15.589-41.042 9.845-91.137-5.745-50.095-4.933-134.673-32.822-179.835-27.873-45.162-36.887-47.618-43.463-50.906-6.556-3.289-14.777-4.119-14.777-4.119z m226.321-59.542c58.595 0 106.404 71.899 106.404 160.071 0 70.822-30.877 131.139-73.392 152.113L539.76 955.62H428.441l22.128-389.227c-42.536-20.976-73.412-81.31-73.412-152.132 0-88.171 47.807-160.071 106.405-160.071z m169.253 100.206s-24.415 109.903-22.79 151.398c1.625 41.533 5.442 67.457 20.919 85.371 15.477 17.915 31.178 26.154 31.178 57.105 0 30.914-17.101 280.006-17.101 280.006l109.9-10.584-10.581-43.139-15.456-219.593s-4.194-24.224 16.138-46.219c20.371-21.977 39.209-42.706 40.022-80.141 0.813-37.452-25.246-174.204-25.246-174.204h-17.082l3.25 108.276s-0.813 26.852-5.703 33.37c-4.879 6.5-11.378 8.958-16.271-11.413-4.896-20.332-11.396-130.234-11.396-130.234h-30.935l-4.894 91.986s0 38.248-6.499 46.412c-6.52 8.123-23.62 21.162-22.791-28.496 0.814-49.659 3.252-109.903 3.252-109.903h-17.914v0.002z" fill="#F3EC9B" p-id="10489"></path></svg>
美食
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660294928059" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7649" width="16" height="16"><path d="M511.9 0C254.7 0 41.1 187.8 0 429.6c66.9 12.9 126.1 23.2 185.2 33.4 128.6 30.9 185.2 15.4 203.2 0 7.7-15.4 23.2-72-41.2-64.3-64.3 7.7-185.2 23.2-177.5-48.9 15.4-79.8 162.1-79.8 275.3-48.9 0 0-23.2-41.2-82.3-48.9-64.3-7.7-97.8-7.7-90-48.9 0-41.2 48.9-64.3 128.6-15.4 56.6 41.2 72 72 113.2 120.9 0 0 195.5 41.2 308.7 120.9 0 0 90 64.3-15.4 128.6-90 30.9-105.5-23.2-283 48.9C355 671.5 177.5 784.7 144 823.2c-10.3 10.3-15.4 20.6-20.6 28.3C218.6 957 357.5 1023.9 509.3 1023.9c285.6 5.1 519.7-226.4 519.7-509.4S794.9 0 511.9 0z" p-id="7650" fill="#f4ea2a"></path></svg>
外卖
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660294886747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6521" width="16" height="16"><path d="M846.336 939.8272 243.4048 939.8272 243.4048 104.6528c0-14.0288 11.3664-25.4976 25.4976-25.4976l480.0512 0c14.0288 0 25.4976 11.3664 25.4976 25.4976l0 775.68c0 11.4688 9.3184 20.7872 20.7872 20.7872s20.7872-9.3184 20.7872-20.7872L816.0256 104.6528c0-36.9664-30.1056-67.072-67.072-67.072L268.8 37.5808c-36.9664 0-67.072 30.1056-67.072 67.072l0 835.2768-30.3104 0c-11.4688 0-20.7872 9.3184-20.7872 20.7872s9.3184 20.7872 20.7872 20.7872l674.9184 0c11.4688 0 20.7872-9.3184 20.7872-20.7872S857.8048 939.8272 846.336 939.8272z" p-id="6522" fill="#d81e06"></path><path d="M455.4752 177.7664c0-19.1488-15.5648-34.7136-34.7136-34.7136l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136l0 75.1616c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136L455.4752 177.7664zM432.3328 253.0304c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L432.3328 253.0304z" p-id="6523" fill="#d81e06"></path><path d="M455.4752 359.0144c0-19.1488-15.5648-34.7136-34.7136-34.7136l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136l0 75.1616c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136L455.4752 359.0144zM432.3328 434.2784c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L432.3328 434.2784z" p-id="6524" fill="#d81e06"></path><path d="M705.2288 178.7904c0-19.1488-15.5648-34.7136-34.7136-34.7136l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136L560.64 253.952c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136L705.2288 178.7904zM682.0864 253.952c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L682.0864 253.952z" p-id="6525" fill="#d81e06"></path><path d="M705.2288 360.0384c0-19.1488-15.5648-34.7136-34.7136-34.7136l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136L560.64 435.2c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136L705.2288 360.0384zM682.0864 435.2c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L682.0864 435.2z" p-id="6526" fill="#d81e06"></path><path d="M420.7616 512.7168l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136L310.8864 622.592c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136l0-75.1616C455.4752 528.2816 439.9104 512.7168 420.7616 512.7168zM432.3328 622.592c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L432.3328 622.592z" p-id="6527" fill="#d81e06"></path><path d="M670.5152 513.6384l-75.1616 0c-19.1488 0-34.7136 15.5648-34.7136 34.7136l0 75.1616c0 19.1488 15.5648 34.7136 34.7136 34.7136l75.1616 0c19.1488 0 34.7136-15.5648 34.7136-34.7136l0-75.1616C705.2288 529.2032 689.5616 513.6384 670.5152 513.6384zM682.0864 623.5136c0 6.3488-5.2224 11.5712-11.5712 11.5712l-75.1616 0c-6.3488 0-11.5712-5.2224-11.5712-11.5712l0-75.1616c0-6.3488 5.2224-11.5712 11.5712-11.5712l75.1616 0c6.3488 0 11.5712 5.2224 11.5712 11.5712L682.0864 623.5136z" p-id="6528" fill="#d81e06"></path></svg>
酒店
<samp>HOT</samp>
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295010719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11735" width="16" height="16"><path d="M770.646926 298.881238a102.325336 102.325336 0 0 1-101.770545-112.928595v-105.358543h33.70229V14.866339A14.866339 14.866339 0 0 1 717.44501 0h3.422079a14.866339 14.866339 0 0 1 14.866339 14.866339v65.727761H805.469169V14.866339A14.866339 14.866339 0 0 1 820.334471 0h3.451114A14.866339 14.866339 0 0 1 838.652962 14.866339v65.727761h33.733399v105.075443a103.476399 103.476399 0 0 1 0.58279 10.888432 102.322225 102.322225 0 0 1-102.322225 102.323263z m98.570383 251.310197L512.854483 192.33119 153.756068 550.191435H53.202953L513.046326 92.102654 969.386736 550.191435h-100.173575z m-354.340689-331.008335l333.28972 331.526831h0.33806v472.091304H180.549906V550.707857h0.725896z m26.608217 709.640597h116.143275v-116.143275h-116.143275v116.143275z m0-167.797997h116.143275v-116.143275h-116.143275v116.143275z m-169.029945 167.797997h116.143275v-116.143275h-116.143275v116.143275z m0-166.69671h116.143275v-116.143275h-116.143275v116.143275z" p-id="11736" fill="#f4ea2a"></path></svg>
民宿
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295281838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19373" id="mx_n_1660295281839" width="16" height="16"><path d="M249.75 391.38l-59.5-120.69a25.5 25.5 0 0 1 24.8-36.41l184.51 12.89" fill="#FFFFFF" p-id="19374"></path><path d="M235.49 398.41L175.9 277.54a41.41 41.41 0 0 1 40.26-59.13l184.5 12.9-2.21 31.69-184.51-12.9a9.6 9.6 0 0 0-9.37 13.63L264 384.35z" fill="#d81e06" p-id="19375" data-spm-anchor-id="a313x.7781069.0.i71" class=""></path><path d="M770.12 390.28l60.25-119.79a25.51 25.51 0 0 0-24.82-36.4l-184.5 13" fill="#FFFFFF" p-id="19376"></path><path d="M784.32 397.43l-28.41-14.3 60.16-119.6a9.61 9.61 0 0 0-9.4-13.58l-184.5 13-2.24-31.73 184.5-13a41.41 41.41 0 0 1 40.3 59.1l-0.16 0.31z" fill="#d81e06" p-id="19377" data-spm-anchor-id="a313x.7781069.0.i72" class=""></path><path d="M510.19 512m-286.95 0a286.95 286.95 0 1 0 573.9 0 286.95 286.95 0 1 0-573.9 0Z" fill="#d81e06" p-id="19378" data-spm-anchor-id="a313x.7781069.0.i60" class=""></path><path d="M510.15 814.85c-49 0-93.62-8-132.59-23.66-37.25-15-69.33-37.05-95.34-65.49-49-53.53-74.85-127.39-74.88-213.6a302.86 302.86 0 0 1 302.76-303h0.1A302.86 302.86 0 0 1 813 511.9c0 86.22-25.82 160.1-74.74 213.66-26 28.46-58.06 50.51-95.3 65.54-39 15.74-83.65 23.73-132.71 23.75z m0-573.89h-0.08a271 271 0 0 0-271 271.12c0 78.14 23 144.59 66.54 192.16 22.77 24.9 51 44.23 83.76 57.45C424.62 775.86 465.23 783 510.14 783h0.14c45 0 85.61-7.22 120.81-21.43 32.8-13.24 61-32.59 83.73-57.5 43.47-47.6 66.44-114.06 66.41-192.19a271 271 0 0 0-271-271z" fill="#d81e06" p-id="19379" data-spm-anchor-id="a313x.7781069.0.i70" class=""></path><path d="M374.92 458.56a42.3 19.23 0 1 0 84.6 0 42.3 19.23 0 1 0-84.6 0Z" fill="#ffffff" p-id="19380" data-spm-anchor-id="a313x.7781069.0.i67" class=""></path><path d="M567.2 458.5a42.3 19.23 0 1 0 84.6 0 42.3 19.23 0 1 0-84.6 0Z" fill="#ffffff" p-id="19381" data-spm-anchor-id="a313x.7781069.0.i68" class=""></path><path d="M524.06 617.2l28.26-36.29a17.54 17.54 0 0 0-13.85-28.32h-56.53a17.54 17.54 0 0 0-13.83 28.33l28.28 36.27a17.53 17.53 0 0 0 27.67 0.01z" fill="#ffffff" p-id="19382" data-spm-anchor-id="a313x.7781069.0.i69" class=""></path><path d="M134.19 523.78l218.23 49.71" fill="#FFCE0C" p-id="19383"></path><path d="M352.43 584.09a10.6 10.6 0 0 1-2.36-0.26l-218.23-49.71a10.6 10.6 0 1 1 4.71-20.67l218.23 49.7a10.6 10.6 0 0 1-2.35 20.94z" fill="#d81e06" p-id="19384" data-spm-anchor-id="a313x.7781069.0.i61" class=""></path><path d="M131.42 621.78l223.82-0.07" fill="#FFCE0C" p-id="19385"></path><path d="M131.42 632.38a10.6 10.6 0 1 1 0-21.2l223.82-0.07a10.6 10.6 0 0 1 0 21.2l-223.82 0.07z" fill="#d81e06" p-id="19386" data-spm-anchor-id="a313x.7781069.0.i62" class=""></path><path d="M134.9 722.43l216.91-55.16" fill="#FFCE0C" p-id="19387"></path><path d="M134.89 733a10.6 10.6 0 0 1-2.61-20.88L349.2 657a10.6 10.6 0 1 1 5.22 20.55l-216.91 55.16a10.81 10.81 0 0 1-2.62 0.29z" fill="#d81e06" p-id="19388" data-spm-anchor-id="a313x.7781069.0.i63" class=""></path><path d="M889.75 523.55l-218.2 49.84" fill="#FFCE0C" p-id="19389"></path><path d="M671.54 584a10.6 10.6 0 0 1-2.35-20.94l218.2-49.84a10.6 10.6 0 0 1 4.72 20.67l-218.2 49.85a10.75 10.75 0 0 1-2.37 0.26z" fill="#d81e06" p-id="19390" data-spm-anchor-id="a313x.7781069.0.i66" class=""></path><path d="M892.58 621.54l-223.82 0.07" fill="#FFCE0C" p-id="19391"></path><path d="M668.76 632.21a10.6 10.6 0 0 1 0-21.2l223.82-0.07a10.6 10.6 0 0 1 0 21.2l-223.82 0.07z" fill="#d81e06" p-id="19392" data-spm-anchor-id="a313x.7781069.0.i65" class=""></path><path d="M889.17 722.2l-216.95-55.03" fill="#FFCE0C" p-id="19393"></path><path d="M889.17 732.8a10.67 10.67 0 0 1-2.61-0.33l-216.95-55a10.6 10.6 0 0 1 5.21-20.56l216.95 55a10.6 10.6 0 0 1-2.6 20.88z" fill="#d81e06" p-id="19394" data-spm-anchor-id="a313x.7781069.0.i64" class=""></path></svg>
猫眼电影
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295399151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20872" width="16" height="16"><path d="M864 816a32 32 0 1 1 0 64H32a32 32 0 1 1 0-64h832zM688.48 144a32 32 0 0 1 25.12 12.16l265.808 336.704c54.768 69.344 42.928 169.968-26.432 224.72A160 160 0 0 1 853.84 752H32a32 32 0 0 1-32-32V176a32 32 0 0 1 32-32h656.48z m-15.488 64H64v480h789.84a96 96 0 0 0 75.344-155.488L900.32 496H480a32 32 0 0 1-32-32v-144a32 32 0 0 1 32-32h256.128l-63.136-80zM352 288a32 32 0 0 1 32 32v144a32 32 0 0 1-32 32h-144a32 32 0 0 1-32-32v-144a32 32 0 0 1 32-32h144z m-32 64h-80v80h80v-80z m464.48 0H512v80h334.032l-61.552-80z" p-id="20873" fill="#1296db"></path></svg>
机票 / 火车票
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295485908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21508" width="16" height="16"><path d="M399.232 313.677824 103.387136 798.600192c-6.754304 11.044864-39.25504 67.928064-17.055744 100.744192 0.09728 0.16384 0.391168 0.641024 0.886784 1.338368-6.554624 7.996416-33.731584 44.645376-18.886656 86.208512 2.224128 6.226944 8.08448 10.108928 14.339072 10.108928 1.698816 0 3.428352-0.28672 5.12-0.89088 7.918592-2.828288 12.045312-11.54048 9.217024-19.459072-10.25536-28.717056 13.794304-56.72448 14.267392-57.268224 0.477184-0.5376 0.892928-1.10592 1.28-1.687552 4.88448 1.391616 10.530816 2.274304 17.021952 2.274304 15.973376-0.021504 37.001216-5.312512 64.167936-21.285888L679.13728 569.18016C533.548032 567.26528 413.920256 455.892992 399.232 313.677824z" p-id="21509" fill="#1afa29"></path><path d="M682.896384 20.911104c-145.171456 0-263.282688 118.089728-263.282688 263.26016s118.111232 263.282688 263.282688 263.282688 263.26016-118.111232 263.26016-263.282688S828.06784 20.911104 682.896384 20.911104z" p-id="21510" fill="#1afa29"></path></svg>
休闲娱乐 / KTV
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295577279" class="icon" viewBox="0 0 1174 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22881" id="mx_n_1660295577280" data-spm-anchor-id="a313x.7781069.0.i90" width="16" height="16"><path d="M970.640199 523.434243v337.94541c0 73.687345-58.441687 134.669975-132.129033 134.669975H337.945409c-73.687345 0-132.129032-60.98263-132.129032-134.669975V523.434243H30.491315l559.007444-495.483871 559.007444 495.483871h-177.866004z" fill="#1afa29" p-id="22882" data-spm-anchor-id="a313x.7781069.0.i88" class="selected"></path><path d="M838.511166 1021.459057H337.945409c-86.39206 0-157.538462-71.146402-157.538461-160.079404V548.843672H30.491315c-10.163772 0-20.327543-7.622829-22.868486-15.245657-2.540943-10.163772 0-20.327543 7.622829-27.950372L574.253102 10.163772c10.163772-7.622829 22.868486-7.622829 33.032258 0l559.007444 495.483871c7.622829 7.622829 10.163772 17.7866 7.622829 27.950372-2.540943 10.163772-12.704715 15.245658-22.868487 15.245657h-149.915632v312.535981c-5.081886 88.933002-76.228288 160.079404-162.620348 160.079404zM96.555831 498.024814H203.275434c15.245658 0 25.409429 10.163772 25.40943 25.409429v337.94541c0 60.98263 48.277916 109.260546 106.719603 109.260546H838.511166c58.441687 0 106.719603-48.277916 106.719603-109.260546V523.434243c0-15.245658 10.163772-25.409429 25.40943-25.409429h109.260545L589.498759 63.523573 96.555831 498.024814z" fill="#1afa29" p-id="22883" data-spm-anchor-id="a313x.7781069.0.i89" class=""></path><path d="M589.498759 487.861042c-55.900744-129.588089-210.898263-99.096774-213.439206 50.818859 0 83.851117 73.687345 114.342432 124.506204 147.37469 48.277916 33.032258 83.851117 76.228288 88.933002 94.014888 5.081886-17.7866 43.19603-63.523573 88.933003-96.555831 48.277916-35.573201 124.506203-63.523573 124.506203-147.37469-2.540943-149.915633-162.620347-172.784119-213.439206-48.277916z" fill="#ffffff" p-id="22884" data-spm-anchor-id="a313x.7781069.0.i87" class=""></path></svg>
生活服务
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295673857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24072" width="16" height="16"><path d="M811.008 770.048q-9.216 1.024-19.456 3.584t-18.432 5.632q-10.24 4.096-19.456 9.216-2.048-11.264 1.024-22.528 2.048-10.24 8.192-21.504t20.48-22.528q25.6-17.408 60.928-21.504t66.048 8.192 48.128 42.496 6.144 82.432q-9.216 41.984-37.888 76.288t-76.288 52.736-112.128 17.408-144.384-28.672q-55.296-19.456-87.04-48.64t-47.616-59.904-18.944-57.856-1.024-42.496 12.8-37.888 22.016-43.008q13.312-24.576 29.696-50.176 8.192-13.312 14.336-25.6 5.12-11.264 8.192-22.528t0-21.504q-10.24-26.624-25.6-40.96t-29.696-21.504q-17.408-7.168-35.84-8.192-25.6-1.024-47.104-6.144-18.432-5.12-36.352-13.312t-26.112-25.6q-9.216-17.408-7.68-35.84t7.168-36.352 11.776-34.304 6.144-28.672q0-32.768-34.816-46.08-45.056-11.264-67.584-9.216t-31.744 8.704-9.216 12.288 0 1.536q0 14.336 3.584 36.864t-3.584 43.008q-5.12 12.288-13.824 23.04t-14.848 19.968q-8.192 13.312-13.824 23.04t-4.608 12.8q2.048 4.096 9.728 5.632t11.776 3.584q5.12 3.072 6.656 9.728t7.68 11.776q10.24 10.24 12.288 17.408 1.024 4.096 0 7.168 0 8.192 1.024 19.456 1.024 9.216 2.56 20.992t4.608 23.04q6.144 26.624 14.336 37.376t19.968 13.312 28.16 0.512 39.936-2.048q17.408 1.024 35.84 1.024t32.768 8.192 22.528 22.528 13.312 28.672q4.096 17.408 6.144 35.84 3.072 23.552 3.072 47.104 0 20.48-2.048 44.544t-10.24 47.616q-17.408 48.128-51.2 71.68t-72.704 30.72q-40.96 8.192-77.824 2.048t-66.56-20.48-48.64-34.816-23.04-40.96q-3.072-16.384-0.512-32.256t7.68-30.72 12.288-28.16 12.288-25.6q9.216-19.456 11.264-34.304t0-25.088q-2.048-11.264-8.192-20.48-9.216-10.24-19.456-21.504-8.192-10.24-17.408-22.016t-15.36-26.112q-20.48-41.984-21.504-77.824 0-15.36 0.512-37.376t7.68-41.472q6.144-16.384 30.208-43.52t53.76-70.144q6.144-12.288 10.752-25.6t7.168-24.576 3.584-19.456 1.024-11.264q0-10.24-1.024-22.528t-2.048-25.6q0-6.144-1.024-20.48t2.56-31.744 12.8-35.328 28.672-32.256q15.36-11.264 36.352-15.872t39.424-5.632q21.504-1.024 45.056 1.024 19.456-7.168 40.96-11.264 18.432-4.096 43.008-7.168t51.2-3.072q89.088 2.048 149.504 27.136t99.328 61.44 59.392 78.848 29.696 78.848 10.752 61.44 1.536 26.112q1.024 17.408 12.288 31.744t26.112 29.184 30.72 30.208 27.136 33.792q21.504 38.912 23.552 69.632t-8.192 54.272-28.672 40.448-37.376 28.16-34.816 17.408-19.968 8.192q-33.792 15.36-51.712 33.792t-24.064 36.864-2.56 35.84 14.848 29.696q7.168 9.216 18.432 15.36t23.04 9.216 22.528 3.584 17.92-1.536q16.384-3.072 27.136-14.848t12.8-25.088-5.632-22.528-27.136-8.192z" p-id="24073" fill="#d4237a"></path></svg>
丽人 / 美发 / 医学美容
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295718102" class="icon" viewBox="0 0 1113 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25052" data-spm-anchor-id="a313x.7781069.0.i100" width="16" height="16"><path d="M801.391304 0l311.652174 222.608696-255.220869 193.936695A376.765217 376.765217 0 0 1 934.956522 645.565217c0 209.007304-169.427478 378.434783-378.434783 378.434783S178.086957 854.572522 178.086957 645.565217c0-86.060522 28.716522-165.420522 77.133913-228.997565L0 222.608696 311.652174 0h489.73913z m-14.469565 470.438957L556.521739 645.565217l-230.4-175.12626A288.122435 288.122435 0 0 0 267.130435 645.565217c0 159.833043 129.558261 289.391304 289.391304 289.391305s289.391304-129.558261 289.391304-289.391305c0-65.825391-21.971478-126.508522-58.991304-175.12626zM779.130435 89.043478H333.913043l-178.086956 133.565218 400.695652 311.652174 400.695652-311.652174-178.086956-133.565218z m-311.652174 133.565218l66.782609 244.869565-222.608696-244.869565h155.826087z m333.913043 0L578.782609 467.478261l66.782608-244.869565h155.826087z" fill="#d4237a" p-id="25053"></path></svg>
结婚 / 婚纱摄影 / 婚宴
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295800578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25765" width="16" height="16"><path d="M965.40416 342.76608c-19.50976-52.24704-47.744-100.41472-83.92064-143.16288-18.26688-21.5872-50.57536-24.27392-72.15872-6.0096-21.58464 18.26688-24.2752 50.5728-6.00832 72.15872C861.4336 334.42816 893.44 421.88032 893.44 512c0 210.32576-171.11424 381.44-381.44 381.44-210.32704 0-381.44-171.11424-381.44-381.44 0-210.32704 171.11296-381.44 381.44-381.44 60.48896 0 118.30784 13.72672 171.85152 40.8 25.2288 12.75648 56.03328 2.64704 68.7936-22.58816 12.76032-25.23392 2.64576-56.03456-22.58816-68.7936C662.05312 45.5936 588.68992 28.16 512 28.16c-65.29536 0-128.66432 12.8-188.34688 38.04416-57.62176 24.37248-109.36064 59.2512-153.7792 103.66976-44.41856 44.41856-79.29856 96.15744-103.66976 153.77792C40.96 383.3344 28.16 446.70464 28.16 512c0 65.29536 12.8 128.6656 38.04416 188.34688 24.37248 57.62176 59.2512 109.36064 103.66976 153.7792s96.15744 79.29856 153.7792 103.66976C383.33568 983.04 446.70464 995.84 512 995.84c65.29536 0 128.6656-12.8 188.34816-38.04416 57.62176-24.3712 109.36064-59.2512 153.77792-103.66976 44.41856-44.41856 79.29856-96.15744 103.66976-153.7792C983.04 640.6656 995.84 577.29536 995.84 512 995.84 453.79328 985.6 396.85504 965.40416 342.76608z" p-id="25766" data-spm-anchor-id="a313x.7781069.0.i107" class="" fill="#ffffff"></path><path d="M488.19072 509.40032c8.89344 6.3232 16.7872 14.05056 25.18656 21.07648 7.09376 5.9328 13.78176 12.576 21.61536 17.30048 3.77088 2.27456 10.8544 2.73792 14.5024 0.64512 5.0752-2.90944 1.5168-8.80768-0.50816-13.00992-18.9504-39.32288-41.36704-76.032-76.65152-103.3408-15.61216-12.0832-32.6976-21.20448-51.31776-27.264-21.76-7.07968-44.12928-8.31616-66.85312-5.41184-16.7552 2.14144-32.81152 6.55744-48.09472 13.54112-27.71584 12.66304-51.44704 30.6368-71.73632 53.4912-16.86144 18.99136-31.87328 39.01824-41.05472 62.88768-4.81408 12.51328-10.16064 25.04448-8.70016 38.91328 0.30208 2.87104 1.74848 6.78016 3.90272 7.96416 2.07104 1.13792 6.01344-0.06016 8.63616-1.29024 2.76736-1.29664 5.21088-3.60064 7.33952-5.88928 15.00032-16.1216 29.26592-32.992 45.0688-48.27776 7.76576-7.51232 18.05824-12.608 27.69664-17.90976 5.1712-2.84416 9.15584-0.34304 10.92736 5.42208 0.78592 2.5536 1.1072 5.31968 1.2032 8.0064 0.91648 25.6448 1.15968 51.33056 2.80192 76.92672 1.03168 16.07424 3.21536 32.20352 6.4832 47.97568 6.85568 33.08288 16.8832 65.248 33.8368 94.72128 4.5568 7.92192 11.24096 14.62144 16.94848 21.8816 1.70624 0 3.41376 0 5.12 0 7.0272-3.8592 9.65376-9.344 6.36416-17.06752-0.23296-0.54912-0.07168-1.26592-0.08832-1.90592-0.4288-16.77056-1.09312-33.53856-1.14688-50.3104-0.01664-5.34656 0.97792-10.8864 2.5664-16.01024 3.88224-12.51584 14.72-17.5616 27.52128-13.61664 14.29888 4.40448 25.45536 13.66144 36.064 23.56096 18.47296 17.24032 36.35328 35.12064 55.0336 52.12928 9.85216 8.97024 21.97376 14.56256 34.9504 17.8048 7.57504 1.89312 11.58272-2.97728 8.98176-10.53184-0.59136-1.71648-1.4336-3.4304-2.51264-4.8832-11.36256-15.3216-23.33696-30.21952-34.0992-45.94816-21.85216-31.93856-41.95328-64.96384-45.89696-104.63488-2.25664-22.69696-2.5984-45.6192 7.73248-66.9952C458.8352 501.10592 471.59936 497.60128 488.19072 509.40032z" p-id="25767" data-spm-anchor-id="a313x.7781069.0.i108" class="" fill="#d4237a"></path><path d="M788.30592 598.496c17.96864-14.26816 38.83648-25.15328 51.36-45.536 0-3.41376 0-6.82624 0-10.24-6.19008-6.80448-12.84224-4.43008-19.85664-1.36576-17.62816 7.70048-35.2704 15.39584-53.1072 22.592-37.8112 15.2512-77.28128 21.01632-117.90336 19.90016-9.37856-0.25728-18.77504 0.1344-28.15488-0.09472-7.17824-0.17536-14.3424-0.90624-21.51808-1.30688-15.19744-0.8512-30.39232-1.84576-45.60256-2.33984-4.22016-0.13696-7.65568 2.81728-6.63168 7.31904 0.82432 3.61344 2.79424 7.74784 5.59104 9.9712 6.19008 4.92032 12.78336 9.80992 19.99616 12.85888 14.79424 6.25408 29.96096 11.7184 45.23392 16.71168 17.50528 5.72288 22.03776 13.61792 22.2464 31.0976 0.19584 16.51968 0.63488 32.91392 3.93856 49.17376 2.8544 14.05312 6.49344 27.7248 15.5328 39.25632 3.27296 4.17664 7.60832 7.05152 13.12128 5.62304 5.73312-1.48608 5.72544-6.41408 5.78304-11.2768 0.0448-3.75552 0.5632-7.54176 1.25056-11.24352 4.50304-24.29312 25.56416-34.77376 48.0128-24.82944 17.09824 7.57504 24.76672 22.4768 31.51104 38.28736 1.65632 3.88096 3.02464 7.08224 8.30592 7.0464 5.29792-0.03584 6.90944-3.16288 8.1216-7.21152 4.81664-16.1024 2.31296-32.13312-0.85376-48.05248-2.85056-14.3296-6.49088-28.50048-9.39648-42.81856C760.61056 628.9664 771.29728 612.00128 788.30592 598.496z" p-id="25768" data-spm-anchor-id="a313x.7781069.0.i110" class="" fill="#d4237a"></path><path d="M359.5008 355.89248c14.90304 14.14528 32.86656 21.24544 53.8432 20.40448 12.91648-0.51584 24.4032-5.24672 32.3584-14.46528 15.42656-17.8752 22.912-39.02976 20.1408-63.20256-4.33024-37.76896-44.73984-61.19168-80.7488-50.27584-27.08992 8.21248-45.73312 35.77984-44.50944 61.84576C339.78496 328.36992 346.64576 343.69024 359.5008 355.89248z" p-id="25769" data-spm-anchor-id="a313x.7781069.0.i109" class="" fill="#d4237a"></path><path d="M683.92064 567.99488c30.25152 2.83904 54.8288-18.13248 54.49856-49.54496 1.82272-30.82112-31.03744-60.55168-65.56416-48.4992-15.87968 5.54368-28.16256 15.91808-35.33568 31.22304-8.44416 18.0096-7.4816 34.69056 7.96288 50.17984C656.19072 562.09792 669.6192 566.65216 683.92064 567.99488z" p-id="25770" data-spm-anchor-id="a313x.7781069.0.i111" class="" fill="#d4237a"></path></svg>
亲子 / 儿童乐园 / 幼教
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660295924641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32935" width="16" height="16"><path d="M293.7 476.8v70.3c0 1.1 0.9 2 2 2h431.9c1.1 0 2-0.9 2-2v-70.3c0-1.1-0.9-2-2-2H295.7c-1.2 0-2 0.9-2 2z" fill="#1296db" p-id="32936" data-spm-anchor-id="a313x.7781069.0.i124" class=""></path><path d="M166.4 661.1h-83c-1.1 0-2-0.9-2-2V364.9c0-1.1 0.9-2 2-2h83c1.1 0 2 0.9 2 2v294.3c0 1-0.9 1.9-2 1.9z" fill="#1296db" p-id="32937" data-spm-anchor-id="a313x.7781069.0.i117" class="selected"></path><path d="M156.9 678.3h-64c-15.8 0-28.7-12.9-28.7-28.7V374.3c0-15.8 12.9-28.7 28.7-28.7H157c15.8 0 28.7 12.9 28.7 28.7v275.3c-0.1 15.9-12.9 28.7-28.8 28.7z m-58.3-34.4h52.6V380.1H98.6v263.8z" fill="#1296db" p-id="32938" data-spm-anchor-id="a313x.7781069.0.i121" class=""></path><path d="M293.6 730H170.4c-1.1 0-2-0.9-2-2V296c0-1.1 0.9-2 2-2h123.1c1.1 0 2 0.9 2 2v432c0.1 1.1-0.8 2-1.9 2z" fill="#1296db" p-id="32939" data-spm-anchor-id="a313x.7781069.0.i116" class="selected"></path><path d="M284.1 747.2H179.9c-15.8 0-28.7-12.9-28.7-28.7v-413c0-15.8 12.9-28.7 28.7-28.7h104.2c15.8 0 28.7 12.9 28.7 28.7v413c0 15.8-12.9 28.7-28.7 28.7z m-98.5-34.4h92.7V311.2h-92.7v401.6z" fill="#1296db" p-id="32940" data-spm-anchor-id="a313x.7781069.0.i120" class=""></path><path d="M856.8 661.1h83c1.1 0 2-0.9 2-2V364.9c0-1.1-0.9-2-2-2h-83c-1.1 0-2 0.9-2 2v294.3c0 1 0.9 1.9 2 1.9z" fill="#1296db" p-id="32941" data-spm-anchor-id="a313x.7781069.0.i119" class="selected"></path><path d="M930.4 678.3h-64.1c-15.8 0-28.7-12.9-28.7-28.7V374.3c0-15.8 12.9-28.7 28.7-28.7h64.1c15.8 0 28.7 12.9 28.7 28.7v275.3c-0.1 15.9-12.9 28.7-28.7 28.7zM872 643.9h52.6V380.1H872v263.8z" fill="#1296db" p-id="32942" data-spm-anchor-id="a313x.7781069.0.i123" class=""></path><path d="M729.7 730h123.1c1.1 0 2-0.9 2-2V296c0-1.1-0.9-2-2-2H729.7c-1.1 0-2 0.9-2 2v432c0 1.1 0.9 2 2 2z" fill="#1296db" p-id="32943" data-spm-anchor-id="a313x.7781069.0.i118" class="selected"></path><path d="M843.4 747.2H739.2c-15.8 0-28.7-12.9-28.7-28.7v-413c0-15.8 12.9-28.7 28.7-28.7h104.2c15.8 0 28.7 12.9 28.7 28.7v413c-0.1 15.8-12.9 28.7-28.7 28.7z m-98.5-34.4h92.7V311.2h-92.7v401.6z" fill="#1296db" p-id="32944" data-spm-anchor-id="a313x.7781069.0.i122" class=""></path></svg>
运动健身 / 健身中心
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660296025185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34255" data-spm-anchor-id="a313x.7781069.0.i129" width="16" height="16"><path d="M842.091 194H815v70h27.091C857.606 264 870 276.977 870 292.491v143.322C870 451.074 854.927 454 842.091 454H413v224h70V525h359.091c25.904 0 49.132-7.544 66.765-21.455C929.446 487.301 941 463.124 941 435.813V292.491C941 238.19 896.392 194 842.091 194z" fill="#1afa29" p-id="34256" data-spm-anchor-id="a313x.7781069.0.i131" class=""></path><path d="M815 126.308C815 91.344 785.882 63 749.717 63H143.849C107.684 63 78 91.344 78 126.308v200.475C78 361.747 107.684 390 143.849 390h605.868C785.882 390 815 361.747 815 326.783V126.308z" fill="#1afa29" p-id="34257" data-spm-anchor-id="a313x.7781069.0.i130" class=""></path><path d="M393.317 678C365.462 678 343 698.482 343 724.461V914.58c0 25.979 22.462 47.42 50.317 47.42h109.277C530.448 962 553 940.559 553 914.58V724.461C553 698.482 530.448 678 502.594 678H393.317z" fill="#1afa29" p-id="34258" data-spm-anchor-id="a313x.7781069.0.i132" class=""></path></svg>
家装 / 建材 / 家居
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660296110922" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37332" data-spm-anchor-id="a313x.7781069.0.i144" width="16" height="16"><path d="M847.644444 1024H150.755556c-48.355556-5.688889-88.177778-45.511111-93.866667-93.866667V93.866667C62.577778 45.511111 102.4 8.533333 150.755556 0h466.488888l327.111112 278.755556v651.377777c-8.533333 48.355556-48.355556 88.177778-96.711112 93.866667z m0-696.888889h-184.888888c-25.6-2.844444-42.666667-22.755556-45.511112-45.511111V93.866667H196.266667c-25.6 0-45.511111 19.911111-45.511111 45.511111v745.244444c5.688889 22.755556 22.755556 42.666667 45.511111 45.511111h605.866666c25.6-2.844444 45.511111-22.755556 45.511111-45.511111V327.111111z m-546.133333 512c-5.688889 0-8.533333-5.688889-8.533333-8.533333 0-2.844444 2.844444-8.533333 5.688889-8.533334C429.511111 768 571.733333 739.555556 711.111111 733.866667v2.844444c11.377778 0 25.6-2.844444 36.977778-2.844444v5.688889c-142.222222 14.222222-281.6 42.666667-415.288889 85.333333-8.533333 8.533333-19.911111 11.377778-31.288889 14.222222zM625.777778 676.977778c-14.222222 0-28.444444-2.844444-36.977778-14.222222s-17.066667-22.755556-17.066667-36.977778c0-39.822222 11.377778-76.8 36.977778-108.088889 22.755556-31.288889 56.888889-54.044444 93.866667-68.266667 14.222222 0 25.6 8.533333 31.288889 19.911111-2.844444 2.844444-5.688889 5.688889-8.533334 5.688889 14.222222 5.688889 19.911111 17.066667 19.911111 31.288889 2.844444 79.644444-48.355556 150.755556-119.466666 170.666667z m76.8-182.044445c-5.688889 2.844444-14.222222 8.533333-19.911111 14.222223-2.844444 0-2.844444-2.844444-2.844445-5.688889-42.666667 25.6-71.111111 71.111111-73.955555 119.466666 0 5.688889 2.844444 25.6 11.377777 22.755556 14.222222-5.688889 25.6-11.377778 34.133334-22.755556l28.444444-31.288889c17.066667-22.755556 28.444444-51.2 34.133334-79.644444 5.688889-8.533333-2.844444-14.222222-11.377778-17.066667z m-162.133334-199.111111H201.955556c-11.377778 0-19.911111-8.533333-19.911112-19.911111 0-5.688889 2.844444-11.377778 5.688889-14.222222 2.844444-5.688889 8.533333-8.533333 14.222223-8.533333H540.444444c5.688889 0 11.377778 2.844444 14.222223 5.688888 2.844444 2.844444 5.688889 8.533333 5.688889 14.222223s-2.844444 11.377778-5.688889 14.222222-8.533333 8.533333-14.222223 8.533333zM201.955556 338.488889H369.777778c5.688889 0 11.377778 2.844444 14.222222 5.688889s5.688889 8.533333 5.688889 14.222222-2.844444 11.377778-5.688889 14.222222-8.533333 5.688889-14.222222 5.688889H201.955556c-11.377778 0-19.911111-8.533333-19.911112-19.911111 0-5.688889 2.844444-11.377778 5.688889-14.222222 2.844444-2.844444 8.533333-5.688889 14.222223-5.688889z m108.088888 196.266667l-31.288888 14.222222c-2.844444 2.844444-5.688889 2.844444-8.533334 2.844444-2.844444 0-2.844444-5.688889-2.844444-8.533333 0-8.533333 5.688889-14.222222 14.222222-17.066667 17.066667-14.222222 34.133333-25.6 54.044444-34.133333 8.533333 2.844444 14.222222 11.377778 17.066667 19.911111 0 8.533333 0 8.533333-39.822222 99.555556-14.222222 28.444444-25.6 59.733333-28.444445 91.022222 0 2.844444 2.844444 8.533333 2.844445 11.377778v2.844444l-2.844445 2.844444c-2.844444 0-5.688889 0-5.688888-2.844444-14.222222 0-25.6-8.533333-28.444445-22.755556 0-22.755556 5.688889-48.355556 14.222222-68.266666 11.377778-31.288889 28.444444-59.733333 45.511111-91.022222z m250.311112-2.844445c5.688889 76.8-42.666667 145.066667-116.622223 164.977778-14.222222 0-28.444444-2.844444-36.977777-14.222222-11.377778-8.533333-17.066667-22.755556-17.066667-36.977778 0-39.822222 11.377778-76.8 36.977778-108.088889 22.755556-31.288889 56.888889-54.044444 93.866666-68.266667 14.222222 0 25.6 8.533333 31.288889 19.911111-2.844444 2.844444-5.688889 5.688889-8.533333 5.688889 8.533333 8.533333 17.066667 22.755556 17.066667 36.977778z m-39.822223-17.066667c-5.688889 2.844444-14.222222 8.533333-19.911111 14.222223-2.844444 0-2.844444-2.844444-2.844444-5.688889-42.666667 25.6-71.111111 71.111111-73.955556 119.466666 0 5.688889 2.844444 25.6 11.377778 22.755556 14.222222-5.688889 25.6-11.377778 34.133333-22.755556l28.444445-31.288888c17.066667-22.755556 28.444444-51.2 34.133333-79.644445 5.688889-8.533333-2.844444-14.222222-11.377778-17.066667z m-258.844444 273.066667c130.844444-54.044444 273.066667-82.488889 412.444444-88.177778v2.844445c14.222222 0 25.6-2.844444 36.977778-2.844445v5.688889c-142.222222 14.222222-281.6 42.666667-415.288889 85.333334-11.377778 5.688889-19.911111 8.533333-31.288889 11.377777h-2.844444c-2.844444 0-5.688889-2.844444-5.688889-8.533333l5.688889-5.688889z" fill="#1afa29" p-id="37333" data-spm-anchor-id="a313x.7781069.0.i143" class=""></path></svg>
学习培训 / 音乐培训
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660296153190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37733" width="16" height="16"><path d="M885.3 362.7h-112c0-123.5-117.2-224-261.3-224s-261.3 100.5-261.3 224h-112c-41.3 0-74.7 33.4-74.7 74.7v448h896v-448c0-41.3-33.4-74.7-74.7-74.7z m-186.6 336h-112v112H437.3v-112h-112V549.3h112v-112h149.3v112h112v149.4h0.1z m-373.4-336c0-82.4 83.7-149.3 186.7-149.3 102.9 0 186.7 67 186.7 149.3H325.3z" p-id="37734" fill="#1296db"></path></svg>
医疗健康 / 宠物 / 爱车
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
<li>
<a href="#">
<svg id="top" t="1660296318976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39177" width="16" height="16"><path d="M748.5 906.2H334.6c-11 0-20-9-20-20s9-20 20-20h413.9c11 0 20 9 20 20s-9 20-20 20z" fill="#1afa29" p-id="39178"></path><path d="M541.5 878c-11 0-20-9-20-20V486.2c0-11 9-20 20-20s20 9 20 20V858c0 11-8.9 20-20 20z" fill="#1afa29" p-id="39179"></path><path d="M346.5 306l195 182.8L736.6 306z" fill="#1afa29" p-id="39180"></path><path d="M541.5 508.8c-4.9 0-9.8-1.8-13.7-5.4L244.4 237.7c-6-5.6-7.9-14.3-4.9-21.9 3-7.6 10.4-12.6 18.6-12.6H825c8.2 0 15.6 5 18.6 12.6 3 7.6 1.1 16.3-4.9 21.9L555.2 503.4c-3.8 3.6-8.7 5.4-13.7 5.4zM308.7 243.1l232.9 218.3 232.9-218.3H308.7z" fill="#1afa29" p-id="39181"></path><path d="M746 136.1c21.2 23.6-23.6 85.3-52.7 85.3s-74.5-61.2-52.7-85.3c20.6-22.9 52.7 12.1 52.7 12.1s32.1-34.9 52.7-12.1z" fill="#1afa29" p-id="39182"></path><path d="M693.3 231.5c-23.8 0-50.9-27.8-62.3-53.5-8.9-19.9-8.1-37.1 2.2-48.5 6.5-7.2 14.8-11 23.9-11.1 14.5-0.1 28.1 9.2 36.2 16.1 8.1-6.8 21.6-16.1 36-16.1h0.2c9.2 0 17.5 3.9 23.9 11.1 10.1 11.2 10.8 28.4 1.9 48.4-11.5 25.7-38.5 53.6-62 53.6z m-36.1-93.1h-0.1c-3.5 0-6.4 1.4-9.2 4.5-6.5 7.2-1.3 21.3 1.2 27 9.4 21 31.2 41.6 44.1 41.6 13 0 34.2-20.3 43.8-41.7 5.3-12 5.9-22 1.5-26.9-2.7-3-5.6-4.4-9.2-4.5-10.9-0.1-24.8 12.3-28.8 16.6-1.9 2-4.6 3.2-7.3 3.2-2.8 0-5.5-1.2-7.3-3.2-4-4.3-17.8-16.6-28.7-16.6z" fill="#1afa29" p-id="39183"></path></svg>
酒店 / 密室逃脱
<svg id="bootm" t="1660297766202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1776" width="16" height="16"><path d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z" p-id="1777" fill="#2c2c2c"></path><path d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z" p-id="1778" fill="#2c2c2c"></path></svg>
</a>
</li>
</ul>
</div>
</body>
</html>以上的想法是此板块细分是行板块，而且行板块内部是没必要在细分的了
就使用超级标签a标签将整体包裹
在设置超级标签，然后将列表标签优化即可
在结尾添加鼠标反即可
当然css样式里是有盒子以及整体布局和细化布局的
CSS样式
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.box_a{
padding: 2px 4px;
width: 255px;
border: 1px solid rgb(128, 128, 128);
}
a{
width: 242px;
height: 20px;
color: rgb(141, 141, 141);
float: left;
display: block;
padding: 3px 0px;
}
svg{
margin-top: 3px;
}
li{
padding: 5px 7px;
width: 258px;
height: 36px;
display: block;
box-sizing: border-box;
}
#top{
display: block;
float: left;
margin-right: 5px;
}
#bootm{
display: block;
float: right;
}
a:hover{
color: rgb(250, 3, 3);
}
h1{
font-size: 18px;
display: block;
margin: 4px auto 8px 6px;
}以下是美食的导航栏
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../美食/css/index.css">
<title>美食今日推荐</title>
</head>
<body>
<!-- 框架 -->
<div class="box">
<!-- 标题 -->
<div class="box_main">
<h1><samp>SHOP</samp> 今日推荐</h1>
<img src="../美食/img/more.gif" alt="MORE >">
</div>
<!-- 内容-板块 -->
<div class="box_zp">
<img class="mm" src="../美食/img/img9.gif" alt="鸡腿">
<img id="sh" src="../美食/img/shen.png" alt="省">
<div class="box_zp_n">
<a href="#">汉来国际美食百货</a>
<p>口味：创意中餐</p>
<span>区域：朝阳/CBD</span>
</div>
</div>
<!-- 1 -->
<div class="box_zp">
<img class="mm" src="../美食/img/img8.gif" alt="鸡腿">
<!-- <img id="sh" src="../美食/img/shen.png" alt="省"> -->
<div class="box_zp_n">
<a href="#">汉来国际美食百货</a>
<p>口味：创意中餐</p>
<span>区域：朝阳/CBD</span>
</div>
</div>
<!-- 2 -->
<div class="box_zp">
<img class="mm" src="../美食/img/img7.gif" alt="鸡腿">
<!-- <img id="sh" src="../美食/img/shen.png" alt="省"> -->
<div class="box_zp_n">
<a href="#">汉来国际美食百货</a>
<p>口味：创意中餐</p>
<span>区域：朝阳/CBD</span>
</div>
</div>
<!-- 3 -->
<div class="box_zp">
<img class="mm" src="../美食/img/img7.gif" alt="鸡腿">
<!-- <img id="sh" src="../美食/img/shen.png" alt="省"> -->
<div class="box_zp_n">
<a href="#">汉来国际美食百货</a>
<p>口味：创意中餐</p>
<span>区域：朝阳/CBD</span>
</div>
</div>
</div>
</body>
</html>css样式
/*前声明*/
*{
margin: 0;
padding: 0;
}
a{
color: rgb(255, 0, 0);
font-weight: 900;
}
/*主盒子*/
.box{
width: 296px;
height: 386px;
border:1px solid rgb(91,139,217);
border-radius: 10px;
margin: 40px 40px;
}
/*首盒子的内容*/
h1{
font-size: 19px;
margin: 15px auto 2px 20px;
display: block;
float: left;
}
h1>samp{
color: rgb(240, 28, 28);
}
h1+img{
margin: 19.5px auto auto auto;
float: right;
}
/*首盒子*/
.box_main{
width: 273px;
height: 46px;
}
/*图和内容区*/
.box_zp{
margin: auto;
margin: 10px 32px 8px 16px;
width: 270px;
height: 72px;
}
/*定位*/
#sh{
position: relative;
right: 38px;
bottom: 38px;
}
.mm{
width: 90px;
height: 70px;
}
/*区块化-内容*/
.box_zp_n{
float: right;
font-size: 14px;
width: 125px;
height: 70px;
display: block;
}
而美食导航将板块分成2个
一个头，一个尾，头内有h1和gif图，然后我将尾部模块化了，之后想要加多少行即可复制
<-- 1 -->此标记下的内容，粘贴下一行即可，不要忘了加大盒子的高度哦。
图片可以自己改名字
7957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
