手把手教你实现完整品牌列表案例：含 HTML、CSS 与 JS 代码

看起来你的 HTML 文件在 `<form>` 标签部分被截断了。为了帮助你完成这个品牌列表案例，我将提供一个完整的示例代码，包括表单和一些基本的样式。完整的 HTML 代码 ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>品牌列表案例</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> .card { margin: 20px; } .brand-list { list-style-type: none; padding: 0; } .brand-list li { background-color: #f8f9fa; margin: 5px 0; padding: 10px; border: 1px solid #ddd; } </style> </head> <body> <div id="app">  <div class="card"> <div class="card-header"> 添加品牌 </div> <div class="card-body">  <form id="addBrandForm"> <div class="form-group"> <label for="brandName">品牌名称</label> <input type="text" class="form-control" id="brandName" placeholder="请输入品牌名称"> </div> <button type="submit" class="btn btn-primary">添加</button> </form> </div> </div>  <div class="card"> <div class="card-header"> 品牌列表 </div> <div class="card-body"> <ul class="brand-list" id="brandList">  </ul> </div> </div> </div> <script> document.getElementById('addBrandForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 const brandName = document.getElementById('brandName').value.trim(); if (brandName) { // 创建新的品牌列表项 const li = document.createElement('li'); li.textContent = brandName; // 将新品牌添加到列表中 document.getElementById('brandList').appendChild(li); // 清空输入框 document.getElementById('brandName').value = ''; } else { alert('请输入品牌名称'); } }); </script> </body> </html> ``` 代码说明 1. HTML 结构: - 使用 Bootstrap 框架来快速构建响应式布局。 - 包含两个卡片区域：一个用于添加品牌，另一个用于显示品牌列表。 2. CSS 样式: - 简单的内联样式，用于美化品牌列表项。 3. JavaScript 逻辑: - 监听表单的 `submit` 事件，阻止默认提交行为。 - 获取输入的品牌名称，并创建一个新的列表项 (`<li>`)。 - 将新品牌添加到品牌列表中，并清空输入框。运行效果 - 用户可以在表单中输入品牌名称并点击“添加”按钮。 - 输入的品牌名称将动态添加到品牌列表中。希望这个示例对你有帮助！如果有任何问题或需要进一步的功能扩展，请告诉我。 ######[AI写代码神器 | 796点数解答 | 2024-11-18 20:40:15]

服务商

更多选项

快捷项

自定义