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

久伴
久伴
久伴
452
文章
493
评论
2019年3月17日19:19:07 2 582 3187字阅读10分37秒
这个界面采用bootstrap框架编写,是久伴在学习bootstrap的时候写的一个demo,后续会把打赏名单做成滚动式的,替代表单,或者做滚动监听,表格内部做滚动

在线预览

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

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月17日19:19:07
分享久伴博客浏览器滚动条样式 HTML+CSS

分享久伴博客浏览器滚动条样式

分享一个比较炫酷的浏览器滚动条样式,喜欢自带的可以路过~~,效果图见久伴博客右侧浏览器滚动条,,喜欢简洁的可以看这篇文章https://jiubx.com/2050.html css代码 ::-web...
最近在弄电子商城静态界面 前端作品

最近在弄电子商城静态界面

LOGO属实有点丑,话说前端美不美60%看图片搭配,哈哈 演示图 部分代码 本地下载 源码说明 如果你有前端技能,等不急后续界面,可以自己完善后续界面
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    • avatar 買論文 1

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

      • avatar 弥雅尔尔 4

        这有意思啊,收了!