个人博客开发中使用到的小技巧

 2019.3.10

使元素里的内容居中

在标签内直接加入属性align="center"即可实现对于DIV内容水平居中。

<div align="center">我被居中</div> 

　　

使背景沾满整个标签大小

body{
    /*加载背景图*/
     background-image：url（./images/background.jpg）;
     /* 背景图垂直、水平均居中 */

    background-position: center center;

    /* 背景图不平铺 */

    background-repeat: no-repeat;

    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;  //此条属性必须设置否则可能无效/

    /* 让背景图基于容器大小伸缩 */
   background-size: cover;

   /* 设置背景颜色，背景图加载过程中会显示背景色 */
   background-color: #CCCCCC;
}
或简写为如下CSS样式：
  body{
   background:url(./images/background.jpg)  no-repeat center center;
   background-size:cover;
   background-attachment:fixed;
   background-color:#CCCCCC;
}
  

View Code

截取文本（需要设定高度与宽度）

css截取单行：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

css截取多行：
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2; // 截取行数
-webkit-box-orient: vertical;

View Code

控制图片和文字在同一行显示

<div id="denglu"> 
<img src="reg.gif"> 
<img src="login.gif"> 
<a href="#">找回密码</a> 
</div>

#denglu *{ 
vertical-align:middle; /* 居中对齐， */ 
font-size:14px; 
} 

　　

　　

2019.3.11