css，js一些小技巧

1.元素的垂直水平居中

<style>
.father{
   position: relative;
}
.son{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
<div class="father">
   <div class="son"></div>
</div>

2.强制禁止换行

 white-space:nowrap;

3.超出出现滚动条

<style>
   .slide{
         overflow: auto;
         width: 100%;
    }
</style>
<div class="slide">
</div>

 4.css隐藏滚动条，保留鼠标滚动效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏滚动条</title>
    <script src="js/jquery-1.11.2.min.js"></script>
    <style type="text/css" media="screen">   
        *{
            margin:0;
            padding:0;
         }

         li{
            list-style-type:none;
         }
        .nav-left{  
            height: 300px;  
            width: 200px;  
            overflow: hidden;  
            border: 1px solid red;  
            margin: 200px auto;  
        }  
        .nav-ul{  
            height: 100%;  
            width: 220px;  
            overflow-y: auto;  
            overflow-x: hidden;  
        }  
        .nav-li{  
            border-bottom: 1px solid #ccc;  
            line-height: 40px;  
            text-align: center;  
            width: 200px;  
        }  

    </style>
</head>
<body>
    <div class= "nav-left">  
        <ul class= "nav-ul">        
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
            <li class="nav-li">列表</li>  
        </ul>  
    </div>  
</body>
</html>

 5.jQuery和js选择元素有差异

      JS获取的是DOM元素，而jQuery返回的是jQuery对象它是一个类数组对象，属性0，1，2...中存着查到的DOM对象，它有一个length属性，表示查到的DOM对象总数。jQuery对象执行一些方法时，会迭代在每一个DOM对象上执行该方法。

6.jQuery绑定事件在手机端失效,个绑定事件的按钮添加 css属性 cursor:pointer;

7.多个横向排列的元素带边框同时相邻的是单边框，并且选中样式四个边框都变色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .classify-ul{
      list-style-type:none;
    }
    .classify-ul li{
      float: left;
      width: 100px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border: 1px solid #555;
      position: relative;
      margin-right: -1px;
     /* */
    }
    .classify-ul li:first-child{
       border-bottom-left-radius: 6px;
       border-top-left-radius: 6px;
    }

    .classify-ul li:last-child{
      border-bottom-right-radius: 6px;
      border-top-right-radius: 6px;
    }
    .classify-ul li.active{
      border: 1px solid #00a0e9;
      z-index: 1;
    }

  </style>
</head>
<body>
 <ul class="classify-ul">
   <li class="active">全部</li>
   <li>分类1</li>
   <li>分类2</li>
   <li>分类3</li>
 </ul>
</body>
</html>

 8、给table设置宽度

table{ table-layout:fixed }

 

posted @ 2018-05-04 01:53  (⊙o⊙)买噶  阅读(291)  评论(0)  编辑  收藏  举报