directorio
Mostrar y ocultar
monitor
display: none; // Ocultar
display: block; // muestran
div{
width:200px;
height:200px;
display:none;// 隐藏标签
}
p{
}
<div> </div>
<p>哈哈</p>
Después de la nota elementos ocultos no son retenidos posición.
visible
div{
width:200px;
height:200px;
visibility:visible; //hidden 隐藏后保留位置
}
enfoque de patatas de imitación
a{
display:block;
width:448px;
height:252px;
margin:100px;
position:relative;
}
.mask{
width:;
height:;
background: rgba(0,0,0,0.4) url() no-repeat center;
display:none;
}
a:hover .mask{
display:block;
}
<a herf="#">
<img src = "">
<div class="mask">
</div>
</a>
Desbordamiento
overflow: scroll / oculto / visible / auto
scroll总是显示滚动条
auto 随内容决定是否显示滚动条
cursor del ratón estilo
cursor:pointer; //变成小手形状
cursor:text; // I 的样式
cursor:move; // + 的样式
cursor:defualt; // 默认 小白箭头的样式
contornos de esquema
outline:none; //取消轮廓线。
轮廓线 是绝大多数表单都有的。
input{
outline:none;
border: 1px solid red;
}
textarea{
resize:none;//防止拖拽
outline:none;
}
alineada verticalmente
vertical-align
img{
vertical-align:middle;//中线对齐
}
默认是基线对齐的。
该属性主要用于 行内块或者行元素对齐方式。
Desbordamiento de visualización de texto puntos suspensivos
white-space:nowrap;
overflow:hidden;
text-overflow:elipsis; //clip
La tecnología CSS sprites
避免多次去服务器端请求图片,使用一张大图。
puertas correderas
.nav a{
height:33px;
line-height:33px;
color:#fff;
text-decoration:none;
background: url() no-repeat;
display:inline-block;
padding-left:15px;
}
.nav span{
background: url() no-repeat right;
display:inline-block;
padding-right:15px;
}
.nav a:hover , .nav a:hover span {
background-image: url()
}
滑动门: a 固定左侧,span展示右侧
Fuentes
icono de fuente
体积小 透明度 颜色 选择, 几乎所有的浏览器都支持。
Página web:
icomoon
icono de fuente (iconfont.cn)
fuente
<style>
//声明字体
@font-face{
font-family:"";
src:
font-style:normal;
}
//引用字体
span{
font-family:"icommon";
color:xx;
}
</style>