学习阶段GET到的零碎技巧

前端零碎技巧

css

给div标签设置一个最小高度，并且随内容变化而变化高度

.div{
    height:auto!important;
    min-height:50px;
}

给p标签设置首行缩进

.p{
    text-indent: 2em; /*1em=16px，16px为浏览器的默认字体大小。*/
}

span标签设置

行标签要设置高度要设置成块或其它元素: display:block

.span{
    display:inline-block;width:50px;height:30px
    text-align:center；/*水平居中*/
    line-height：30px;/*值为span的高度 垂直居中*/
}

按钮样式及悬停

/*搜索图标*/.search-button{background-color: white;color: black;border:0 solid #4CAF50; /* Green */border-radius: 2px;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;} 
/*鼠标停留*/.search-button:hover {background-color: #4CAF50; /* Green */color: white;}

JavaScript

文章分页处理

将后台获取到的发布的博客、数量、总页数通过Model传给前端，前端通过点击事件跳转页面，和后台分页不同的操作是在点击按钮时要获取当前url中的页码参数，在通过获取的页码参数进行下一页、上一页的访问。 关键操作是通过window.location.search获取当前页面url中"?"开始的部分，在通过split分割获取页码参数。url.split("=")[1]获取的就是page=1中的1.

$(function (){
        $("#next").click(function () {
            var url=window.location.search;
            var currentPage=url.split("=")[1];
            if(currentPage==${pages}){
                return;
            }
            currentPage++
            location.href="/blog/index?page="+currentPage;
        });
        $("#previous").click(function(){
            var url=window.location.search;
            var currentPage=url.split("=")[1];
            if(currentPage==1){
                return;
            }
            currentPage--;
            location.href="/blog/index?page="+currentPage;
        });

重置模态框

$("#myModal").on("hide.bs.modal",function(){//模态框隐藏时执行
        window.location.reload();//重置模态框内容（变成一开始的样子）
    })