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之间用一个像素的像素来隔开

实现方法：

首先对表格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的值为容器的高度，多行是更具具体的情况设置值。少用空格&nbsp；最好不要用，可以用首行缩进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下就塌陷了呢？