☆Obaby's H4cking W0rld☆

Hack-Crack==Backdoors - RATs - Trojans // Binders-Packers - Rootkits

破解-黑客-零日漏洞-灰鸽子/上兴/PCShare-木马免杀-网站入侵-信息安全

2009年4月24日星期五

blogspot 3栏模版代码分析 ZZ

把第三栏给加上去了,但想把页面排齐整还需要做一些工作。原来我的模板是占据整个页面的,现在想把它改成固定宽度并且居中。做这件事情之前对css样式一窍不通,很多事情都是摸索着做。废话少说,我的模板里几个css样式的最终版本是这样子的:

#outer-wrapper {     /* 设定整个页面的属性 */
     width: 1024px;     /* 页面宽度 */
     margin: 0 auto; /* 设置margin,这样写之后页面就居中了 */
     font:$bodyfont; /* 页面缺省字体 */


#header {           /* 这里定义header模块的样式,该模块在正文中将被放到页首 */
     width: 1024px; /* 添加这一行,设置header的宽度,占据整个页面宽度 */
     padding:0px 0px 0px 0px; /* 内部无缝隙 */
     margin:0px 0px 0px 0px;     /* 外部也不留缝隙 */
     border-bottom:dotted 1px #e0ad12; /* 底部留一条宽度为1px,颜色为#e0ad12的虚线 */
     background:#F5E39e;         /* 背景颜色 */


修改content-wrapper, main-wrapper、sidebar以及r-sidebar的样式:

#content-wrapper {
     padding: 0;     /* 内部空隙设为0 */


div#main {          /* 帖子正文所在的块 */
     margin: 0px;      /* 和其他一样,块外不留空隙 */
     float:left;       /* 靠左放置 */
     width: 560px;     /* 内容的宽度 */
     padding: 10px; /* 块内的四个方向都留10px的空隙 */
     border-left:dotted 1px $bordercolor;     /* 块左边留一条虚线 */
     border-right:dotted 1px $bordercolor; /* 块右边留一条虚线 */
     word-wrap: break-word;
     overflow: hidden;


div#sidebar {
     margin: 0px;      /* 外部无空隙 */
     padding:0 10px 0 0; /* 内部右侧留一个10px的空隙 */
     text-align:left;       /* 文本对齐方向 */
     float: left;           /* 靠左放置 */
     width: 250px;          /* 内容的宽度 */
     word-wrap: break-word;
     overflow: hidden;     


div#r-sidebar {
     margin: 0px;            /* 块四周不留空隙 */
     padding: 0 0 0 10px; /* 块内部留一定空隙(四个数字按顺序分别是上、右、下、左) */
     text-align:left;        /* 块内的文本设成左对齐 */
     float: right;           /* 靠右放置 */
     width: 172px;           /* 内容的宽度,再加上padding的空隙就是块的总宽度,这里是172+10=182px */
     word-wrap: break-word;
     overflow: hidden;


仔细看一下<body></body>之间div块的嵌套关系,就很容易明白页面是按照怎样的规则和顺序来根据预定义的css样式放置各个块的了,我的模板是这样的:

<div id=’outer-wrapper’><div id=’wrap2’> 首先放置一个宽度为1024的outer-wrapper,其margin是上为0,左右下为自动设置
     <div id=’header-wrapper’> ... </div> 放置header-wrapper,其宽度也是1024
     <div id=’content-wrapper’> 放置宽度为1024的content-wrapper,其外部空隙为0,内部空隙也为0
       <div id=’sidebar-wrapper’> ... </div> 放置sidebar,其宽度是250+10=260px,靠左放置
       <div id=’main-wrapper’> ... </div> 放置main,在这之前,根据main的定义,先放置一条1px宽的虚线,然后把main块放好,再放一条1px宽的虚线。此时由左到右已经放置的内容占据的宽度为250+10+1+10+560+10+1=842px,页面右边还有1024-842=182的空白,所以r-sidebar的宽度一定要控制在这个范围,否则就会跑到sidebar和main的下面去了
       <div id=’r-sidebar-wrapper’> ... </div> 开始放置r-sidebar,宽度是172+10=182px,靠左还是靠右放置已经不重要了,反正空间刚刚好。
     </div> 结束content块
</div> 结束outer块

如果想改变sidebar里面各个widget的样式,那么就修改#sidebar .widget

#sidebar .widget {
     margin:0px 0px 0px 0px; /* 没有margin */
     padding: 10px 0px 10px 0px; /* 每个widget内部所留的空隙 */
     font-size:95%; /* 字体大小为sidebar内字体的95% */
     border-bottom:1px solid #e0ad12; /* 每个widget下面创建一条1px宽的虚线,颜色为#e0ad12 */


同理也可以修改放在r-sidebar中的widget的缺省样式,这可以通过创建一个新的样式块来做到:

#r-sidebar .widget {
     margin:0px 0px 0px 0px;
     padding: 10px 0px 10px 0px;
     font-size:95%;


很简单吧。

0 评论:

发表评论