前端零碎技巧
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;
});