响应式打赏界面-适合博客打赏界面

[mark_a]这个界面采用bootstrap框架编写,是久伴在学习bootstrap的时候写的一个demo,后续会把打赏名单做成滚动式的,替代表单,或者做滚动监听,表格内部做滚动[/mark_a]

在线预览

小哥哥小姐姐觉得博客不错的可以打赏一波哈

https://jiubx.com/jiuban/css/index.html

界面截图

代码预览

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css">
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>  
	
	<script src="./bootstrap/js/bootstrap.js"></script>
	<style type="text/css">
		.jiubimg {
			background-image: url(https://jiubx.com/wp-content/uploads/2018/12/2018120515263041.jpg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		.jiubcenter {
			text-align: center;
			margin-top: 35px;
			margin-bottom: 35px;
		}
		.jiubyanse {
			color: #ffffff;
		}
		.jiubmargin {
			margin-top: 35px;
		}
	</style>
<title>打赏我们</title>
</head>
<body>
 <section>
 	<div class="jiubimg">
 		<div class="container">
 			<div class="row">
 				<div class="col-md-12 jiubyanse jiubcenter ">
 					<h3>打赏我们</h3>
 					<p><b>久伴博客成立于2018年2月至今已经一年多了,主要提供源码&教程&模版,对久伴博客不足之处可以提出,若您满意,请微微打赏一下久伴博客,感谢!</b></p>
 				</div>
 			</div>
 		</div>
 	</div>
 	<div class="container">
 		<div class="row jiubmargin jiubcenter ">
 			<ul class="col-md-3 list-unstyled list-inline">
 				<li>
 				<div>
 				 <h3>打赏三元</h3>
 				 <p>感谢老铁高端饮料</p>
 				 <img class="img-responsive img-thumbnail"  src="./img/zfb.png">
 				 </div>
 				</li>
 			</ul>
 			<ul class="col-md-3 list-unstyled list-inline">
 				<li>
 				<div>
 				 <h3>打赏六元</h3>
 				 <p>感谢老铁的炒饭</p>
 				 <img class="img-responsive img-thumbnail"  src="./img/zfb.png">
 				 </div>
 				</li>
 			</ul>
 			<ul class="col-md-3 list-unstyled list-inline">
 				<li>
 				<div>
 				 <h3>打赏九元</h3>
 				 <p>感谢老铁炒饭&奶茶</p>
 				 <img class="img-responsive img-thumbnail"  src="./img/zfb.png">
 				 </div>
 				</li>
 			</ul>
 			<ul class="col-md-3 list-unstyled list-inline">
 				<li>
 				<div>
 				 <h3>打赏16元</h3>
 				 <p>感谢老铁豪华盖浇饭</p>
 				 <img class="img-responsive img-thumbnail"  src="./img/zfb.png">
 				 </div>
 				</li>
 			</ul>
 		</div>
 	</div>
<div>
	<!--
  <div class="jiubimg">
  <div class="container">
  	 <div class="row">
  	 	<div class="col-md-12">
  	 		<div class="col-md-12 jiubyanse jiubcenter ">
 					<h3>打赏名单</h3>
 					<p><b>久伴博客成立于2018年2月至今已经一年多了,主要提供源码&教程&模版,对久伴博客不足之处可以提出,若您满意,请微微打赏一下久伴博客,感谢!</b></p>
 				</div>
  	 	</div>
  	 </div>
  </div>
</div>
-->
 	<div class="container">
 		<div class="row">
 				<div class="col-md-12">
 					<div class="table-responsive">
 						<table class="table table-hover condensed">
 					<thead>
 						<tr class="active">
 							<th>姓名</th>
 							<th>年龄</th>
 							<th>QQ</th>
 							<th>微信</th>
 							<th>金额</th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr>
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr class="warning">
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr class="success">
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr>
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr class="danger">
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr>
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr class="info">
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr>
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr class="warning">
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 							<tr>
 							<td>久伴</td>
 							<td>22</td>
 							<td>11949420</td>
 							<td>LLM94879466</td>
 							<td>16</td>
 						</tr>
 					</tbody>
 				</table>
 					</div>
 					
 				</div>
 			</div>
 		</div>
 	</div>
 </section>
</body>
</html>

人已赞赏
前端作品

适合介绍项目流程前端界面

2019-3-9 18:27:31

前端作品

花了小半夜时间做完一个客户的网站

2019-5-26 9:24:49

2 条回复 A文章作者 M管理员
  1. 久伴

    我们发生了很多想要做其他事情的事情。但是因为别人的压力而做了别的事。

  2. 久伴

    这有意思啊,收了!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索