css+html制作订单页面

作者：System 时间：2024年08月14日分类：所有,css3 字数：1047

为了创建一个简单的订单页面，我们可以使用HTML和CSS来实现。以下是一个基本的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单页面</title>
<style>
  body { font-family: Arial, sans-serif; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #ddd; padding: 8px; }
  th { background-color: #f2f2f2; }
  .center { text-align: center; }
  .right { text-align: right; }
</style>
</head>
<body>
 
<h1>订单详情</h1>
 
<table>
  <tr>
    <th class="center">商品名称</th>
    <th class="center">单价</th>
    <th class="center">数量</th>
    <th class="center">小计</th>
  </tr>
  <tr>
    <td class="center">商品A</td>
    <td class="right">$99.99</td>
    <td class="center">1</td>
    <td class="right">$99.99</td>
  </tr>
  <!-- 添加更多的商品行 -->
</table>
 
<hr>
 
<table>
  <tr>
    <th class="right">总计：</th>
    <td class="right">$99.99</td>
  </tr>
</table>
 
</body>
</html>

这个简单的HTML和CSS组合创建了一个包含商品列表和总计的订单页面。你可以根据需要添加更多的商品行，并调整价格和文本以反映实际的订单信息。

css+html制作订单页面

评论已关闭

推荐阅读