使用position:fixed属性让DIV居中
position:fixed属性让DIV居中的关键代码是width:1000px;position:fixed;left:0px;right:0px;margin-left:auto;margin-right:auto;
段落文字的缩进
text-indent:35px 或 text-indent:2em
em和px的差别和使用技巧
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em有如下特点：
1、em的值并不是固定的；
2、em会继承父级元素的字体大小。
我们在写CSS的时候，需要注意：重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题网友已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。
怎么把<input>输入框做成圆角？
如果你的浏览器支持CSS3,则使用border-radius就可以达到你要的圆角输入框效果 <input type="text" style="border-radius:10px;">
兼容性极强的圆角DIV，兼容IE老版本
<style type="text/css">
.kuang {width:1006px; }
b{display:block;height:1px;background:#fff;overflow:hidden;}
.w300{width:1000px;margin:0 4px;background:#ccc;} /*第一角度*/
.w300-2{width:1000px;margin:0 3px;} /*第二脚度*/
.w302{width:1002px;margin:0 2px;} /*第三脚度*/
.w304{width:1004px;margin:0 1px;height:2px;} /*第四脚度*/
.b-l-r{border-left:1px #ccc solid;border-right:1px #ccc solid;} /*它的左右圆角border*/
.text-box{background:#fff ;width:1006px;height:540px;text-align:center;} /*中间部分*/
</style>
<div class="kuang cen">
<b class="w300"></b> <!--上两角-->
<b class="w300-2 b-l-r"></b>
<b class="w302 b-l-r"></b>
<b class="w304 b-l-r"></b>
<div class="text-box b-l-r">
科杰在线pc354.com
</div>
<b class="w304 b-l-r h2"></b> <!--下两脚-->
<b class="w302 b-l-r"></b>
<b class="w300-2 b-l-r"></b>
<b class="w300"></b>
</div>
让Input文本框和按钮与文字水平居中对齐
input {vertical-align:middle}
<li>隔行变色，划过变色，可支持多个ul
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px; text-indent:1em;font-size:12px;}
</style>
<script type="text/javascript">
window.onload = function() {
var arrayli = document.getElementById('content').getElementsByTagName('li');
var bool = true; //奇数行为true
var oldStyle; //保存原有样式
for(var i = 0;i<arrayli.length;i++){
//各行变色
if(bool === true){
arrayli[i].className = "change";
bool = false;
}
else {
arrayli[i].className = "";
bool = true;
}
//划过变色
arrayli[i].onmouseover = function() {
oldStyle = this.className;
this.className = "current"
}
arrayli[i].onmouseout = function() {
this.className = oldStyle;
}
}
}
</script>
<div class="container">
<ul id="content">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
支持多个ul的
<script type="text/javascript">
window.onload = function() {
changeColor('content');
changeColor('content2');//写上要控制的UL的ID，想控制几个就控制几个
changeColor('content3');
}
function changeColor(id) {
var arrayli = document.getElementById(id).getElementsByTagName('li');
var bool = true; //奇数行为true
var oldStyle; //保存原有样式
for(var i = 0;i<arrayli.length;i++){
//各行变色
if(bool === true){
arrayli[i].className = "change";
bool = false;
}
else {
arrayli[i].className = "";
bool = true;
}
//划过变色
arrayli[i].onmouseover = function() {
oldStyle = this.className;
this.className = "current"
}
arrayli[i].onmouseout = function() {
this.className = oldStyle;
}
}
}
</script>
<span>第一个UL</span>
<div class="container">
<ul id="content">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<br />
<span>第二个UL</span>
<div class="container">
<ul id="content2">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<span>第三个UL</span>
<div class="container">
<ul id="content3">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
科杰在线pc354.com收集整理，转载请注明出处
最后更新日期：2015-12-29
