工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > html+css > 正文

cms系统loop循环造成的页面布局问题如何解决

发布时间:2018-05-14 20:55:32作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

一直关注我博客的人都知道,我博客首页版面上之前有参差不齐的问题,如果把首页保存成图片看会更明显,就是因为一直找不到解决loop循环造成页面布局问题的方法。

杨青个人博客也存在同样的问题,只不过现在解决了,跟我的方法是一样的,nth-child(),下面来着重讲解一下nth-child()、position定位在此处的应用。

先看下面这张图:

不管是phpcms、dedecms还是帝国cms都有loop循环,loop循环一般用于ul里面的li循环,像上面那张图里的li之间的间距,因为loop只对一个li进行循环,所以ul li{}这种样式写法,注定会造成页面的参差不齐,这个时候就要使用nth-child()了。用浮动和间距来布局这四个li很容易出错,也会对下面的结构造成影响,使用了nth-child()就用不了浮动了,不相信的朋友可以亲自试一下,最好的办法就是nth-child()和position定位结合起来用,像下面这样:

nth-child()和position定位的应用并不难,有点难度的是写响应式时如何清除定位:

我一直坚持用原生代码写响应式,下面分享一下在li里面的内容比较复杂时如何写响应式方面的一些经验。

我博客的模板是完全响应式的,而不是在某些分辨率下不考虑响应式。像上面截图中,li里面有悬停图片放大效果,这个效果需要图片外面有一个div盒子来隐藏溢出,图片上面还有css3动画透明层展开、透明度加深效果,这所有的效果如果要写响应式就把它放在一个盒子里,这个盒子不是li,而是li里面再定义一个盒子,为什么要这么做的?

比如我的网页宽度是1140px的,如果横排li有三个,那么屏幕宽度小于1140px时,每个li宽度给30%再加上margin-left: 2.5%,li里面的大盒子给margin:auto,这样看起来三个li的布局就很匀称了,然后再拉小屏幕宽度,当间距肉眼看着一样的时候再进行下一个分辨率的媒体查询操作。

更复杂的原生代码响应式布局,比如本站首页作品展示里面的文字如何响应式,请直接右键查看样式源代码或使用火狐浏览器开发者模式响应式布局查看,如果在拉动的过程中出现页面错乱问题,请重新载入页面,即刷新。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:博客改版技术总结:input的radio样式兼容和ios微信里hover效果兼容下一篇:盘点竞价手机网页对meta标签的特殊需求

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi