jsp或html页面格式不整齐调试修改

我们在开发中经常遇到这样的问题:

页面格式不整齐,但看项目代码:

有好几千行,如何找到不正确的地方并修改呢?

1.进入页面,按F12,弹出右面的框,点击左上角的箭头,再点击页面不正常的地方,仔细观察格式发现:一个方法占一部分,

  方法与方法之间是并列的,只有页面不正常的地方的上面多了一个标签:黑箭头。

2.我们既然找到了原因,进入项目删掉哪个标签。Ctrl+F,搜索方法,可以找到方法上确实有</ul>,删掉就可以了。

注意:找方法的时候一定要找对,防止有重复方法而找错位置

补充:如有不懂得或觉得不错的,请评论或留言,谢谢!

``` <%@ page language="java" import="test_package.*" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../style/certificate.css"> </head> <body> <% List<test_information> list = (List<test_information>)session.getAttribute("date"); %> <div class = "tit">查看凭证</div> <div class = "Ribbon"> <table> <tr> <td style="white-space: nowrap;"> <!-- 按钮1 --> <input type="button" value="传统记账" class="R_button"> <!-- 表单2 - 导出 --> <form action="" class="inline-form"> <input type="submit" value="导出" class="R_button"> </form> <!-- 表单3 - 打印 --> <form id="printForm" action="white.jsp" method="post" class="inline-form"> <input type="hidden" id="selectedTelsHiddenField" name="telsToPrint"> <input type="submit" value="打印" onclick="return submitSelectedTels();" class="R_button"> </form> <!-- 按钮4 --> <input type="button" value="模板" onclick="template.show()" class="R_button"> </td> <td> <input type = "text" name = "search_name"> <input type = "button" value = "搜索"> </td> </tr> </table> </div> <div class="body"> <table class="cer" > <% for(test_information news:list) { %> <!-- 将每条记录分为两列展示 --> <tr> <td class="zero_box"> <input type="checkbox" name="selectedTels" value="<%=news.getTel()%>" onchange="updateSelection(this)" style = "zoom : 300%"> </td> <td class="first_box"> <%= news.getMaterial() %> <br/> <%= news.getStart_time() %> </td> <td class="second_box"> <%= news.getWashing_method() %> <br/> <%= news.getPrice() %> </td> <td class="third_box"> <form action =""> <input name = "id" value ="<%=news.getTel() %>" type = "hidden"> <input type ="submit" class = "func_button" value = "税费" ><br> <input type ="submit" class = "func_button" value = "查看凭证" ><br> <input type ="submit" class = "func_button" value = "删除凭证" > </form> <br/> </td> </tr> <% } %> </table> <div style="display:none;" id="printArea"></div> </div> <script> let selectedTelsArray = []; function updateSelection(el) { if (el.checked && !selectedTelsArray.includes(el.value)) { // 如果当前被选中,则加入集合 selectedTelsArray.push(el.value); } else { // 否则移除该元素 const indexToRemove = selectedTelsArray.indexOf(el.value); if (indexToRemove !== -1) { selectedTelsArray.splice(indexToRemove, 1); } } console.log(selectedTelsArray); // 输出调试信息 } // 提交之前设置 hidden field 的值 function submitSelectedTels() { document.getElementById('selectedTelsHiddenField').value = JSON.stringify(selectedTelsArray); return true; } </script> </body> </html>```只修改search_text和search_button两个标签,实现让搜索框和搜索按钮在表格的右上角,和其余四个按钮平行
03-18
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/6/4 Time: 20:33 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql.*"%> <html> <head> <title>搜索结果</title> <style> body{ background-color: aquamarine; } .main{ background-color: antiquewhite; margin:0 auto; width:60%; display: flex; flex-wrap: wrap; padding-left: 40px; padding-right: 40px; } .books{ margin: 10px; border: #2F9AF4 2px solid; padding:40px; } a{ text-decoration:none; margin: 10px; font-size: 20px; } .a-book:hover{ color: black; } h1{ text-align: center; } </style> </head> <body> <h1>搜索结果</h1> <% response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("utf-8"); String search = request.getParameter("search"); Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/book"; String un = "root"; String pass = "root"; Connection con = DriverManager.getConnection(url,un,pass); String sql = "select id,url,bookname from books where bookname like '" + "%" + search + "%" + "'" ; Statement pre = con.prepareStatement(sql); ResultSet rs = pre.executeQuery(sql); %> <div class = "main"> <% while(rs.next()){ %> <div class="books"> <%String id = rs.getString("id"); String urls = rs.getString("url"); String name = rs.getString("bookname"); %> <img src="<%=urls%>" width="180" height="256" alt="图片"/> <br> <a class="a-book" href="MESSAGE.jsp?bookid=<%=id%>"><%=name%></a> </div> <% }pre.close();rs.close(); %> </div> </body> </html> 帮我简单优化一下
最新发布
06-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值