纯前端代码实现美团外卖页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>美团外卖送啥都快</title> 6 <link rel="stylesheet" type="text/css" href="css/meituan.css" /> 7 </head> 8 <body> 9 <!-- 头部 start --> 10 <div class="mt-head"> 11 <div class="h-content"> 12 <!-- 头部居中外框 start --> 13 <div class="h-centerOuter"> 14 15 <div class="mt-logo"> 16 <img width="190px" src="img/meituan.png"> 17 </div> 18 19 <!-- 头部导航栏 --> 20 <div class="h-list"> 21 22 <div class="h-list-1"><a href=""> 23 <p>首页</p> 24 </a> </div> 25 <div class="h-list-2"><a href=""> 26 <p>入住加盟</p> 27 </a> </div> 28 <div class="h-list-3"><a href=""> 29 <p>开放平台</p> 30 </a> </div> 31 <div class="h-list-4"><a href=""> 32 <p>社会责任</p> 33 </a> </div> 34 <div class="h-list-5"><a href=""> 35 <p>点外卖</p> 36 </a> </div> 37 <div class="h-list-6"><a href=""> 38 <p>下载手机版</p> 39 </a> </div> 40 41 </div> 42 <!-- 头部导航栏end --> 43 44 </div> 45 <!-- 头部居中外框 end --> 46 47 </div> 48 49 </div> 50 <!-- 头部 end --> 51 52 53 <!-- 中部内容start --> 54 <div class="mt-content"> 55 <!-- 内容第一个div start --> 56 <div class="content-one"> 57 <div class="content-one-left"> 58 <a href=""><span>建邺区</span></a> 59 <a href=""><span>黄焖鸡米饭重庆小面（崇文店）</span></a> 60 <span>|</span> 61 <a href=""><span style="color: orange;">切换地址^</span></a> 62 </div> 63 64 <div class="content-one-right"> 65 <a href=""> 66 <div class="content-one-right-div1">注册</div> 67 </a> 68 <a href=""> 69 <div class="content-one-right-div1">登录</div> 70 </a> 71 <a href=""> 72 <div class="content-one-right-div1">我的订单</div> 73 </a> 74 </div> 75 </div> 76 77 <!-- 内容第二个div start --> 78 <div class="content-two"> 79 <!-- 左边 --> 80 <div class="content-two-left"> 81 82 <!-- 导航栏 --> 83 84 <div id="h-list-1"> 85 <img src="img/house.png" width="50px"> 86 <span style="margin-left: 7px;">商家分类</span> 87 </div> 88 <span style="margin-top: 20px; color: #5F9EA0;">|</span> 89 90 <div class="h-list-2"><a href=""> 91 <p>全部</p> 92 </a> </div> 93 <div class="h-list-3"><a href=""> 94 <p>美食</p> 95 </a> </div> 96 <div class="h-list-4"><a href=""> 97 <p>正餐优选</p> 98 </a> </div> 99 <div class="h-list-5"><a href=""> 100 <p>超市</p> 101 </a> </div> 102 <div class="h-list-6"><a href=""> 103 <p>精选小吃</p> 104 </a> </div> 105 <div class="h-list-6"><a href=""> 106 <p>鲜果购</p> 107 </a> </div> 108 <div class="h-list-6"><a href=""> 109 <p>下午茶</p> 110 </a> </div> 111 <!-- 导航栏end --> 112 113 </div> 114 115 <!-- 右边 --> 116 <div class="content-two-right"> 117 <div class="content-two-right-input"> 118 <input type="text" placeholder=" 搜索商家,美食"> 119 </div> 120 <div class="content-two-right-img"> 121 <img width="35px" src="img/searchIco.png"> 122 </div> 123 124 </div> 125 </div> 126 127 <!-- 内容第三个div start --> 128 <div class="content-three"> 129 <div class="content-three-tip"> 130 <span style="color: orangered; font-size: 17px;font-weight: bold;">美团外卖向消费者郑重承诺：</span> 131 <a href="#"><span style="color:blue;font-size: 17px; font-weight: bold;"> 平台公示</span></a> 132 </div> 133 </div> 134 135 <!-- 内容第四个div start --> 136 <div class="content-four"> 137 <!-- 内容外部 居中div --> 138 <div class="centen-four-centerOut"> 139 <!-- 第一行 --> 140 <div class="content-four-line"> 141 <!-- 第一列 --> 142 <div class="content-four-line-1"> 143 <div class="c-line1"> 144 <img src="img/food1.png"> 145 </div> 146 <div class="c-line2"> 147 <span>永和大王（莲池路店）</span> 148 </div> 149 <div class="c-line3"> 150 <img src="img/pingjia.png"> 151 </div> 152 <div class="c-line4"> 153 <span>起送￥30</span> 154 <span>配送费￥3</span> 155 <span>30分钟</span> 156 </div> 157 </div> 158 159 160 <!-- 第一列 --> 161 <div class="content-four-line-1"> 162 <div class="c-line1"> 163 <img src="img/food1.png"> 164 </div> 165 <div class="c-line2"> 166 <span>永和大王（莲池路店）</span> 167 </div> 168 <div class="c-line3"> 169 <img src="img/pingjia.png"> 170 </div> 171 <div class="c-line4"> 172 <span>起送￥30</span> 173 <span>配送费￥3</span> 174 <span>30分钟</span> 175 </div> 176 </div> 177 178 179 <!-- 第一列 --> 180 <div class="content-four-line-1"> 181 <div class="c-line1"> 182 <img src="img/food2.png"> 183 </div> 184 <div class="c-line2"> 185 <span>永和大王（莲池路店）</span> 186 </div> 187 <div class="c-line3"> 188 <img src="img/pingjia.png"> 189 </div> 190 <div class="c-line4"> 191 <span>起送￥30</span> 192 <span>配送费￥3</span> 193 <span>30分钟</span> 194 </div> 195 </div> 196 197 <!-- 第一列 --> 198 <div class="content-four-line-1"> 199 <div class="c-line1"> 200 <img src="img/food1.png"> 201 </div> 202 <div class="c-line2"> 203 <span>永和大王（莲池路店）</span> 204 </div> 205 <div class="c-line3"> 206 <img src="img/pingjia.png"> 207 </div> 208 <div class="c-line4"> 209 <span>起送￥30</span> 210 <span>配送费￥3</span> 211 <span>30分钟</span> 212 </div> 213 </div> 214 </div> 215 216 217 218 <!-- 第2行 --> 219 <div class="content-four-line"> 220 <!-- 第1列 --> 221 <div class="content-four-line-1"> 222 <div class="c-line1"> 223 <img src="img/food2.png"> 224 </div> 225 <div class="c-line2"> 226 <span>永和大王（莲池路店）</span> 227 </div> 228 <div class="c-line3"> 229 <img src="img/pingjia.png"> 230 </div> 231 <div class="c-line4"> 232 <span>起送￥30</span> 233 <span>配送费￥3</span> 234 <span>30分钟</span> 235 </div> 236 </div> 237 238 239 <!-- 第2列 --> 240 <div class="content-four-line-1"> 241 <div class="c-line1"> 242 <img src="img/food3.png"> 243 </div> 244 <div class="c-line2"> 245 <span>永和大王（莲池路店）</span> 246 </div> 247 <div class="c-line3"> 248 <img src="img/pingjia.png"> 249 </div> 250 <div class="c-line4"> 251 <span>起送￥30</span> 252 <span>配送费￥3</span> 253 <span>30分钟</span> 254 </div> 255 </div> 256 257 258 <!-- 第3列 --> 259 <div class="content-four-line-1"> 260 <div class="c-line1"> 261 <img src="img/food1.png"> 262 </div> 263 <div class="c-line2"> 264 <span>永和大王（莲池路店）</span> 265 </div> 266 <div class="c-line3"> 267 <img src="img/pingjia.png"> 268 </div> 269 <div class="c-line4"> 270 <span>起送￥30</span> 271 <span>配送费￥3</span> 272 <span>30分钟</span> 273 </div> 274 </div> 275 276 <!-- 第4列 --> 277 <div class="content-four-line-1"> 278 <div class="c-line1"> 279 <img src="img/food2.png"> 280 </div> 281 <div class="c-line2"> 282 <span>永和大王（莲池路店）</span> 283 </div> 284 <div class="c-line3"> 285 <img src="img/pingjia.png"> 286 </div> 287 <div class="c-line4"> 288 <span>起送￥30</span> 289 <span>配送费￥3</span> 290 <span>30分钟</span> 291 </div> 292 </div> 293 </div> 294 295 296 <!-- 第3行 --> 297 <div class="content-four-line"> 298 <!-- 第1列 --> 299 <div class="content-four-line-1"> 300 <div class="c-line1"> 301 <img src="img/food1.png"> 302 </div> 303 <div class="c-line2"> 304 <span>永和大王（莲池路店）</span> 305 </div> 306 <div class="c-line3"> 307 <img src="img/pingjia.png"> 308 </div> 309 <div class="c-line4"> 310 <span>起送￥30</span> 311 <span>配送费￥3</span> 312 <span>30分钟</span> 313 </div> 314 </div> 315 316 317 <!-- 第2列 --> 318 <div class="content-four-line-1"> 319 <div class="c-line1"> 320 <img src="img/food3.png"> 321 </div> 322 <div class="c-line2"> 323 <span>永和大王（莲池路店）</span> 324 </div> 325 <div class="c-line3"> 326 <img src="img/pingjia.png"> 327 </div> 328 <div class="c-line4"> 329 <span>起送￥30</span> 330 <span>配送费￥3</span> 331 <span>30分钟</span> 332 </div> 333 </div> 334 335 336 <!-- 第3列 --> 337 <div class="content-four-line-1"> 338 <div class="c-line1"> 339 <img src="img/food2.png"> 340 </div> 341 <div class="c-line2"> 342 <span>永和大王（莲池路店）</span> 343 </div> 344 <div class="c-line3"> 345 <img src="img/pingjia.png"> 346 </div> 347 <div class="c-line4"> 348 <span>起送￥30</span> 349 <span>配送费￥3</span> 350 <span>30分钟</span> 351 </div> 352 </div> 353 354 <!-- 第4列 --> 355 <div class="content-four-line-1"> 356 <div class="c-line1"> 357 <img src="img/food1.png"> 358 </div> 359 <div class="c-line2"> 360 <span>永和大王（莲池路店）</span> 361 </div> 362 <div class="c-line3"> 363 <img src="img/pingjia.png"> 364 </div> 365 <div class="c-line4"> 366 <span>起送￥30</span> 367 <span>配送费￥3</span> 368 <span>30分钟</span> 369 </div> 370 </div> 371 </div> 372 373 374 <!-- 第4行 --> 375 <div class="content-four-line"> 376 <!-- 第1列 --> 377 <div class="content-four-line-1"> 378 <div class="c-line1"> 379 <img src="img/food3.png"> 380 </div> 381 <div class="c-line2"> 382 <span>永和大王（莲池路店）</span> 383 </div> 384 <div class="c-line3"> 385 <img src="img/pingjia.png"> 386 </div> 387 <div class="c-line4"> 388 <span>起送￥30</span> 389 <span>配送费￥3</span> 390 <span>30分钟</span> 391 </div> 392 </div> 393 394 395 <!-- 第2列 --> 396 <div class="content-four-line-1"> 397 <div class="c-line1"> 398 <img src="img/food1.png"> 399 </div> 400 <div class="c-line2"> 401 <span>永和大王（莲池路店）</span> 402 </div> 403 <div class="c-line3"> 404 <img src="img/pingjia.png"> 405 </div> 406 <div class="c-line4"> 407 <span>起送￥30</span> 408 <span>配送费￥3</span> 409 <span>30分钟</span> 410 </div> 411 </div> 412 413 414 <!-- 第3列 --> 415 <div class="content-four-line-1"> 416 <div class="c-line1"> 417 <img src="img/food2.png"> 418 </div> 419 <div class="c-line2"> 420 <span>永和大王（莲池路店）</span> 421 </div> 422 <div class="c-line3"> 423 <img src="img/pingjia.png"> 424 </div> 425 <div class="c-line4"> 426 <span>起送￥30</span> 427 <span>配送费￥3</span> 428 <span>30分钟</span> 429 </div> 430 </div> 431 432 <!-- 第4列 --> 433 <div class="content-four-line-1"> 434 <div class="c-line1"> 435 <img src="img/food1.png"> 436 </div> 437 <div class="c-line2"> 438 <span>永和大王（莲池路店）</span> 439 </div> 440 <div class="c-line3"> 441 <img src="img/pingjia.png"> 442 </div> 443 <div class="c-line4"> 444 <span>起送￥30</span> 445 <span>配送费￥3</span> 446 <span>30分钟</span> 447 </div> 448 </div> 449 </div> 450 451 <!-- 点击加载更多商家 --> 452 <div class="clckMore"> 453 <a href="#">点击加载更多商家</a> 454 </div> 455 456 457 458 </div> 459 460 </div> 461 462 </div> 463 <!-- 中部内容End --> 464 465 466 <!-- 底部 start --> 467 <div class="mt-foot"> 468 469 <!-- 底部调整内容居中div --> 470 <div class="f-centerOut"> 471 <!-- 底部左边div --> 472 <div class="f-left"> 473 <div class="f-left-div1"> 474 <p>开放平台</p> 475 <p>媒体报道</p> 476 <p>融资规则</p> 477 <p>入驻加盟</p> 478 </div> 479 <div class="f-left-div2"> 480 <p>常见问题</p> 481 <p>用户反馈</p> 482 <p>诚信举报</p> 483 <p>加入我们</p> 484 </div> 485 </div> 486 487 <!-- 底部中部div --> 488 <div class="f-center"> 489 <h3>品牌合作</h3> 490 <p>12345678@meituan.com</p> 491 <br> 492 493 494 <h3>客服1010-9777</h3> 495 <p>周一至周日9：00-15:00</p> 496 <p>客服不受理商务合作</p> 497 498 </div> 499 500 <!-- 底部右边div --> 501 <div class="f-right"> 502 <div class="f-right-div1"> 503 <span> 504 <h3>更多商家</h3> 505 </span><br> 506 <img src="img/erweima.png"> 507 </div> 508 <div class="f-right-div1"> 509 <span> 510 <h3>更多优惠</h3> 511 </span><br> 512 <img src="img/erweima2.png"> 513 </div> 514 </div> 515 </div> 519 </div> 520 <!-- 底部 end --> 522 523 </body> 524 </html>
