html常⽤布局标签的合理搭配
做前端接近两个星期了，我感觉最近进步⽐较⼤，可能是因为起点低吧，所有感觉进步⽐较快，简单的总结⼀些我两周来所遇到的问题以及解决的办法
印象最深刻的也是第⼀次遇到这样的问题：
需求：
做⼀个收索的⽂本框，⽂本框前⾯放⼀个放⼤镜，然后中间可以输⼊⽂字，但⽂字不能再放⼤镜上，后⾯跟⼀个收索确定按钮，
我的办法：
三个div全部做浮动，左边⼀个放放⼤镜的图⽚，中间的放⼀个⽂本框，右边的那个放按钮，
结果：
虽然放⼤镜，⽂本框，收索按钮在同⼀⽔平线上排列着，但由于图⽚和⽂本框的⾼度不⼀致，拼接的很难看，还有那个按钮，上下不对其。
最后解决办法：
两个div左浮动⼀个放⽂本框，⼀个放按钮。对⽂本框和按钮设置class样式让⽂本框和按钮的⾼度和宽度与对应背景图⽚的⾼度宽度⼀样，再吧图⽚当做控件的背景上左开始不重复，然后让⽂本框的⾸⾏缩进2个⽂字的宽度，属性为text-indent:。当然也可以设置⽂本框的左内补丁5个像素左右（次⽅法不推荐）
.inputSearchKeyword {
background: url(../img/common/040529/l1_07.jpg) left top no-repeat;
height: 20px;
width: 100px;
border: 1px solid #CCC;
color: #fff;
text-indent: 2em;
}
总结：
以后只要是对⽂本框按钮等常⽤的控件设置样式这种办法都可以。
常⽤的li⾥⾯嵌套a便签做导航的规则。
1、需求：
做⼀个竖着的菜单项然后每个⼦项可以连接到另外⼀个页⾯
总体实现⽅法：
Li控件⾥⾯嵌套a便签
需要注意或⽐较有难点的经验总结：
有时候⽐如在超链接前⾯加⼀个图标，或者特殊字符⽐如“>”的东西的时候，千万不能直接再前⾯加图⽚或者加span便签然后设置样式，这样不便于优化和动态输出数据时不⽅便。
正确的⽅法是：
吧前⾯想要的图像或特殊字符，做成图⽚，然后坐成li的背景图⽚靠右边对其不重复，然后设置li的5到10个像素的内补丁。
.right3_1menu  li {
width: 265px;
background:url(../../images/common/styleli_03.png) left top no-repeat;
padding-left: 15px;
}
2、需求
做⼀个横着的菜单项然后每个⼦项可以连接到另外⼀个页⾯
总体实现⽅法：
Li控件⾥⾯嵌套a便签，每个Li左浮动，此种导航多半对会嵌套多从⼦菜单，也不是觉对的
效果：当你吧⿏标移动到第⼀项的时候第⼀项下⾯的所有的⼦菜单都会出来，让后第⼀项的背景颜⾊会改变，
⼀般（或之前的我的想法）实现技术：
通过js脚本来显⽰或隐藏第⼆级⼦菜单的同是让该变⾊的Li控件改变样式（⽐如改变背景颜⾊的同时改变前景⽂字的颜⾊）。
总结：
只需要通过js改变⼆级菜单的显⽰和隐藏即可，关于当前项的颜⾊改变完全可以⽤超链接的 默认状态和选择状态通过样式实现，具体是将a 标签的display的属性设置为block然后⾼度和宽度和所在的Li的⼀样，让后通过设置 a{}；和a:hover{}来实现
这样做哦好处：减少了js代码，⽤样式代替效果。
.nav  li a {
height: 30px;
line-height: 30px;
padding: 4px 0;
background-color: #e6e6e6;
display: block;
border-bottom:1px solid #d3d3d3;
color: #000;
}
.nav  li a:hover{
background-color: #696666;
color:#00f;
}
关于表格的样式及⽤法
在布局中绝对不能⽤表格布局
对于⼀些数据的显⽰要求横竖对齐很规范就⽤表格来显⽰
难点：关于表格的边框样式。
1、最简单的就是表格没有边框
cellpadding="0"cellspacing="0" boder=“0”
2、对于表格的每个td之间⽤⼀个像素的像素来隔开
实现⽅法：
html span 居中⾸先对表格cellpadding="0" cellspacing="0"
然后对每个td设置上左边框为⼀个像素，再在设置整个表格(table)的下右边框为⼀个像素
.right2  table {
height: auto;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.right2  table  tr  td {
text-align: center;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
3、对于表格的每个tr之间⽤⼀个像素的像素来隔开td之间没有距离（或者说看不见边框）
实现⽅法：
⾸先对表格cellpadding="0" cellspacing="0"
然后对每个td设置上下边框样式为⼀个像素，再在设置整个表格(table)的左右边框为⼀个像素
.right2_2 table {
height: auto;
border-left:1px solid #ccc;
border-right: 1px solid #ccc;
}
.right2_2 table  tr  td {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
关于布局中的⼀些常⽤的习惯规则：
关于间距边框和字的距离：少⽤内补丁，最好就是居中，⽔平居中：text-alig：centre、竖直居中line-height的值为容器的⾼度，多⾏是更具具体的情况设置值。少⽤空格 ；最好不要⽤，可以⽤⾸⾏缩进text-indent，或者设置字距letter-spacing,
盒⼦和盒⼦的距离⽤外补丁设置布局中不要⽤<br/>换⾏，可以使⽤空div
样式上少⽤，最好不要id选择器#，多⽤类选择器class 因为id的值还有更⼤的⽤处，还有就是id局限了该div或控件的⽤处，有时候的布局或数据时要循环的，次是的id是不能重复的⽽已class是可以重复的。
昨天遇到⼀个很不解的问题：是这样的，总体宽度为1100px；分为左边和右边两个div盒⼦，全部左浮动然后右边的那个div盒⼦的宽度固定宽度为850px，然后⾥⾯⼜有多个div，第⼀个盒⼦的宽度为750px，第⼆个盒⼦的宽度为100%，在⾕歌(Chrome)和⽕狐(Mozilla Firefox)下看到的都左边和右边的两个⼤的盒⼦第在同⼀⽔平线上，右边的多个盒⼦依次从上到下排列，和正常。但到IE下看到的却是右边的那个盒⼦整体塌陷下去了，⽆论怎么样改变右边盒⼦的补丁为和宽度，还是改变⾥⾯的div都⽆法再次到同⼀⽔平线上，最后在右边的第⼀个div（width：750px）和第⼆个div（width：100%）之间清除了浮动句号了。
疑点：就算右边的多个div浮动塌陷，也应该不会影响到右边整体的div塌陷吧，⽽且在⾕歌(Chrome)和⽕狐(Mozilla Firefox)先都好好的，为什么在IE下就塌陷了呢？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。