CSS常用样式总结积累

1.把一个链接设置成一个按钮

.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;
	}

text-align 设置或检索对象中内容的水平对齐方式

text-decoration 检索或设置对象中的文本的装饰 none表示无下滑线

padding 内补白 上下3px 左右12px

box-shadow 阴影效果 水平阴影 0px 垂直阴影 0px 阴影效果 1px

cursor 设置鼠标移动过去的图标类型

display 设置对象如何显示 inline-block指定对象为内联块元素

2.设置背景图片

.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;
	}

width 设置对象的宽度

height 设置对象的高度

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

position 检索对象的定位方式 absolute位置已固定 left距离左边的位置 top距离上面的位置 right距离右边的位置 bottom距离底部的位置


3.实现tab切换

<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";
		}
	}

标题中点击的那个tab的 li颜色与内容的颜色相同

点击后的函数遍历li 找到对应的然后改变显示方式

4.按钮样式

.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'

5.设置背景图片

.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;
}