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

css.zip (257 KB)

下载次数: 0