首页 > 文章 > 前端

复选框值提交与获取方法详解

时间：2025-07-21 19:54:19 274浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《复选框值提交与服务器获取指南》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

正确处理HTML表单中复选框值提交与服务器端获取的指南

本教程详细阐述了在Web应用中，如何正确构建HTML表单以确保复选框值能在其状态改变时被成功提交，并在服务器端（以Node.js Express为例）准确获取。文章将深入分析常见的表单结构陷阱，提供最佳实践的HTML和JavaScript代码示例，并指导如何在后端有效地处理这些提交的数据，确保数据流的完整性与可靠性。

1. 理解复选框值提交的核心问题

在Web开发中，当我们需要通过复选框的状态变化来触发表单提交，并获取其对应的值时，常会遇到一些挑战。一个常见的问题是，如果HTML表单结构不正确，或者JavaScript事件处理逻辑有误，服务器端可能无法接收到预期的复选框值。

核心要点在于：

表单元素的归属： 任何需要提交到服务器的数据输入元素（如、）都必须嵌套在其所属的<form>标签内部。</li><li><strong>name属性的重要性：</strong> 所有需要提交的表单元素都必须设置name属性。服务器端会通过这个name属性来识别和获取对应的值。</li><li><strong>复选框的值：</strong> 当复选框被选中时，其value属性的值才会被提交。如果未选中，则不会提交任何值。</li></ul><h3>2. 修正HTML表单结构</h3><p>原始代码中存在一个关键的HTML结构问题：<form action="/delete" id="listForm" method="POST"></form> 这段代码创建了一个空的表单并立即关闭，导致后续的复选框<input type="checkbox" ...>并不在这个表单内部。因此，当复选框触发提交时，它无法正确地将自己的值与该表单关联起来。</p><p>要解决这个问题，每个需要独立提交的复选框及其相关内容都应该被封装在自己的<form>标签内。这样，当复选框的状态改变时，this.form.submit()（或通过JavaScript事件监听器获取的event.target.form.submit()）就能准确地找到并提交包含该复选框的表单。</p><p>以下是修正后的EJS模板HTML代码示例：</p><pre class="brush:php;toolbar:false"><%- include('header'); -%> <div class="box"> <h1 id="heading"><%= listTitle %></h1> </div> <div class="box"> <% listItems.forEach(function(item){%>  <form action="/delete" method="POST"> <div class="item"> <input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">  <p><%=item.name%></p> </div> </form> <% }); %> <form action="/" method="POST" class="item"> <input class="last-child" type="text" name="newItem" placeholder="New Item"> <button type="submit" name="list" value=<%= listTitle %>>+</button> </form> </div>  <script> // 建议使用事件委托或遍历所有checkbox添加事件监听器 // 这里以一个简单的例子说明如何通过JS提交 document.querySelectorAll("input[name='checkbox']").forEach(checkbox => { checkbox.addEventListener("change", function(e){ if (e.target.checked){ // 确保e.target.form指向包含当前checkbox的正确表单 e.target.form.submit(); } }); }); </script> <%- include('footer') -%></pre><p><strong>关键修正点：</strong></p><ul><li>每个div.item（包含一个复选框和一个p标签）都被一个独立的<form action="/delete" method="POST">标签包裹。</li><li>复选框的name="checkbox"属性确保了其值在提交时能够被识别。</li><li>onChange="this.form.submit()"是一个便捷的“快捷方式”，它利用了DOM中this关键字在事件处理函数中指向当前元素，并通过this.form访问其父级表单，然后调用表单的submit()方法。</li></ul><h3>3. 服务器端获取复选框值</h3><p>一旦前端表单结构正确并成功提交，服务器端就可以通过请求体（Request Body）来获取复选框的值。对于Node.js和Express框架，通常使用body-parser（或Express内置的express.json()和express.urlencoded()中间件）来解析请求体。</p><p>当复选框被选中并提交时，其name属性（例如checkbox）将作为键，其value属性（例如item._id）将作为值，出现在req.body对象中。</p><p>以下是Node.js Express服务器端代码示例：</p><pre class="brush:php;toolbar:false">const express = require("express"); const bodyParser = require("body-parser"); // 如果Express版本低于4.16，可能需要单独引入 const app = express(); // 配置Express使用body-parser来解析URL编码的请求体 // 对于Express 4.16.0+，可以直接使用 express.urlencoded() app.use(bodyParser.urlencoded({ extended: true })); // 或者 app.use(express.urlencoded({ extended: true })); // 假设这里有你的数据库模型和默认数据 // const todo = require("./models/todo"); // 假设你的todo模型在这里 // const todoDefault = [{ name: "Buy groceries" }, { name: "Clean room" }]; // GET 路由（保持不变，与问题无关） app.get("/", function(req, res){ // ... 你的 GET 逻辑 ... // 示例： // todo.find({}).then(function(todos){ // if(todos.length === 0){ // todo.insertMany(todoDefault).then(() => console.log("Successfully Inserted")).catch(err => console.log(err)); // res.redirect("/"); // } else { // res.render("list", {listTitle: "Today", listItems: todos}); // } // }).catch(err => console.log(err)); res.render("list", { listTitle: "Today", listItems: [{_id: "1", name: "Item 1"}, {_id: "2", name: "Item 2"}] }); }); // POST /delete 路由，用于处理复选框提交 app.post("/delete", function(req, res){ // req.body.checkbox 将包含被选中复选框的 value 值 const checkedItemId = req.body.checkbox; console.log("接收到的复选框值 (itemId):", checkedItemId); // 在这里执行删除操作，例如： // todo.findByIdAndRemove(checkedItemId).then(function(){ // console.log("成功删除项目:", checkedItemId); // res.redirect("/"); // 删除后重定向回主页 // }).catch(function(err){ // console.log("删除失败:", err); // res.redirect("/"); // }); res.redirect("/"); // 示例中直接重定向 }); // 启动服务器 // app.listen(3000, function() { // console.log("Server started on port 3000"); // });</pre><p><strong>代码解释：</strong></p><ul><li>app.use(bodyParser.urlencoded({ extended: true })); 或 app.use(express.urlencoded({ extended: true })); 是必需的中间件，用于解析来自HTML表单的URL编码数据。extended: true 允许解析更复杂的嵌套对象。</li><li>在app.post("/delete", ...)路由中，req.body.checkbox可以直接访问到name="checkbox"的复选框所提交的值。</li></ul><h3>4. 提交表单的快捷方式与最佳实践</h3><p><strong>快捷方式：onChange="this.form.submit()"</strong> 这种方法直接在HTML元素上绑定事件，当复选框状态改变时，立即提交其父级表单。它简洁明了，适用于简单的交互场景。</p><p><strong>JavaScript事件监听器：</strong> 虽然onChange属性很方便，但在更复杂的应用中，推荐使用JavaScript事件监听器（如addEventListener）来分离HTML结构和行为逻辑。这样可以使代码更易于维护和扩展。</p><pre class="brush:php;toolbar:false">// 在 <script> 标签内 document.querySelectorAll("input[name='checkbox']").forEach(checkbox => { checkbox.addEventListener("change", function(e){ if (e.target.checked){ // e.target 指向触发事件的元素 (即当前的checkbox) // e.target.form 指向该checkbox所属的表单 e.target.form.submit(); } }); });</pre><p>这种方法通过document.querySelectorAll获取所有name='checkbox'的复选框，并为每个复选框添加事件监听器。当事件触发时，e.target指向当前的复选框，e.target.form则指向其所属的表单，从而实现提交。</p><p><strong>注意事项：</strong></p><ul><li><strong>多选复选框：</strong> 如果有多个复选框使用相同的name属性（例如name="categories"），并且都选中，提交后在服务器端req.body.categories将是一个包含所有选中value的数组。</li><li><strong>安全性：</strong> 在处理任何来自客户端的数据时，务必进行服务器端验证和清理，以防止恶意输入或攻击（如SQL注入、XSS等）。</li><li><strong>用户体验：</strong> 自动提交表单可能会让用户感到意外，尤其是在网络条件不佳时。对于需要确认的操作，考虑添加一个确认对话框或显式的提交按钮。对于删除操作，通常需要用户点击一个明确的删除按钮来触发，而不是仅仅勾选一个复选框。</li></ul><h3>5. 总结</h3><p>成功地从前端提交复选框值并在后端获取，关键在于确保正确的HTML表单结构，即复选框必须嵌套在其意图提交数据的<form>标签内。无论是使用HTML的onChange属性还是JavaScript的事件监听器来触发提交，其核心都是找到正确的父级表单并调用其submit()方法。在服务器端，使用适当的中间件（如Express的urlencoded）可以轻松地通过req.body对象访问到这些提交的值。遵循这些原则将确保数据流的顺畅和应用的可靠性。</p><p>终于介绍完啦！小伙伴们，这篇关于《复选框值提交与获取方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！</p> </div> <div class="labsList"> </div> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | </div> <div class="tit lineOverflow"><a href="/article/91359.html" title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="91359" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 8分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270830.html" title="HTML表单标题用legend标签，SEO优化技巧" class="aBlack">HTML表单标题用legend标签，SEO优化技巧</a></div> <div class="opt"> <span><i class="view"></i>373</span> <span class="collectBtn user_collection" data-id="270830" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 13分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270823.html" title="HTML中标签的使用详解" class="aBlack">HTML中标签的使用详解</a></div> <div class="opt"> <span><i class="view"></i>221</span> <span class="collectBtn user_collection" data-id="270823" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 13分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270822.html" title="CSS渐变文字与背景裁剪教程" class="aBlack">CSS渐变文字与背景裁剪教程</a></div> <div class="opt"> <span><i class="view"></i>206</span> <span class="collectBtn user_collection" data-id="270822" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 15分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270820.html" title="HTML表格结构与布局技巧详解" class="aBlack">HTML表格结构与布局技巧详解</a></div> <div class="opt"> <span><i class="view"></i>355</span> <span class="collectBtn user_collection" data-id="270820" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 19分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270813.html" title="JavaScript操控树莓派的实用技巧" class="aBlack">JavaScript操控树莓派的实用技巧</a></div> <div class="opt"> <span><i class="view"></i>182</span> <span class="collectBtn user_collection" data-id="270813" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 20分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270811.html" title="HTML瀑布流布局实现全攻略" class="aBlack">HTML瀑布流布局实现全攻略</a></div> <div class="opt"> <span><i class="view"></i>495</span> <span class="collectBtn user_collection" data-id="270811" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 23分钟前 | <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="属性">属性</a> <a href="javascript:;" class="aLightGray" title="语义">语义</a> <a href="javascript:;" class="aLightGray" title="meter">meter</a> <a href="javascript:;" class="aLightGray" title="progress">progress</a> </div> <div class="tit lineOverflow"><a href="/article/270808.html" title="Meter与Progress区别全解析" class="aBlack">Meter与Progress区别全解析</a></div> <div class="opt"> <span><i class="view"></i>331</span> <span class="collectBtn user_collection" data-id="270808" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 29分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270801.html" title="HTML标签分类及实例详解" class="aBlack">HTML标签分类及实例详解</a></div> <div class="opt"> <span><i class="view"></i>436</span> <span class="collectBtn user_collection" data-id="270801" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 31分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270798.html" title="async函数超时控制方法详解" class="aBlack">async函数超时控制方法详解</a></div> <div class="opt"> <span><i class="view"></i>200</span> <span class="collectBtn user_collection" data-id="270798" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 35分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270794.html" title="uni-app下拉刷新上拉加载使用教程" class="aBlack">uni-app下拉刷新上拉加载使用教程</a></div> <div class="opt"> <span><i class="view"></i>143</span> <span class="collectBtn user_collection" data-id="270794" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 38分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270791.html" title="HTML如何标记快捷键？实用教程" class="aBlack">HTML如何标记快捷键？实用教程</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="270791" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 40分钟前 | </div> <div class="tit lineOverflow"><a href="/article/270790.html" title="VSCode终端运行NPM命令教程" class="aBlack">VSCode终端运行NPM命令教程</a></div> <div class="opt"> <span><i class="view"></i>208</span> <span class="collectBtn user_collection" data-id="270790" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>542次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>511次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>498次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>484次学习</span> </dd> </dl> </li> </ul> </div> </div>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>