用css和php脚本来使得poscms的list标签顺利输出记录
每次拿到前端给的页面,都会有意想不到的惊喜,因为他们给的页面总是不能很好地契合poscms的模板标签
输出规范,这时候就需要动点脑筋去解决问题了。
拿前两天拿到的一类(对,你没看错,是一类)页面来说吧,前端的布局是这样的:
这是一个列表页,当然用list标签来循环输出了,list标签实际上就是一个for循环,但是,页面布局写成这样,list标签
是无法直接循环输出的:
1.12条记录所属的DOM被分成了三组;
2.每一组中每一项的DOM结构还都不一样(用类名来控制个体间的样式差异)。
由小往大地来解决,先来解决每一组中4个DOM的结构不同问题:
1.解决同组中每个项目之间的不同
查看html之后,看到前端的布局是这样的:
<div class="fenzu"></div>
<div class="fenzu m_left"></div>
<div class="fenzu m_left"></div>
<div class="fenzu m_left"></div>
很显然,后面三个与第一个不同,需要加一个margin-left属性来控制彼此间的间隔,于是我去除了m_left这个类名
转向css样式表:
/*.main .m_left{margin-left: 35px;}*/
.kapianzu .fenzu:nth-child(),.kapianzu .fenzu:nth-child(),.kapianzu .fenzu:nth-child(){margin-left: 35px;}
这样就通过使用nth-child(n)解决了由类名控制样式造成的DOM差异。
2.各组之间的隔阂
我们可以想到,每组之间通过一个div使得第四项与第五项,第八项与第九项产生了隔阂,
这个隔阂直接导致list标签不能顺利输出相同的DOM,但是我们发现一个规律:
除了第一项、第五项、第九项前面多出个<div>;
第四项、第八项、第十二项后面多出个</div>之外,每一项的主体通过第一个问题的解决之后都是一模一样的;
所以,if判断就派上用场了:
{list......pagesize= page=} //开启分页,一页12项 {if $key==||$key==||$key==}
<div class="kapianzu">
{/if} <div class="kapian">
.........
</div> {if $key==||$key==||$key==}
</div>
{/if} {/list}
如此一来,就动态地展现了我们想要的DOM结构和样式。
用css和php脚本来使得poscms的list标签顺利输出记录的更多相关文章
- poscms基于list标签实现的查询分页功能
poscms系统本身有一个在查询页(search页面)实现的查询分页功能,基于系统封装的php函数dr_search_url() 但是今天的需求除了导航栏.列表页.详情页都实现查询功能外,关键是有两个 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- js实用方法记录-js动态加载css、js脚本文件
js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...
- Windows server 2008 IIS7发布asp.net mvc网站css、js脚本无法访问 问题解决
今天发布网站遇到一个感到很无语的问题,网站发布成功,浏览网站内容数据显示正常,就是没有样式,试了下脚本也是没有反应,如图效果: 接下来就是一顿苦找原因,检查iis设置.什么应用程序池.文件路径等各种检 ...
- 转载 yii2-按需加载并管理CSS样式/JS脚本
一.资源包定义 Yii2对于CSS/JS 管理,使用AssetBundle资源包类. 创建如下: backend/assets/AppAsset.php namespace backend\asset ...
- yii2-按需加载并管理CSS样式/JS脚本
原文地址:https://segmentfault.com/a/1190000003742452
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
随机推荐
- GET 对比 POST
HTTP 方法:GET 对比 POST HTTP 消息 标签列表(字母排序) 两种最常用的 HTTP 方法是:GET 和 POST. 什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户 ...
- @Override笔记
作用:用来保证正确重写方法,当你重写方法出错时,比如方法名误写,或者漏掉参数,编译器会提示编译错误. 使用场景:继承父类,重写父类方法:实现接口,实现接口方法. 备注:jdk1.5之允许在继承时使用, ...
- 照着官网来安装openstack pike之创建并启动instance
有了之前组件(keystone.glance.nova.neutron)的安装后,那么就可以在命令行创建并启动instance了 照着官网来安装openstack pike之environment设置 ...
- 20145307第十周JAVA学习报告
教材学习内容总结 Java的网络编程 1.计算机网络概述 (1)路由器和交换机组成了核心的计算机网络,计算机只是这个网络上的节点以及控制等,通过光纤.网线等连接将设备连接起来,从而形成了一张巨大的计算 ...
- 20145335郝昊《java程序设计》第1次实验报告
2014535郝昊<java程序设计>实验1实验报告 实验名称 利用java语言实现凯撒密码,并运行测试. 实验内容 用java语言实现凯撒密码,凯撒密码是一种代替的移位密码,它将明文加密 ...
- STC51几种简单的延时函数
STC51几种简单的延时函数 ,* 延时子程序 * * * ********************************************************************** ...
- struts2中各个jar包作用 (转)
Struts2.3.4 所需的Jar包及介绍 Jar包的分类 jar包名称 jar包版本 jar包 文件名 jar包 的作用 jar包内包含的主要包路径及主要类 依赖的自有jar包名称 依赖的第三方j ...
- POJ2503 STL map用法
2017-08-21 15:42:01 writer:pprp 除了用到map以外,输入也是一个问题 用到了sscanf详情请看上一篇博客 /* theme:第一章 - 分治算法 name: POJ ...
- $.extendGit 丢弃所有本地修改的方法
git checkout . #本地所有修改的.没有的提交的,都返回到原来的状态 git stash #把所有没有提交的修改暂存到stash里面.可用git stash pop回复. git rese ...
- codeforces600E Lomsat gelral
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...