本文共 1694 字，大约阅读时间需要 5 分钟。
前端js与CSS一直是自己的一个痛点。只能说尽量多学一点吧。
这里有几点对自己的总结：
①当一个标签中有多个样式的时候，我们可以设置一个为最高等级，那么就会将这个样式展示出来。
添加!important; 属性。
| 1 | style= "width:180px !important;" |
②在调试的时候要整体调试，先要找到是哪个组件。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul class = "search_content" > <li style= "width:245px; " >项目编码： <input class = "form-control" name= "projectCode" id= "projectCode" value= "${project.projectCode }" style= "width:180px !important;" ></li> <li style= "width:245px;" > 项目名称： <input class = "form-control" name= "projectName" id= "projectName" value= "${project.projectName }" style= "width:180px !important;" > </li > <li style= "width:270px;" > 归属产品线： <select class = "form-control" id= "sectorId" name= "sectorId" > <option value= "" >---请选择---</option> <c:forEach var= "bizCodeKeyValue" items= "${listOrganization }" > <option value= "${bizCodeKeyValue.id}" <c: if test= "${project.sectorId == bizCodeKeyValue.id}" > selected</c: if >>${bizCodeKeyValue.orgName}</option> </c:forEach> </select> </li> <li style= "width:270px;" >项目阶段：<sccl:selectBizCodes category= "PROJECT_PHASE" name= "projectPhase" id= "projectPhase" selected= "${project.projectPhase }" ></sccl:selectBizCodes></li> </ul> |
③一般情况下不修改公共的css文件。而是单独修改，因为你不知道会不会影响到其他的。
④调试的时候一定要用好浏览器的调试功能，在页面中调试好大小，然后再修改代码。
⑤向前端人员请教。
【自动获取焦点】
<input name="j_username" id="loginId" type="text" autofocus >
⑥
div里面的字体居中
| 1 | text-align:center; |
div中的字体宽度：
| 1 2 3 4 5 6 7 8 | font-weight:bold; normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100 ， 200 ， 300 ， 400 ， 500 ， 600 ， 700 ， 800 ， 900 定义由粗到细的字符。 400 等同于 normal，而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。 |
设置已百分比计的行高
| 1 | line-height:90% |
本文转自建波李 51CTO博客，原文链接：http://blog.51cto.com/jianboli/1917812，如需转载请自行联系原作者