石周明

最近在做官方MSN群空间的项目，做到下面这样一个页面 主要说说中间【群友博客】的排列方式 这样的排列方式，自然而然的想到应该用li去实现，对！没错，就是用li去写··· 我说一下我的写法： ·定UL的宽度和padding，定ul上边距和左边距的具体数值 ·定li下边距和右边距的具体数值（与ul互补） ·将图片和文字作为一个a处理，定义display：block，作为块元素处理，定义宽度 下面我说一下我遇到的问题，一开始在li里我设置了 float:left和display:inline，发现最后一行的li的下边距不起作用，我当时觉得很奇怪，以前也遇到过类似的问题，大致意思就是说有对象进行浮动造成margin不起作用的情况，当时遇到这个问题的解决办法是插入一个清除浮动的div(<div style="clear:both"></div>）。 于是，我就想用同样的方法来解决，但加上这个清除浮动的div后发现并不起作用，我又想想，既然li不行，我变通一下，就在a里写margin，反正效果都是一样的，我同样对a写下边距和右边距的具体数值···预览一下，恩，到是可以了···下边距起作用了··· 但我觉得这样好像不怎么正规，所以我就在想到底是什么原因，就一个一个的试，当我把li里的display:inline删除后，我发现li的下边距起作用了，我平时很少在li里使用display:inline，也不太明白它真正的意义是什么··· 晚上回来后翻了一下css2手册，大致意思应该就是删除行的意思，那我想删除行的话，估计就引起下边距不起作用了··· 哎呀，不去追究那么多了···反正效果是实现了··· 所以，我建议大家慎用display:inline（但是好像在导航里用的比较多）··· 值得一提的是：display:inline可以起到list-style-type:none;的作用，而且我发现很多地方写有序列表都习惯在ul里设置list的样式，但是我一般都是在li里设置···不知道大家是怎么个写法···

那天为客服机器人做的一个简单界面

今天遇到一个问题，页面结构如下： <ul> <li><a href="#"><img src="images/f1.gif" />搞飞机</a></li> <li><a href="#"><img src="images/f2.gif" />搞飞机</a></li> <li><a href="#"><img src="images/f3.gif" />搞飞机</a></li> <ul> 大致意思就是用li的方式来展示图片和文字链接的排列，我在css里设置了正常状态下a是没有下划线的，当hover时有下划线，在ie里预览正常，但在ff下，鼠标移上去图片同时也有了下划线··· 百度一下，找到解决办法：让图片以块元素显示即可。 这样定义： li a img{display:block;}

==========这篇文章被search到的机会比较多，今天晚上登陆空间在访问记录里看到从百度又过来几个点击，然后仔细看了一下我写的东西，发现这篇东西还是有点问题的，我想，不能误导大家!然后又思考了一下，所以想重新写一下========== 　　用div布局页面，我们经常会遇到这样的问题：需要在一个设置了行高的div里放入登陆框，这就牵涉到要同时放入文字（用户名、密码）和登陆框（input），当我们只是放文字时，文字是可以垂直居中的，但一旦插入input你就会发现：文字和input都靠左上显示了（在FF里现实是垂直居中的）··· 　　解决这个问题的办法是：给input写只针对ie的hack，margin-top，这个margin-top的值计算方法是：(div行高-input的高度)/2。 　　其实，还应该有其他情况，行面的情况是文字和input同时存在div里，还有比如只有input的情况，还好，div里只有input的情况比较少一点，但解决的办法都一样，写hack。 ————–上面是以前写的东西————– 其实单单设置margin-top是不行的，我又试了一下，比如下面的页面结构： <div style=" height:30px; line-height:30px; border:1px solid #ccc; font-size:12px;">请输入用户名<input type="text" name="textfield" /> </div> 结构很简单：一个设置了行高的单行div里插入了文字和input。那实际上在预览的时候，你会发现：如果只有文字的时候文字是可以在这个div里垂直居中，但是如果你在文字后面再插入一个input，你会发现，input就贴到div的上边缘去了，在前面我说给input加个margin-top就可以了，实际上这是错误的，那我们到底该怎么解决的··· 经过反复调试，下面的css表现是可行的： input{ border:1px solid #ccc; margin:3px 0 0 0; padding:0; height:20px; line-height:20px; } 这里为什么会设置input的上边距为3px呢？我解释一下： 以前我说解决这个问题的办法是直接给input写上边距，上边距的值计算方法是：(div行高-input的高度)/2。 这个是没错的，那···这里的div行高是30px-input的高度(20px+上下各1px=22px)=8px，那8px/2=4px 咦？是4px啊，你为什么写3px呢？恩，问的好！因为input在默认情况是各有1px的上下边距，那去掉1px就是3px了··· 当然，这里我们也可以写： input{ position:relative; top:4px; border:1px solid #ccc; margin:-1px 0; padding:0; height:20px; line-height:20px; } 这样写是去掉默认的上下1px边距，然后对input相对定位，不过这样就增加代码行数了，我推荐第一种写法！ 只得一提的是，我们在页面结构里，应该对文字加一个span，然后将这个span浮动到左侧，所以页面结构代码应该是这样： <div style=" height:30px; line-height:30px; [...]

　　这两天在做一个网站项目，整个网站用table布局（我一般很少用table做页面，因为这个是一个外包项目，图快，所以就用table做了）。 问题描述： 　　有个页面是这么个情况：整个页面一个大的table，两列td，左侧一列td是一些常规的链接和图片，右边一个td里是一排一排的图片，因为是在右侧一列的td里插入一排一排的图片，所以我就想在td里插入一个div，然后写li，用li来布局这些图片···就这样一个简单布局的页面却遇到一个奇怪的问题：我将右侧一列td插入的这个div设置了margin:10px;按常理说，上下左右都应该有10px的边距，但在预览的时候却发现，margin-bottom并没有起作用！ 分析原因： 　　百度一下，找到BI里的一篇帖子，终于明白是由于div里的li浮动造成的，我将li的浮动去掉，果然margin-bottom就起作用了。但问题是我现在就是需要对li进行浮动。好，那么接下来，我们解决问题··· 解决问题： 　　几个哥们儿回帖，说是可以用clear:both来解决，于是，我试了一下在这个div后面加上<div style="clear:both;"，果然，问题解决了··· 总结： 　　我总结了一下，问题是这样的：在td里插入div，div里有元素浮动造成margin不起作用，那我们就清除浮动，让里面的margin起作用。 　　如果div里有元素进行了任何浮动，你即使设置了div的margin值，margin-bottom值也不会起作用，至于为什么只有margin-bottom不起作用，那是因为你将这个div浮动到左侧（前面问题描述里div中的li就float:left）的时候，而这个div是没有任何后续东西跟在后面的···不知道我这样的解释过不过关，呵呵··· 　　还有，这个解决办法也适用于div里嵌套div，也就是这样的结构： 　　<div> 　　<div style="float:left; margin:10px;">sdsdsdsdsdsd</div> 　　<div style="clear:both;"></div> 　　</div> 　　希望上面这些能帮到和我一样遇到这个问题的朋友。