版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24767091/article/details/77469650
一.写横向列表，加浮动使其从左自右排列
1. 出现问题：上面一行比较短的地方，下面一行会补上。
解决方法：a.两列时
@media screen and (min-width:768px) and (max-width:993px) {
.consult-list li.col-sm-6:nth-child(2n+1){clear: both;}
}b.正常电脑屏幕三列时
.consult-list li.col-md-4:nth-child(3n+1){clear: both;}2.列表模板
a.html
<li class="col-xs-12 col-sm-6 col-md-4">
<div class="item">
<a href="#"> <img src=""></a>
<a href="#">
<h3 class="item-title"></h3></a>
<p class="name">作者 <span>2017-08-02</span></p>
<a href="#"><p>2016年8月26日下午，北京弗布克管理咨询有限公司董事长孙宗虎与韩国Unidocs公司代表理事金吉泰于北京国际图书博览会韩国出版行业促进
会专席就elearning事业发展合作进行了深入的洽谈，最终，双方达成共识，并签订了战略合作协议。</p></a>
<div class="meta">
<a class="collection-tag">风沙</a>
<a class="collection-tag">专家</a>
<a class="collection-tag">北方</a>
<a title="浏览量">
<i class="glyphicon glyphicon-eye-open"></i> 14
</a>
<a title="赞一个" class="good">
<b class="113"></b>
<i class="glyphicon glyphicon-star "></i>
<span>3</span>
</a>
</div>
</div>
</li>b.css
.consult-list li.col-md-4:nth-child(3n+1){clear: both;}
.consult-list .consult-title{ margin: 50px 0 8px 0;font-size: 28px;}
.consult-list:first-child .consult-title{margin-top: 10px;margin-bottom: 0px;}
.consult-list .item{border-radius: 4px;margin-top: 20px;padding: 3%;transition: transform 0.5s ease-out 0s, -webkit-transform 0.5s ease-out 0s;}
.consult-list .item:hover{box-shadow: 0 15px 30px rgba(10,10,10,0.4);transform: translateY(-5px);-ms-transform: translateY(-5px);-o-transform: translateY(-5px);-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px);}
.consult-list .item img,.consult-list .item h3,.consult-list .item p{width: 100%;}
.consult-list .item img{margin-bottom: 15px;height:auto;cursor: pointer;border-radius: 4px;transition: transform 0.5s ease-out 0s, -webkit-transform 0.5s ease-out 0s;}
.consult-list .item h3{ line-height: 26px;font-size: 18px;margin-top: 5px;color: #333;margin-bottom: 2px;}
.consult-list .item h3:hover{color: #004ea2;}
.consult-list .item p{text-indent: 0px;line-height: 30px;text-align: justify; line-height: 22px;margin-top: 13px;max-height: 132px;overflow: hidden;color: #333;}
p.name{display: inline;}
p.name span{color: #969696;display: inline-block;font-size: 14px;margin-left: 7px;border-left: 2px solid #ccc;line-height: 14px;padding-left: 10px;}.meta a:nth-last-child(2),.meta a:nth-last-child(1){font-size: 13px;}
.meta a {color: #969696;margin-right: 10px}
.meta a:nth-last-child(2),.meta a:nth-last-child(1){font-size: 13px;}
.meta .collection-tag {border: 1px solid #004EA2;color: #004EA2;margin-right: 10px;padding: 0px 3px;border-radius: 4px;margin-bottom: 5px;display: inline-block;}
.meta .collection-tag:hover {background: rgba(36,138,175,.05)}
.meta strong {font-weight: 700}
二、需求提交效果
a.html
<div class="newslist-right col-xs-12 col-sm-4 col-md-3 col-md-offset-1">
<div class="site-tree-tab">
<div class="leave-info">
<div class="error_alert">
<p></p>
<input class="countdown" name="" id="" value="5s">
</div>
<div class="loading">
<img src="/fbook/Public/Home/img/website/loading.png"><p>正在提交</p>
</div>
<div class="info">
<p>请提供您的需求，我们将及时答复</p>
<ul>
<li class="name-li">
<label for="">姓名 <span class="text-danger"></span></label>
<input class="form-control" id="name" type="text" name="name" placeholder="请输入姓名" maxlength="10">
</li>
<li class="tel-li phone-li">
<label for="">手机号码 <span class="text-danger"></span></label>
<input class="form-control" id="phone" type="text" name="phone" placeholder="请输入手机号码" maxlength="11">
</li>
<li class="need-li content-li">
<label for="">需求描述 <span class="text-danger"></span></label>
<textarea class="form-control" id="content" name="content" placeholder="请输入您的需求描述"></textarea>
</li>
<button class="btn btn-block btn-default" id ="RequireRegister">需求登记</button>
</ul>
</div>
</div>
</div>b.css
出现的边框变色阴影效果
.leave-info .info button:hover {
border-color: #66afe9;
-webkit-box-shadow: 1px 1px 6px #66afe9;
box-shadow: 1px 1px 6px #66afe9
}
.has-error {
border-color: #a94442!important;
-webkit-box-shadow: 1px 1px 6px #a94442;
box-shadow: 1px 1px 6px #a94442
}/**
* 需求登记
*/
$('#RequireRegister').click(function(){
var name = $.trim($('#name').val());
var phone = $.trim($('#phone').val());
var content = $.trim($('#content').val());
/**
* 手机号码正则表达式
*/
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
var reg_name = /^[\u4e00-\u9fa5]{0,}$/;
if (name == '') {
$('#name').addClass('has-error');
$('.name-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能为空');
} else if (name.length > 10) {
$('#name').addClass('has-error');
$('.name-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能超过10个字符');
} else if (name.match(reg_name) == null) {
$('#name').addClass('has-error');
$('.name-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>必须为汉字');
} else if (phone == '') {
$('#phone').addClass('has-error');
$('.phone-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能为空');
} else if (phone.length > 11) {
$('#phone').addClass('has-error');
$('.phone-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能超过20个字符');
} else if (phone.match(reg) == null) {
$('#phone').addClass('has-error');
$('.phone-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>格式错误');
} else if (content == '') {
$('#content').addClass('has-error');
$('.content-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能为空');
} else if (content.length > 500) {
$('#content').addClass('has-error');
$('.content-li span').html('<i class="glyphicon glyphicon-minus-sign"></i>不能超过500个字符');
} else {
$('.loading').fadeIn('fast');
$.post('{:U("")}',{name:name,phone:phone,content:content},function(json){
$('.loading').fadeOut('fast');
if (json['status']) {
$('.error_alert').css('color','#468847');
//倒计时
var countdown = 5;
AlertInfo(json['info']);
TimeCountDown();
function TimeCountDown () {
$('.countdown').get(0).value = countdown+'s';
if (countdown ==0) {
return ;
}
countdown--;
setTimeout(function () {
TimeCountDown();
},1000);
}
$('#name').val('');
$('#phone').val('');
$('#content').val('');
} else {
$('.error_alert').css('color','#b94a48');
AlertInfo(json['info']);
}
});
}
});
/**
* 获取焦点验证
*/
$('#name,#phone,#content').focus(function(){
$(this).removeClass('has-error');
$(this).prev().children('span').html('');
});
/**
* 失去焦点
*/
$('#name,#phone,#content').blur(function(){
$(this).removeClass('has-error');
});
/**
* 提示反馈
*/
function AlertInfo (info) {
var oalert = $('.error_alert');
oalert.find('p').html(info);
oalert.fadeIn('fast').delay(5000);
oalert.fadeOut('fast');
}d.效果图
三、右侧固定小导航
a.html
<!-- 右侧导航 -->
<div class="right-menu">
<div class="container">
<div class="row">
<ul class="menu-btn">
<li title="回到顶部" id="backtop">
<a class="backtop" href="#">
<i class="glyphicon glyphicon-menu-up"></i>
<p>回到<br>顶部</p>
</a>
</li>
<li title="需求登记">
<a href="requriement.html">
<i class="glyphicon glyphicon-edit"></i>
<p>需求<br>登记</p>
</a>
</li>
<li id="download" title="文件下载">
<a href="#">
<i class="glyphicon glyphicon-download-alt"></i>
<p>文件<br>下载</p>
</a>
<div class="download-wrap">
<ol>
<li><a href="#">澳大利亚职业教育联盟简介</a></li>
<li><a href="#">澳大利亚中澳合作办学项目</a></li>
<li><a href="#">澳大利亚TAE培训项目</a></li>
<li><a href="#">澳大利亚学前教育培训项目</a></li>
</ol>
</div>
</li>
<li title="返回首页">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
<p>返回<br>首页</p>
</a>
</li>
</ul>
</div>
</div>
</div>
/*右侧导航*/
.right-menu{position: fixed;right: 7px;bottom: 20px;z-index: 9;width: 52px;}
.right-menu .menu-btn>li{background-color: none;margin-bottom: 5px;border-radius: 4px;}
.right-menu .menu-btn>li >a{background-color: rgba(255, 255, 255, 0.53);cursor: pointer;border-radius:4px;border: 1px solid #dcdcdc;width: 50px;height: 50px;text-align: center;display: block;}
.right-menu .menu-btn>li >a i{padding-top: 8px;font-size: 22px;color: #6FB3E0;}
.right-menu .menu-btn>li >a p{color: #fff;margin-top: 8px;display: none;}
.right-menu .menu-btn>li:hover >a{background-color: #de0f18;border-color: #de0f18;}
.right-menu .menu-btn>li:hover>a i{display: block;}
.right-menu .menu-btn>li:hover>a>i{display: none;}
.right-menu .menu-btn>li:hover>a>p{display: block;}
#backtop{opacity: 0;}
.an-show{opacity: 1!important;}
#download:hover .download-wrap{display: block;}
#download .download-wrap{display: none;}
.right-menu .download-wrap{position: absolute;right:53px;top: 79px;padding-right:3px;}
.right-menu .download-wrap ol{border-radius: 4px;border: 1px solid #f2f2f2;background: #fff!important;padding: 15px 55px;min-height: 136px;}
.right-menu .download-wrap ol li{display: block;list-style: decimal;line-height: 26px;}
.right-menu .download-wrap ol li a{white-space: nowrap;color: #333;}
.right-menu .download-wrap ol li:hover a{color: #de0f18;}c.回到顶部js
// 返回顶部
$(window).scroll(function(){
$('#backtop').addClass('an-show');
var winH = $(window).scrollTop();
if (winH == 0) {
$('#backtop').removeClass('an-show');
}
})
$('.backtop').click(function(){
$('html,body').animate({
scrollTop:'0px'
},500);
})