草窟设计 » CSS

网页图片之间有间隙

Time Posted on 10, 十二

一直都没有做过一个网页大面积由图片组成，一直不懈一故，后来发现，其实这里头还是有很多值得关注的。这次主要碰到的问题是上下排列的图片在IE6和IE7里有间隙。

网页设计中常常碰到层高度无法撑开，只显示一条直线的情况，这主要是该层内部使用了 float 属性。通常解决方法是在该层内部加一个 <div style=”clear:both;”></div> 清除一下浮动即可，这也是我用的最多的方法。这儿是用的 DIV，wordpress 模板里很多人用的 HR。个人认为没有什么区别，可能就是少几个字母吧。另一个方法是我刚刚从google 里发现的，感觉非常好，在这儿要非常感谢这位网友，以后我会经常使用这个方法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS清除浮动</title> <style type="text/css"> *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} </style> </head> <body> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div> </body> </html> [...]

CSS 层最小高度的全兼容写法

Time Posted on 25, 二

min-height:50px; _height:expression(this.height < 50? "auto" : "50px");

JavaScript图片横向平滑切换效果

Time Posted on 6, 八

javascript+css 新闻滑轮显示

Time Posted on 21, 七

Javascript+CSS 经典效果, 新闻滑轮显示. 效果2张: 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>绝对经典的滑轮新闻显示 (javascript+css)</title> <meta http-equiv=Content-Type content="text/html; charset=gb2312"> <style type="text/css"> <!-- *{padding:0; margin:0} img{border:0; display:block;} BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center } .dis { DISPLAY: [...]