| |
侧边栏的位置控制是由css来决定的,我们来看实例:
侧边栏层的名称是sidebar,内容层是content,我们来看看yahoo这个模板中css的相应代码:
.sidebar {
  margin: 0px;
  float: right;  居右对齐
  width: 200px; 宽度为200px
}
.sidebar-hide {
  display: none; 隐藏层
  float: right;
}
.content {
  float: left; 居左对齐
  width: 100%;
  margin-right: -200px;  这里的-200是为了隐藏侧边栏以后设置的,下同
  background-color: #FFF;
}
.content-wide {
  width: auto;
  margin-right: -200px;
}
.content-only {
  width: auto;
  margin-right: -200px;
}

那么如果我们要把一个右侧边栏的模板修改为左侧边栏,只需要将sidebar和content层中float控制的属性对换一下,同时将sidebar-hide的float属性修改一下即可。
Tags: ,
不指定 2007/03/27 19:32 | 分类: 其他方面 | 评论(7) | 阅读(6569)
windy Email Homepage
2007/07/17 17:33
非常感谢你的网站模板,很不错,在些谢过。
叉烧猪排饭
2007/04/01 01:01
来了来了~光哥
where Homepage
2007/04/01 00:55
呃~~没那么复杂~~
看了下LS的blog,只需要改.sidebar和.content的内容就好了~~
两个分别设置宽度:
.sidebar {
 float: right;  
 width: 20%;
}

.content {
 float: left;
 width: 80%;
}
原则上只需要这两行就可以。
星辰郁结
2007/03/28 13:49
pig,生日快乐!!!grin
娃娃看天下 Homepage
2007/03/27 23:21
对我来说太难了
tokey
2007/03/27 22:41
按照上面说的,已经修改了.
效果 http://tokey.wbfan.com/

还有点小问题:
左边栏和博客正文板块之间的间隔有点宽了.
正文板块整体太靠右了.
应该修改哪里呢?
我试着找了几个,都不对.谢谢指教!
tokey
2007/03/27 22:12
谢谢! 收藏了~
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]