前台UI的总结

最新推荐文章于 2021-03-18 05:40:28 发布

cleble

最新推荐文章于 2021-03-18 05:40:28 发布

阅读量674

点赞数

分类专栏：技术分析总结

本文链接：https://blog.csdn.net/cleble/article/details/50315187

版权

技术分析总结专栏收录该内容

132 篇文章 1 订阅

订阅专栏

1. margin、 padding的区别？

margin：外边距

padding：内边距

2. 长宽不要设置成决对像素，而要设置成百分比。因为在不同的显示器中（如手机、平板、宽屏、窄屏），显示比例可能会不协调。

3. 多行多列对齐可以用table,table表的行元素 tr都设置了高度才会起作用。

4. 弹出框div需要写在主页面下，通过js控制div的弹出。覆盖的阴影层也可以通过js控制。

5. 公共的菜单栏、head和foot可以单独写在一个jsp文件，其他页面引用该文件即可。

6. Div的嵌套层级要清楚。

7. tab标签的切换可以用js控制Div的显示或隐藏来实现。

8. DIV调试时边界显示：border: red 1px solid

9. js控制table行可增加删除，效果如下：

js:

$(document).ready(function(){

      $("#addTable").click(function(){
   var tr ="<tr><td><input type='text' style='width:65%;' /></td>"+
           "<td><input type='text' style='width:65%;' />"+
              "<td><div class='grxx_16'><textarea style='width:85%;' name='' cols='' rows=''></textarea></div></td>"+
           "<td><input type='button' value='-' οnclick='delRow(this);'style='width:30px;' /></td></tr>";
　　 // this传当前对象
           $("#table1").append(tr);　
});

});

function delRow(obj){
   var num = obj.parentElement.parentElement.rowIndex;  //rowIndex：table行号
      document.getElementById('table1').deleteRow(num);  //deleteRow：删除行
   }

html:

<table id="table1" style="width: 80%;border:1px solid black; padding: 10px;">
<tr><td>收款人(電子郵件地址或手機號）</td>
<td>电子币数量</td><td>收款人的消息</td><td>操作</td></tr>
<tr><td><input type="text" style="width:65%;" /></td><td><input type="text" style="width:65%;" /></td>
<td>
<div class="grxx_16"> <textarea name="" cols="" rows="" style="width:85%;"></textarea></div></td>
<td></td>
</tr>
</table>

10. <input type="button" />需要外面套一层DIV才可以调整宽高

11. 浏览器调试快捷键F12

12. jsp包含comm下的left.jsp文件：<jsp:include page="./comm/left.jsp" flush="true" />

设置flush为true，就是说，如果你的缓冲区的内容很多了，就将数据读出，以免数据泄漏，造成错误。

13. *{} 定义的样式被其他Div元素继承。

14. 不同的选择器样式优先级高低：id>class>元素。

15. ！important 优先执行,优先级被提升到顶级。

16. 修改前端时，jBoss需要重启服务器，tomcat不需要，直接刷新即可。

17. CSS样式的定义有冲突时，要么提高自己样式的优先级，要么定义新的类避免重复冲突。

18. .last : 元素的最后一个 .first：元素的第一个。

19. 颜色值不熟悉时，可以查询“RGB颜色查询对照表”。

20. 相对路径的使用：

change_login_paw.jsp中导入<jsp:include page="../comm/common.jsp" flush="true" />

index.jsp中导入 <jsp:include page="./comm/common.jsp" flush="true" />

21. table的宽高设定如下

<table  width="221" height="77" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="border:1px solid #CCCCCC">123</td>
    <td style="border:1px solid #CCCCCC">123</td>
  </tr>
  <tr>
    <td style="border:1px solid #CCCCCC">123</td>
    <td style="border:1px solid #CCCCCC">123</td>
  </tr>
</table>

22. 用iframe实现页面内容的部分切换：

电子银行项目由于框架不能直接访问页面文件，只能通过Controller中的方法访问，所以这种方法不行。

23. 用load()方法动态加载，实现DIV切换:

div.load(jsp文件或Controller路径url)

24. 静态页面、伪静态页面、动态页面的区别：

静态页面：页面是纯html的，不需要从数据库获取数据。

伪静态页面：页面部分是通过代码生成的，有些数据是从数据库获取的。

动态页面：页面是通过代码生成的，需要与数据库交互获取数据的页面。