能写个外卖平台的前端页面吗

素颜马尾好姑娘i 2023-09-25 16:24 3阅读 0赞

<p>当然，我可以为您写一个外卖平台的前端页面的示例。请注意，这仅是一个简单的示例，您可以根据您的需求进行修改和完善。</p>
    <p>如果您使用的是 HTML、CSS 和 JavaScript，可以使用以下代码：</p>
    <p>```
    <!DOCTYPE html></p>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>外卖平台</title>
        <style>
          /* 添加样式 */
          * {
            box-sizing: border-box;
          }
          body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
          }
          header {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
          }
          header h1 {
            margin: 0;
          }
          main {
            display: flex;
            flex-direction: row;
            margin: 20px;
          }
          .sidebar {
            background-color: lightgray;
            width: 25%;
            padding: 20px;
          }
          .restaurants {
            background-color: white;
            width: 75%;
            padding: 20px;
          }
          .restaurant {
            margin: 20px 0;
          }
          .restaurant img {
            width: 100%;
          }
          .restaurant h2 {
            margin: 0;
          }
          .restaurant p {
            margin: 0;
            font-size: 14px;
          }
        </style>
      </head>
      <body>
        <header>
          <h1>外卖平台</h1>
        </header>
        <main>
          <div class="sidebar">
            
            <h2>筛选</h2>
            <form>
              <label for="name">餐厅名称：</label>
              <input type="text" id="name" name="name">
              <br><br>
              <label for="category">类别：</label>
              <select id="category" name="category">
                <option value="">全部</option>
                <option value="chinese">中餐</option>
                <option value="western">西餐</option>
                <option value="japanese">日本料理</option>
              </select>
              <br><br>
              <button type="submit">筛选