修改blog背景和颜色的心得
来源:互联网 发布:传奇霸业勋章数据 编辑:程序博客网 时间:2024/05/17 02:06
根据我的小小经验,使用css来进行定义比较方便、准确,而且在多个表格内使用时,效果更显著。
什么是css?
在blog的代码上,一般可以见到形如以下的代码
以下内容为程序代码:
<style type="text/css">
<!--
.diary_datetitle { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10pt; font-weight: bold; color: #858585; background-color: #F0F0F0}
.line { border-color: black black #CCCCCC; border-style: dotted; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
td { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt}
.tt_title { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 20px; font-weight: bold}
......
-->
</style>
注意是这些定义要插在<style type="text/css">与</style>之间
最简单,如果要设置整个页面的背景。你可以在css中添加一项
body {background-color:yellow}
那么整个页面的背景就是***了
或者自定义blog描述所在的表格表格
.abc {background-color:white}
然后在blog的blog描述所在表格内加上:
<td class=abc>#dis_tag#</td>
那么,blog描述的背景就是白色了。关键就是搞清楚这部分的意思,设置背景方法相同
以下是设置背景用到的定义项:
·背景颜色 background-color
上面已说明,不用多说了
·背景图片 background-image
例:body{background-image:url('你的背景图片的地址')}
意思就是整个页面的背景为图片,图片地址是:http://www.abc.com/bg.gif 这种情况下,没有为图片加任何定义,背景图片会在浏览器内任何地方不断重复排列,就像我们设置windows的壁纸。下面说的就是如何对背景图片的属性进行定义' target=_blank>http://www.abc.com/bg.gif。这种情况下,没有为图片加任何定义,背景图片会在浏览器内任何地方不断重复排列,就像我们设置windows的壁纸。下面说的就是如何对背景图片的属性进行定义
·图片是否重复显示 background-repeat
例:
body{background-image:url('你的背景图片的地址') background-repeat:no-repeat}
背景图片不重复排列,只显示一次。一般是用于较大面积的图片,并多与下面列出的各定义项配合使用
例:body{background-image:url('你的背景图片的地址') background-repeat:repeat-x}
背景图片只在水平方向重复排列
例:body{background-image:url('你的背景图片的地址') background-repeat:repeat-y}
背景图片只在垂直方向重复排列
以上两项很少用到。
·定位图片显示位置 background-position
图片出现在背景的某个地方,也是从水平方向和垂直方向定义。
水平方向值:left|center|right
垂直方向值:top|center|bottom
例子:body{background-image:url('你的背景图片的地址') background-repeat:no-repeat; background-position:right bottom}
也就是图片出现在右下角且不重复
亦可以使用具体数值来定义
例子:body{background-image:url('你的背景图片的地址') background-repeat:no-repeat; background-position:100px 50px}
图片就会出现在距浏览器左边缘100象素 右边缘50象素的地方出现
·控制图片是否滚动 background-attachment
如上面的一例,图片出现在100px 50px的位置,但当滚动条向下滚动的时候,图片就依然停留在原来的位置,也就是看不到背景图片,这时候就需要用到background-attachment了。主要是使用一个值:fixed
body{background-image:url('你的背景图片的地址‘) background-repeat:no-repeat; background-position:100px 50px;background-attachment: fixed}
ps:你的背景图片的地址里添加的图片最好是gif格式的图片,因为这种图片做背景的话效果比较适合网页的分辨率。
就是这些定义值,至于表格内的背景图片设置也是一样,只是位置的相对参考由浏览器,变成表格的边缘而已。动手试一试就很容易明白。
- 修改blog背景和颜色的心得
- 修改控制台的文字和背景颜色
- 修改secureCRT背景和字体的颜色
- Android修改ActionBar背景颜色和标题颜色的style
- 修改静态文本框的字体颜色和边框背景颜色
- Bootstrap navbar 背景颜色、背景图和字体颜色修改,颜色修改不显示的问题
- UISearchBar 修改背景层和输入框层的背景颜色和边框颜色
- 修改eclipse的背景颜色
- ollydbg 背景颜色的修改
- 修改eclipse的背景颜色
- 修改eclipse的背景颜色
- 修改UISearBar的背景颜色
- 修改searchbar的背景颜色
- Microsoft Windows, VC6.0的字体和背景颜色修改
- IOS5修改UIToolBar 和UINavigationBar 的背景颜色
- IOS5修改UIToolBar 和UINavigationBar 的背景颜色
- IOS5修改UIToolBar 和UINavigationBar 的背景颜色
- Eclipse中代码编辑背景颜色和字体大小的修改
- 纵是长醉泪满襟
- 构造使用类C语言的脚本引擎(4)语法分析
- 汽车嵌入式SoC系统的应用与发展
- clover的无限制license
- 要不要做SQA,哪不定主意。。。。。。
- 修改blog背景和颜色的心得
- JDK的命令详解
- MySQL中文参考手册
- 如何在ASP.NET中使用JavaScript脚本
- 构造使用类C语言的脚本引擎(5)语法检查,生成语法树,代码生成。
- 统一建模语言UML概述(一)
- NSIS用户手册(一)
- 入门读物(1) -- 信息收集 (www.team509.com)
- NSIS用户手册(二)