Blogger的版面配置
来源:互联网 发布:mysql主键外键的作用 编辑:程序博客网 时间:2024/04/29 07:02
再次回應Cellocoffee網友的的詢問,這次是要說明怎麼把blogger template的寬度增加,以便縮短文章的長度!
首先,要先弄清楚blogger版面的四個基本配置,包括Outer-wrapper, Header, Main-wrapper和side bar,而要改寬度的話,就是更改這四項的寬度即可!
首先,更改Outer-wrapper的寬度,在template中找到以下的HTML code:
#outer-wrapper {
width: 700px;
margin: 0 auto;
text-align: left;
font: normal normal 100% Helvetica, Arial, sans-serif;
background: #fff url(http://www.blogblog.com/snapshot/bg-body.gif) 0 0 repeat-y;
}
將紅色的700改成你所想要的寬度即可,通常大家的螢幕解析度都設為1024x768,所以我是設為1000px。
要注意的是,header的背景是和outer-wrapper一樣寬的,如果還是使用目前的背景圖的話會有一部分是空白,如果想要換掉Header的背景圖,就從以下的地方換!
#header-inner {
background: transparent url(http://www.blogblog.com/snapshot/header-01.gif) bottom left no-repeat;
}
接著是Main-wrapper的寬度:
#main-wrapper {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "/"}/"";
voice-family: inherit;
width: 404px;
}
我大概是改成680px左右!
除了改main-wrapper的寬度,相對應sidebar寬度也要跟著改。
#sidebar {
float:right;
border-top: solid 1px #fff;
padding: 4px 0 0 7px;
background: #fff;
width: 264px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
這個要比outer-wrapper的寬度減掉main-wraper的寬度小一點,不然會被擠到下面去,所以我大概是設成280px!
如此一來,整個blog就變寬不少啦!當然這些設定要慢慢調才能調到自己最喜歡的配置囉!
- Blogger的版面配置
- 网页版面的布局
- Swing的版面管理器
- 简单的版面分析
- 版面的附加元素
- swing的版面结构
- 开始Blogger的生活
- blogger的价值
- 一些Blogger的链接
- blogger 的 atom api
- Blogger的正确称谓
- 影响版面大小的因素
- java swing的版面结构
- 版面中“线”的意义
- Blogger的三种境界
- 我是不坚定的的blogger
- Blog历次的版面风格(图)
- CMM解释器的在线反馈版面
- 判断URL是否存在
- WINMAIL 4.5 : Error Information: Get ADMIN server setup info failure.
- 软件行业,还是擦鞋行业
- 术语:游戏机制(Game Mechanics)
- 无题
- Blogger的版面配置
- 革命,无疑是天下最有权威的东西。 —— Engels
- petshop4.0 详解之三(PetShop数据访问层之消息处理)
- petshop4.0 详解之四(PetShop之ASP.NET缓存)
- 几米的漫画<地下佚>的摘录
- 如何清理过大的日志文件?
- Linux 防火墙配置
- petshop4.0 详解之五(PetShop之业务逻辑层设计)
- petshop4.0 详解之六(PetShop表示层设计)