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

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

轮播实现

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.min.css" rel="stylesheet" />

<ul class="bxslider">
  <li><img src="images/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
  <li><img src="images/pic3.jpg" /></li>
  <li><img src="images/pic4.jpg" /></li>
</ul>

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});	
</script>

border属性设置边框

效果为金黄色、5像素宽的点划线

border-style:dotted;
border-color:#FF9900;
border-5px;

效果为蓝色、2像素宽的虚线

border-style:dashed;
border-color:blue;
border-2px;

CSS中可以分别设置4个边框的不同样式，分别设定为border-left、border-right、border-top、border-bottom的样式。

 border-left-style:dotted;
            border-left-color:#FF9900;
            border-left-5px;
            border-right-style:dashed;
            border-right-clolr:#33CC33;
            border-right-2px;
            border-top-style:solid;
            border-top-color:#CC00FF;
            border-top-10xp;
            border-bottom-style:groove;
            border-bottom-color:#666666;
            border-bottom-15px;

简化代码，一行写完

 border:5px double #FF00FF;