CSS常用样式总结积累

[color=red][size=large][b]1.把一个链接设置成一个按钮[/b][/size][/color]

.saveButton{
	    border-radius: 0.5em;
	    box-shadow: 0px 0px 1px ;
	    cursor: pointer;
	    display: inline-block;
	    font: 12px/100% Arial,Helvetica,sans-serif;	    
	    padding: 3px 12px;
	    text-align: center;
	    text-decoration: none;
	}

[b]text-align[/b] [color=red]设置或检索对象中内容的水平对齐方式[/color]

[b]text-decoration[/b] [color=red]检索或设置对象中的文本的装饰 none表示无下滑线[/color]

[b]padding [/b] [color=red]内补白 上下3px 左右12px [/color]

[b]box-shadow [/b] [color=red]阴影效果 水平阴影 0px 垂直阴影 0px 阴影效果 1px[/color]

[b]cursor 设置鼠标移动过去的图标类型[/b]

[b]display [/b] [color=red]设置对象如何显示 inline-block指定对象为内联块元素[/color]

[color=red][size=large][b]2.设置背景图片[/b][/size][/color]

.box_top_left{
		width: 42px;
		height: 40px;
		background: url("box_left.png") no-repeat;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.box_top_right{
		width: 10px;
		height: 40px;
		background: url("box_right.png") no-repeat;
		position: absolute;
		top: 0px;
		right: 0px;
	}

	.box_top_center{
		height: 40px;
		background: url("box_center.png") repeat-x;
		position: absolute;
		left: 42px;
		top: 0px;
		right: 10px;
	}

[b]
width [/b] [color=red]设置对象的宽度[/color]

[b]height [/b] [color=blue]设置对象的高度[/color]

[b]background 设置背景 url用于指定背景图片的位置 no-repeat表示背景图像不平铺 repeat-x
背景图像在横向上平铺 repeat-y背景图像在纵向上平铺[/b]

[b]position [/b] [color=red]检索对象的定位方式 absolute位置已固定 left距离左边的位置 top距离上面的位置 right距离右边的位置 bottom距离底部的位置 [/color]


[size=large][color=red][b]3.实现tab切换[/b][/color][/size]

<div id="tabs0">
		<ul class="menu0" id="menu0">
			<li onclick="setTab(0,0)" class="hover">新闻</li>
			<li onclick="setTab(0,1)">评论</li>
			<li onclick="setTab(0,2)">技术</li>
			<li onclick="setTab(0,3)">点评</li>
		</ul>
		<div class="main" id="main0">
			<ul class="block">
				<li>新闻列表</li>
			</ul>
			<ul>
				<li>评论列表</li>
			</ul>
			<ul>
				<li>技术列表</li>
			</ul>
			<ul>
				<li>点评列表</li>
			</ul>
		</div>
	</div>

#tabs0 {
	height: 200px;
	width: 400px;
	border: 1px solid #cbcbcb;
	background-color: #f2f6fb;
	margin-top: 2px;
}

.menu0 {
	width: 400px;
}

.menu0 li {
	display: block;
	float: left;
	padding: 4px 0;
	width: 100px;
	text-align: center;
	cursor: pointer;
	background: #FFFFff;
}

.menu0 li.hover {
	background: #f2f6fb;
}

#main0 ul {
	display: none;
}

#main0 ul.block {
	display: block;
}

function setTab(m, n) {
		var tli = document.getElementById("menu" + m)
				.getElementsByTagName("li");
		var mli = document.getElementById("main" + m)
				.getElementsByTagName("ul");
		for (i = 0; i < tli.length; i++) {
			tli[i].className = i == n ? "hover" : "";
			mli[i].style.display = i == n ? "block" : "none";
		}
	}

[color=orange]标题中点击的那个tab的 li颜色与内容的颜色相同[/color]

[color=red]点击后的函数遍历li 找到对应的然后改变显示方式 [/color]

[size=large][b][color=red]4.按钮样式[/color][/b][/size]

.btn {
	display: inline-block;
	padding: 3px 8px;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

class = 'btn'

[size=large][b][color=red]5.设置背景图片[/color][/b][/size]

.examicon-attaches{
	background:url('../images/icon/attaches.png') no-repeat center center;
}
.examicon-onlineexam{
	background:url('../images/icon/onlineexam.png') no-repeat center center;
}
.examicon-eval{
	background:url('../images/icon/eval.png') no-repeat center center;
}
.examicon-help{
	background:url('../images/icon/help.png') no-repeat center center;
}
.examicon-plan{
	background:url('../images/icon/plan.png') no-repeat center center;
}
.examicon-myplan{
	background:url('../images/icon/myplan.png') no-repeat center center;
}