常用CSS样式(持续更新)

一、标签

1、ul同一行显示

    ul为无序列表,ol为有序列表,li为列表元素

ul:list-style:none // 每行的样式,有圆形等
li:float:left // 默认占行排列

二、宽高

1、强制宽高

div{width:100%!important; height:100%!important;}

三、样式

1、透明度

background-color:rgba(0,0,0,0.5);

2、div并排显示

一、css float同行显示

<style>
  div{float:left}
</style>

<div id=“leftDiv”>第一个div盒子</div>
<div id="rightDiv">第二个div盒子</div>

二、使用css display同行显示

<style>
div{
display: inline;
}
</style>

<div id=“leftDiv”>第一个div盒子</div>
<div id="rightDiv">第二个div盒子</div>

三、同行并固定宽度


<div id=“leftDiv” style=“float:left;width:600px;”>第一个div盒子</div>
<div id="rightDiv" style="display:inline;width:300px;">第二个div盒子</div>

3、鼠标指针光标样式

一、光标样式效果图

二、光标使用说明

我们在DIV+CSS布局时候,我们希望鼠标指向某个局部span标签对象时候,鼠标指针光标就变为手指状态,这个时候我们就对对象span设置cursor: pointer即可。以上我们图例展示常用的鼠标光标形状与css单词,希望布局时候更加自身需要选择设置鼠标指针样式。

4、元素垂直居中

行级元素:设置其父级为text-align:center;块级元素:设置固定宽度width,并设置left-margin与right-margin都为auto。许多人可能会使用vertical-align:middle却发现无效,因为这只针对单元格table-cell有效。以下介绍6种垂直居中的方法,大家对应入座用于合适的容器中:

1.Line-Height Method

line height demo

单行文本居中:

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

图片垂直居中:

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

2.CSS Table Method

table cell demo

通用:

<div id="parent">
    <div id="child">Content here</div>
</div>
#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

IE兼容:

#child {
    display: inline-block;
}

3.Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

块级元素(全部浏览器通用):

<div id="parent">
    <div id="child">Content here</div>
</div>
#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

4.Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

通用(但不支持IE7及其以下版本):

<div id="parent">
    <div id="child">Content here</div>
</div>
#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

5.Equal Top and Bottom Padding

vertical centering with padding demo

通用:

<div id="parent">
    <div id="child">Content here</div>
</div>
#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

6.Floater Div

vertical centering with floater div demo

通用:

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>
#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

5、强制换行和超出隐藏

一、强制换行

1 word-break: break-all; 只对英文起作用,以字母作为换行依据。

2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据。

3 white-space: pre-wrap; 只对中文起作用,强制换行。

二、超出隐藏

1 white-space:nowrap; 禁止换行。

2 overflow:hidden; 超出内容隐藏。

3 text-overflow:ellipsis;  超出内容…表示。

1、样式示例

// 样式示例
.unitBlks li {
	float: left;
	position: relative;
	margin: 3px 2px;
	width: 77px;
	height: 76px;
	border: 1px solid #e0e0e0;
	border-radius: 2px;
	cursor: pointer;
	behavior:url(css/PIE.htc);
}
.unitBlks li:hover,
.unitBlks li.on {
	border: 1px solid #1d7cd9;
}
.unitBlks li i {
	display: block;
	margin: 10px auto 0;
	width: 38px;
	height: 38px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.unitBlks li:hover i,
.unitBlks li.on i {
	background-position: 0 -38px;
}
.unitBlks li em {
	display: block;
	position: absolute;
	right: 5px;
	top: 5px;
	width: 14px;
	height: 14px;
	background-image: url('../images/check.png');
	
	background-repeat: no-repeat;
	background-position: 0 0;
}
.unitBlks li.on em {
	background-position: 0 -14px;
}
.unitBlks li .text {
	display: block;
	line-height: 28px;
	font-family: '宋体';
	font-size: 12px;
	color: #323232;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.unitBlks li:hover .text,
.unitBlks li.on .text {
	color: #1d7cd9;
}

2、代码示例

3、结果示例

    span的title属性是关键,当文字超出时以……显示,鼠标移动到该对象时会显示title的内容

 

 

发帖时间: CSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注