1、列表横排
将li的样式设置为
li {display:block;float:left;}
2、去除图片垂直方向的空白
最好的做法是为img 加上 vertical-align属性,这样就看不到空白了。
......
屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7与IE5.0可以识别*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。仅IE7可以识别*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。IE6及IE6以下识别* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {…}
这句与上一句的作用相同。仅IE6不识别,屏蔽IE6select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。仅IE6与IE5不识别,屏蔽IE6与IE5select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与 ......
1.一行三列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head><title>css布局:一行三列</title>
<link rel="stylesheet" href="css/03_3columnplustopbox.css" mce_href="css/03_3columnplustopbox.css" type="text/css" media="all" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="Owen Briggs:www.w3cn.org" />
</head><body>
<div id="top">
<p>top</p>
</div>
<div id="left">
<p>left</p>
</div>
<div id="middle">
<pre>
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #666;
background: #FFF;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
......
css控制位置:
纯数字
el.style.posLeft = 0;
el.style.posTop = 0;
数字+单位
el.style.left = "0px";
el.style.top = "0px";
css控制元素的样式:
document.getElementById("para").style.fontWeight ="bold";
或(其他也是这样):
document.getElementById("para").className ="strong"; ......
css控制位置:
纯数字
el.style.posLeft = 0;
el.style.posTop = 0;
数字+单位
el.style.left = "0px";
el.style.top = "0px";
css控制元素的样式:
document.getElementById("para").style.fontWeight ="bold";
或(其他也是这样):
document.getElementById("para").className ="strong"; ......
1、容器不扩展问题
这个是经常在我切图的时候遇到的问题,如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>容器不扩展问题</title>
<style type="text/css">
#divGroup{ border:2px solid #333;}
#a,#b{ border:2px solid #333; float:left; margin:5px;}
</style>
</head>
<body>
<div id="divGroup">
<div id="a">子容器a</div>
<div id="b">子容器b</div>
</div>
</body>
</html>
提示:你可以先修改部分代码再运行。
解决办法:在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决,其实这个是错误办法。太增加代码量了
2、margin双边距问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml ......
白色 #FFFFFF 2 红色 #FF0000 3 绿色 #00FF00 4 蓝色 #0000FF
5 牡丹红 #FF00FF 6 青色 #00FFFF 7 黄色 #FFFF00 8 黑色 #000000
9 海蓝 #70DB93 10 巧克力色 #5C3317 11 蓝紫色 #9F5F9F
12 黄铜色 #B5A642 &nb ......