html+css+js制作美团界面

最新推荐文章于 2024-04-08 12:31:59 发布

半根烟闯江湖.

最新推荐文章于 2024-04-08 12:31:59 发布

阅读量4.9k

点赞数 13

分类专栏：美团页面及购物车小项目文章标签： css html js

本文链接：https://blog.csdn.net/weixin_54862883/article/details/118407693

版权

效果图

在这里插入图片描述

html代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>美团</title>
        <link rel="stylesheet" type="text/css" href="mt.css">
        <script type="text/javascript" src="mt.js"></script> 
    </head>
    <body onload="init()" style="background-color: #eee;">
        <!--头部-->
        <div id='top'>
            <div id='logo'></div>
            <div id="search">
                <div class="ib"><a style="color: #D0B48F;">搜索商家美食</a></div>
                <div class='ib'>搜索</div>
            </div>
        </div>
        <!--我的购物车-->
        <p id='my' onclick='mycart()'>我的购物车(<span id='count'>0</span>)</p>
        <!--点餐-->
        <div id="menu">
            <div class="food">
                <img src='img/1cde.jpg'>
                <table width="225px">
                    <tr><td colspan="2">A米汉堡</td><td class='r'>16元/份</td></tr>
                    <tr><td colspan="3" class='r s'>月销8148单</td></tr>
                    <tr><td class='s'>起送10元</td><td class='s'>免配送费</td><td class='r s'>45分钟</td></tr>
                    <tr><td colspan="3" class='r'><input type="button" value="加入购物车" onclick="addItem(this)"></td></tr>
                </table>
            </div>
            <div class="food">
                <img src='img/3a31d.jpg'>
                <table width="225px">
                    <tr><td colspan="2">杨记小厨</td><td class='r'>17.5元/份</td></tr>
                    <tr><td colspan="3" class='r s'>月销4639单</td></tr>
                    <tr><td class='s'>起送10元</td><td class='s'>免配送费</td><td class='r s'>38分钟</td></tr>
                    <tr><td colspan="3" class='r'><input type="button