记录Hcms主题遇到的CSS问题及解决办法

在这次制作Hcms主题过程中,遇到了不少问题,最突出的就是代码冲突,也最让倡萌头痛,毕竟倡萌连css和php都没有入门,勉强能看懂代码的基本作用和进行简单的html改写。还是有必要记录一下一些问题的解决方法的,估计以后还是有用的。

问题一:下拉菜单被幻灯挡住了

这个主要是CSS的层问题,幻灯和导航下拉都是使用了JS和CSS控制的,冲突是很常见的,我们需要解决的就是让导航下拉置于幻灯的上面即可。

解决方法:使用z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(上面)。所以,倡萌这次就直接给幻灯对应的主ID添加了一个{  z-index:0;},这样幻灯就挡不住导航下拉啦。

方法出处:http://www.yingsheji.com/jiaocheng/dedecms0601110.html

问题二:IE6和IE7 float:right 换行

在首页的分类调用中,倡萌在文章列表中添加了一个时间显示,在css中使用float:right来让时间显示在标题的右边对齐,但是在IE6和IE7下,时间显示的位置却是该标题的下一行的右边,也就是换行了(忘了截图记录了)。

最好解决办法(2012-2-8更新):

其实可以使用span的同行浮动效果。只要将span标志包裹时间等信息,然后放在标题信息的前面,再加上一个右浮动即可

例如html如下:

1
2
3
4
5
6
<ul>
<li><span>2012-12-24</span>title1</li>
<li><span>2012-12-25</span>title2</li>
<li><span>2012-12-26</span>title3</li>
<li><span>2012-12-27</span>title4</li>
</ul>

只要在css对span添加属性:float:right;即可

解决方法(旧):使用position定位。在父标签<li>里面设置position:relative,在<span>里面设置position:absolute;right:0px;这样效果还不错。例如下面代码:

html代码:

1
2
3
4
5
6
<ul>
<li>title1 <span>2012-12-24</span></li>
<li>title2 <span>2012-12-24</span></li>
<li>title3 <span>2012-12-24</span></li>
<li>titler <span>2012-12-24</span></li>
</ul>

css代码:

1
2
li {position:relative;width:200px;border:1px solid #000;}
li span{position:absolute;right:0px;}

简易效果演示:

2012-01-04_00862

方法出自:http://love730.com/ie6ie7floatright.html

暂时就这两个问题,等遇到其他的,继续补充……

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2012/4/8作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

8 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

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

  1. 赐客说道:
    4#

    看主页底部内容是,公告栏那一部分,会自动显示到左侧(他原来在右侧的),怎么解决? :wink:

    • 倡萌说道:

      这个不是我的主题问题 你们自己修改了主题 错位了 我帮不上 自己测试调整吧

  2. uc说道:
    3#

    您好,看了好几遍的代码,有个问题请教一下,为何在style.css中找不到首页中点击文章标题列表链接后,标题字体右移效果的代码呢?

    • 倡萌说道:

      在js文件里面

  3. 在线乐说道:
    2#

    主题不错。
    另外我想知道
    我的域名.com/go/http://www.目标域名.com
    这样的跳转形式怎么实现呢

    • 倡萌说道:

      据我所知,很多人都是使用GoCodes来实现你想要的结果的,GoCodes在3.0以上版本貌似也是可以正常使用的,好像推荐前倡萌测试过的,不妨试试哦

  4. 紫色忧郁说道:
    1#

    我看来,你很厉害,很多都要向博主学习了 :razz:

    • 倡萌说道:

      注意低调,呵呵,倡萌只是菜鸟

扫一扫,用手机访问本站

扫一扫,用手机访问本站