bootstrap+css进行页面布局
效果
用到了bootstrap中的表格css、圆形css、以及上一页下一页css。
布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善。
不仅仅要会使用bootstrap中的样式,也要能够灵活的运用css样式,两者结合,才能够融会贯通,活学活用。
1.表格部分
<div id="datalist">
<table class="table table-striped">
<thead>
<tr>
<th>项目</th>
<th>次数</th>
<th>奖金</th>
</tr>
</thead>
<tbody>
<empty name="list"><tr><td class="text-center" colspan="3">暂无数据</td></tr></empty>
<volist name="list" id="vo">
<tr>
<td>{sh:$vo.name}</td>
<td>{sh:$vo.bonus_count}</td>
<td>{sh:$vo.bonus_money}</td>
</tr>
</volist>
</tbody>
</table>
</div>
用到了bootstrap中的table、table-striped
然后自定义css
.table th {
color: #C4C4C4;
} .table tbody tr td+td+td {
color: #D3964F;
}
这样就实现了上面的表格样式了。
2.奖金
<div id="total" class="img-circle">
<div class="text-center money-txt">
<h3>奖金</h3>
<h2>¥{sh:$total_money}</h2>
</div>
</div>
用到了bootstrap中的img-circle、text-center、h3、h2。
然后自定义css
#total {
width: 140px;
height: 140px;
background-color: #EC6C00;
margin: auto;
} #total .money-txt {
color: white;
padding-top: 10px;
}
是的圆圈居中,黄色,字体白色,字居中显示等等。
bootstrap结合自己定义的css样式共同实现需要的页面布局。
bootstrap提供了一些基础布局,需要灵活使用。
3.选择月份
<div id="select-date">
<ul class="pager">
<li class="previous"><a onclick="lastMonth();"><span aria-hidden="true">←</span> </a></li>
<span class="date-txt"><strong>{sh:$s_year}.{sh:$s_month}</strong></span>
<input type="text" id="s_year" value="{sh:$s_year}" hidden="hidden">
<input type="text" id="s_month" value="{sh:$s_month}" hidden="hidden">
<li class="next"><a onclick="nextMonth();"><span aria-hidden="true">→</span></a></li>
</ul>
</div>
上下月份选择,用到了bootstrap中的pager、previous、next等等。
然后灵活的添加表单、click事件。实现动态效果。
js
<script type="text/javascript">
function lastMonth(){
var s_year = $('#s_year').val();
var s_month = $('#s_month').val();
window.location.href="{sh::U('User/bonus')}&s_year="+s_year+"&s_month="+s_month+"&type=last";
} function nextMonth(){
var s_year = $('#s_year').val();
var s_month = $('#s_month').val();
window.location.href="{sh::U('User/bonus')}&s_year="+s_year+"&s_month="+s_month+"&type=next";
}
</script>
4.php获取数据
public function bonus() {
if($type = $this->_request('type','trim')){
$s_year = $this->_request('s_year','trim');
$s_month = $this->_request('s_month','trim');
if($type == 'last'){ // 获取上一月
if($s_month==1){
$useYear = $s_year-1;
$useMonth = 12;
}else{
$useYear = $s_year;
$useMonth = $s_month-1;
}
} if($type == 'next'){ // 获取下一月
if($s_month==12){
$useYear = $s_year+1;
$useMonth = 1;
}else{
$useYear = $s_year;
$useMonth = $s_month+1;
}
}
}else{
// 获取当前年 月
$useYear = date('Y');
$useMonth = date('m');
}
$this->assign('s_year',$useYear);
$this->assign('s_month',$useMonth); $opener_id = $this->opener_id;
if(empty($opener_id)){
$this->error('数据有误');
}
$agent_id = $this->opener['agent_id']; //所属代理商id
$where['a.agent_id'] = $agent_id;
$where['a.year'] = $useYear;
$where['a.month'] = $useMonth;
// 获取当前拓展员当前月的奖金信息,以设置的获奖项目为基础
// 子查询获取当前代理商的全部奖金数据
$whereSub['a.opener_id'] = $opener_id;
$subQuery = M()->table('sh_opener_bonus a')->join('sh_incentive b on a.incentive_id = b.id')->where($whereSub)->field('a.id as bonus_id,b.id as incentive_id,b.money')->select(false); // 获取最终数据
$list = M()->table('sh_incentive a')->join('left join '.$subQuery.' b on a.id = b.incentive_id')->join('sh_incentive_item c on a.item_id = c.id')->where($where)->field('count(b.bonus_id) as bonus_count,sum( if( b.money > 0, b.money, 0)) as bonus_money,c.name')->group('a.id')->select();
$total_money = 0;
foreach ($list as $k => $v) {
$total_money += $v['bonus_money'];
}
$this->assign('total_money',$total_money);
$this->assign('list',$list);
$this->display();
}
bootstrap+css进行页面布局的更多相关文章
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
- css+div页面布局
div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- css篇-页面布局-三栏布局
页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...
- html css 网络 页面布局 颜色 参考 拾取器网址
http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ ========================== ...
- css后台页面布局技巧
目标: 实现左边侧边栏固定,右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条,较多时可以滚动 code: < ...
- css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...
- 前端武器库系列之html后台管理页面布局
设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- 使用SpringMVC报错 Error creating bean with name 'conversionService' defined in class path resource [springmvc.xml]
使用SpringMVC报错 Error creating bean with name 'conversionService' defined in class path resource [spri ...
- 新东方雅思词汇---7.3、dioxide
新东方雅思词汇---7.3.dioxide 一.总结 一句话总结: di(双)+oxide 英 [daɪ'ɒksaɪd] 美 [daɪ'ɑksaɪd] n. 二氧化物 词组短语 carbon di ...
- 查询相应的key
一.key pattern 查询相应的key (1)redis允许模糊查询key 有3个通配符 *.?.[] (2)randomkey:返回随机key (3)type key:返回key存储的类型 ...
- InnoDB存储引擎的B+树索引算法
关于B+树数据结构 ①InnoDB存储引擎支持两种常见的索引. 一种是B+树,一种是哈希. B+树中的B代表的意思不是二叉(binary),而是平衡(balance),因为B+树最早是从平衡二叉树演化 ...
- 015——VUE中使用key唯一令牌解决表单值混乱问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Spring AOP(面向切面示例)
什么是AOP?基本概念切面(aspect):横切关注点被模块化的特殊对象.通知(advice):切面必须要完成的工作.切面中的每个方向称之为通知.通知是在切面对象中的.目标(target):被通知的对 ...
- 原创:Scala学习笔记(不断更新)
Scala是一种函数式语言和面向对象语言结合的新语言,本笔记中就零散记下学习scala的一些心得,主要侧重函数式编程方面. 1. 以递归为核心控制结构. 实现循环处理的方式有三种:goto,for/w ...
- .NET学习路线之我见(转)
这是我的第一篇博客,所以,我想写个大的,至少这个话题是比较大的. 在文章的开头,首先声明,这篇文章仅代表我个人的想法,并且只适合.NET的初学者,如果你已经有两年以上的开发经验,我劝你还是别看了,省得 ...
- 从零开始编写深度学习库(五)Eigen Tensor学习笔记2.0
1.extract_image_patches函数的使用: 假设Eigen::Tensor形状为(3,8,8,9),现在要对第二维.第三维根据size大小为(2,2),stride=(2,2),那么如 ...
- virtual box 安装 centos 7 不能上网问题解决总结
http://blog.csdn.net/u013264730/article/details/51146359 1.设置virtualbox 网络选项 [root@centos1 ~]# cat / ...