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

 

 2019.3.10

使元素里的内容居中

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

?

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

 

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

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

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

 

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

?

1 2 3 4 5

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

?

1 2 3 4

#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" />

 

?

1 2 3 4 5 6

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

　

?

1 2 3 4 5

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

　　

　

border属性设置边框

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

?

1 2 3

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

　　

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

?

1 2 3

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

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12

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

　

简化代码，一行写完

?

1	border:5px double #FF00FF;