用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实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
随机推荐
- 生产者消费者JAVA实现
三种实现方式: 1. Object对象的wait(),notify(),加synchronize. 2. Lock的await(),signal(). 3. BlockingQueue阻塞队列. Ob ...
- 解决Android Studio中Rendering Problems错误
android studio提示错误信息如下图: 解决办法: 打开styles.xml文件 在Theme.AppCompat.Light.DarkActionBar前面加上Base. 修改后解决错误:
- Win10下配置Java 环境变量
在Win10中配置环境变量的方法跟在Win8和Win7中有些不同,看了看网上好多还是Win7/8里面的配置方法.虽然从原理上基本上没什么问题,但有些细节却会让人很苦恼.特意整理下新的配置方法.我假定你 ...
- KALI LINUX系统初始化配置
1.Kali Linux安装VirtualBox增强功能 VirtualBox增强功能介绍:物理机与虚拟机之间的文件共享.物理机与虚拟机之间的剪切板共享.虚拟机的direct3D支持,这样虚拟机窗口就 ...
- 浅析ProcessBuilder
概述 ProcessBuilder类是J2SE 1.5在java.lang中新添加的一个新类,此类用于创建操作系统进程,它提供一种启动和管理进程(也就是应用程序)的方法.在J2SE 1.5之前,都是由 ...
- 翻翻git之---可用作课程表/排班表的自定义table库ScrollTableView
转载请注明出处:王亟亟的大牛之路 最近一直在写混合开发的东西,是时候温故下native的了. 一年多之前领导提了一个双性滚动+快点击的"TableView"那时候自己整了2 3天没 ...
- Redis之基本数据类型
Redis 基本数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). redis类型 含义 S ...
- .net 获取当前电脑账户
string domainAndName = User.Identity.Name; ] { '\\' }, StringSplitOptions.RemoveEmptyEntries); strin ...
- apt get update无法正常使用解决方案(转载)
apt get update无法正常使用 解决方法参考博客 [问题描述] 前几天执行apt相关命令(如apt-get update),都会长时间停在``等待报头'',超时后,显示连接超时. 换了快速指 ...
- 哥德巴赫猜想-nefu2 & 分拆素数和 hdu2098
哥德巴赫猜想-nefu2 & 分拆素数和 hdu2098 //哥德巴赫猜想 #include <iostream> #include <cmath> #include ...