当前位置：首页 > 行业动态 > 正文

html美食网页简单代码

html美食网页简单代码 第1张

美食推荐经典川菜麻辣鲜香了解更多 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">美食网页示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f5e6;
            margin: 0;
            padding: 20px;
        }
        .navbar {
            background-color: #e74c3c;
            padding: 10px;
            text-align: center;
        }
        .navbar a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }
        .content {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .main-section {
            flex: 3;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .aside-section {
            flex: 1;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-left: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f48c42;
            color: white;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #777;
        }
    </style>
</head>
<body>
    <!-导航栏 -->
    <div class="navbar">
        <a href="#home">首页</a>
        <a href="#menu">菜单</a>
        <a href="#about">关于我们</a>
    </div>
    <!-主内容区域 -->
    <div class="content">
        <!-左侧主内容 -->
        <div class="main-section">
            <h2>今日特色</h2>
            <img src="example.jpg" alt="美食图片" style="width:100%">
            <p>经典川味火锅，选用新鲜食材，搭配秘制底料，麻辣鲜香，让您回味无穷！</p>
            <button style="background-color:#e74c3c;color:white;padding:10px;border:none;">立即点餐</button>
        </div>
        <!-右侧侧边栏 -->
        <div class="aside-section">
            <h3>本周优惠</h3>
            <ul>
                <li>消费满200元减30元</li>
                <li>会员享双倍积分</li>
                <li>啤酒买二送一</li>
            </ul>
            <h3>营业时间</h3>
            <p>周一至周日 10:00 22:00</p>
        </div>
    </div>
    <!-菜单推荐表格 -->
    <div class="main-section" style="margin-top:30px;">
        <h2>人气菜单</h2>
        <table>
            <tr>
                <th>菜品</th>
                <th>价格</th>
                <th>销量</th>
            </tr>
            <tr>
                <td>麻辣牛肉</td>
                <td>¥48</td>
                <td>238份</td>
            </tr>
            <tr>
                <td>清汤锅底</td>
                <td>¥38</td>
                <td>156份</td>
            </tr>
            <tr>
                <td>毛肚拼盘</td>
                <td>¥68</td>
                <td>192份</td>
            </tr>
        </table>
    </div>
    <!-页脚 -->
    <div class="footer">
        © 2023 美味轩餐饮有限公司<br>
        电话：400-123-4567 | 地址：北京市朝阳区美食街88号
    </div>
    <!-问题与解答 -->
    <div style="margin-top:40px;">
        <h3>常见问题解答</h3>
        <div style="margin-bottom:15px;">
            <strong>Q1：如何修改导航栏颜色？</strong><br>
            <p>A：在样式表中修改 <code>.navbar</code> 的 <code>background-color</code> 属性即可，例如将十六进制颜色值改为其他颜色代码。</p>
        </div>
        <div>
            <strong>Q2：如何给菜单添加新菜品？</strong><br>
            <p>A：在HTML表格的<code>&lt;tbody&gt;</code>部分添加新的<code>&lt;tr&gt;</code>行，并在其中插入<code>&lt;td&gt;</code>单元格填写菜品信息。</p>
        </div>
    </div>
</body>
</html>
简易美食
0

相关文章