风格设计教程(1):左右两栏位置互换

王志勇 发表于 2012年06月12日 17:43

从现在开始写Arsue Blog的风格设计教程,之所以现在才开始写,是因为之前写的35篇Blog的内容是更重要的,希望大家耐心等候这个博客的更新;也请大家开始关注这些教程里对CSS(样式表)的说明,如果您之前没有CSS的基础,通过这些教程也能够学习到一些CSS的知识。

Arsue Blog标准版发布的时候,默认的风格是左右两栏,如下图:

本文要实现左右两栏位置互换,需要更改/t/css.php的文件,首先最好在本机做调试,并且随时做备份,然后再通过FTP上传,本机调试的环境和开发软件请严格按照这篇来配置http://blog.cn.arsue.com/petal/3。css.php的页面过期缓存时间为1小时,修改完毕之后需要按F5刷新或者清空IE缓存,可以立即生效。在css.php可以找到这一行:

#n1,#n2{float:left}#na{padding:0 15 0 10}#ne{padding:0 10 0 0}

说明:#n1对应的区域是如上图中Blog正文的部分,#n2对应的区域是右侧的导航栏,float:left是DIV+CSS中最常用的语句,作用是使div元素不回行;#na对应的区域是#n1内的一个最外层的div,这里的padding对应的四个值的顺序分别是:上右下左(可参考样式表手册中的padding),例如padding:0 15 0 10的含义是上边距0像素,左边距15像素,下边距0像素,左边距10像素;#ne对应的区域是右侧导航栏内的一个最外层的div,使右侧导航栏的右边距为10像素。

了解了上述的#n1,#n2,#na,#ne的作用,就可以改变它们的值。将上述那行删除,改为:

#n1,#n2{float:right}#na{padding:0 10 0 15}#ne{padding:0 0 0 10}

这样就可以使网页的左右两栏位置互换,如下图:

0条评论:

发表评论:
名字: (*必填)
博客: (可省,仅限于Blog地址)
验证码: r16e12v90i29s37e37 (*必填)

正文:

    记住信息? 否   回复第

直接发送Trackback

程序简介:Arsue是一个快速、超低负载、易于安装和备份的博客程序,可快速地运行在低价的虚拟主机,PHP+NoSQL构架,核心程序5K以内,主程序20K以内,全动态页面,国内外大多数的Linux+Apache+PHP的主机均可运行。获得此程序,可以在这里预定

最新的评论:
Arsue教程(4):如何关闭/开启评论
Arsue教程(3):Arsue Blog程序如何第一次安装
Arsue教程(20):参数设置 - 两次发帖的时间间隔
Arsue教程(13):参数设置 - 按月存档管理
Arsue教程(7):如何更改Blog文档的路径
Arsue教程(19):如何添加友情链接
Arsue教程(31):如何在一个分类/标签下添加一篇文章
Arsue教程(25):“在线升级”使用说明(图解)
Arsue教程(30):文章分类和标签
Arsue教程(29):最新评论审核平台

分类:
Arsue教程 | Arsue的属性 | 程序艺术谈
风格设计教程 | Arsue程序更新

Blog存档:

Copyright © 2012 arsue.com 版权所有。Arsue是一个基于PHP+NoSQL构架的快速、超低负载的Blog程序,它可以节省您每年50%以上的服务器费用。