主要用到的是font属性,font-size是控制字体大小,font-weight是控制字体粗细,color是控制字体样式。其他更多的css属性参考css手册。参考代码如下:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>font样式</title>
<style type="text/css">
p {font-size:20pxfont-weight:boldcolor:red}
</style>
</head>
<body>
<p class="font">这是我设计的样式</p>
</body>
</html>
查看文章如何做半透明的百度空间
2006-08-08 15:02
如何做半透明的百度空间 转自吸水蚊子
原因:我们看到别人的百度网页是像一张半透明的纱在一张精美的图片前上下拉动,而我们自己的却是文章多了,图片也跟着重复,一点也不好看,也不透明,怎么办?
理解:行动之前我们先理解一下百度空间,它是由一个大背景和一个前景网页组成,如果不知道这一点,不去掉前景网页的背景颜色与背景图片,那等一下改了大背景,还是看不到透明效果的。前景网页是由几个板块组成的,可以命令每个板块的背景为白色,再加大它们的透明度,就可以看半透明效果了。
过程:
1、先为大背景设置自己喜欢的图片。
1) 在百度图片里找一张1024*768的图片,对着它右键----属性,复制地址。
2) 在自己的百度空间的“设置”-----“高级设置”-----“自定义CSS”的开始自定义。弹出编辑自定义CSS表。第一行就是大背景的设置。
就是这句:body{background-color:#FFECF2}===大背景的颜色
3)去掉红色部分,插入下面编码
background-image:url(图片地址)background-repeat: no-repeatbackground-position: centerbackground-attachment: fixed
他们的解释是: background-image:url(图片地址) 定义背景图片
background-repeat: no-repeat 定义背景图片不重复
background-position: center 定义背景居中
background-attachment: fixed 定义背景固定,不滚动,这个就是关键参数fixed
4)在"图片地址"输入我们刚才复制的地址,得到的编码是
5)按保存修改,当转向主页时,看到第一个画面应该是大背景,不过很快当前网页就跳出来挡住了.
看到大背景改了没有,很快就跑到下面这张
你看,当前网页的背景默认颜色(有花的浅粉红色的)还是挡着大背景
2、去掉当前网页的背景颜色与背景图片
1)如果你设计了背景图片,就到"设置---高级设计--自定义模板--开始自定义"那里左上角的"背景图片"选无背景图"(当然,你以前没设置背景更好)
2)到编辑自定义CSS表里找
.stage{background:url(http://img.baidu.com/hi/temp17/bg.gif) #FFD3EA}
------红色部分是指默认的当前网页的背景图片与颜色,去掉它,按保存修改,效果如下图,
3、去掉网页题目板块的背景:
到编辑自定义CSS表里找
#header{height:89pxbackground:url(http://img.baidu.com/hi/temp17/hdbg.gif) repeat-x #FF99BB}
#header div.lc{background:url(http://img.baidu.com/hi/temp17/hdl.gif) no-repeat}
#header div.rc{background:url(http://img.baidu.com/hi/temp17/hdr.gif) no-repeat top right}
#header div.tit{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}
#header div.tit a.titlink{color:#CC3366text-decoration:none}
#header div.tit a.titlink:visited{color:#CC3366text-decoration:none}
#header div.desc{top:33pxleft:20pxcolor:#CC3366font-size:13px}
#tabline{top:89px}
把红色部分去掉,效果如下:
4、去掉导航栏的背景:到编辑自定义CSS表里找
#tab{top:67pxbackground:url(http://img.baidu.com/hi/temp17/tabbg.gif) repeat-x}
把红色部分去掉,效果如下
5、让当前网页的背景透明,到CSS编辑表里找
.modbox{padding:10px 10px 0 10pxbackground-color:#FFF1F7border-left:1px solid #FF8DA2border-right:1px solid #FF8DA2}
加上filter:alpha(opacity=80)表示透明度80%,如下
.modbox{filter:alpha(opacity=80)padding:10px 10px 0 10pxbackground-color:#FFF1F7border-left:1px solid #FF8DA2border-right:1px solid #FF8DA2}
效果如下
总结:效果出来了,可以根据自己的爱好调节它的透明度,如果你想全部透明的效果,那就要把所有的背景去掉或是变透明,如还有每个板块的标题栏,background这个单词大家应该可以找得吧,多想想!呵呵!
5)按保存修改,当转向主页时,看到第一个画面应该是大背景,不过很快当前网页就跳出来挡住了.
看到大背景改了没有,很快就跑到下面这张
你看,当前网页的背景默认颜色(有花的浅粉红色的)还是挡着大背景
2、去掉当前网页的背景颜色与背景图片
1)如果你设计了背景图片,就到"设置---高级设计--自定义模板--开始自定义"那里左上角的"背景图片"选无背景图"(当然,你以前没设置背景更好)
2)到编辑自定义CSS表里找
.stage{background:url(http://img.baidu.com/hi/temp17/bg.gif) #FFD3EA}
------红色部分是指默认的当前网页的背景图片与颜色,去掉它,按保存修改,效果如下图,
3、去掉网页题目板块的背景:
到编辑自定义CSS表里找
#header{height:89pxbackground:url(http://img.baidu.com/hi/temp17/hdbg.gif) repeat-x #FF99BB}
#header div.lc{background:url(http://img.baidu.com/hi/temp17/hdl.gif) no-repeat}
#header div.rc{background:url(http://img.baidu.com/hi/temp17/hdr.gif) no-repeat top right}
#header div.tit{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}
#header div.tit a.titlink{color:#CC3366text-decoration:none}
#header div.tit a.titlink:visited{color:#CC3366text-decoration:none}
#header div.desc{top:33pxleft:20pxcolor:#CC3366font-size:13px}
#tabline{top:89px}
把红色部分去掉,效果如下:
4、去掉导航栏的背景:到编辑自定义CSS表里找
#tab{top:67pxbackground:url(http://img.baidu.com/hi/temp17/tabbg.gif) repeat-x}
把红色部分去掉,效果如下
5、让当前网页的背景透明,到CSS编辑表里找
.modbox{padding:10px 10px 0 10pxbackground-color:#FFF1F7border-left:1px solid #FF8DA2border-right:1px solid #FF8DA2}
加上filter:alpha(opacity=80)表示透明度80%,如下
.modbox{filter:alpha(opacity=80)padding:10px 10px 0 10pxbackground-color:#FFF1F7border-left:1px solid #FF8DA2border-right:1px solid #FF8DA2}
效果如下
总结:效果出来了,可以根据自己的爱好调节它的透明度,如果你想全部透明的效果,那就要把所有的背景去掉或是变透明,如还有每个板块的标题栏,background这个单词大家应该可以找得吧,多想想!呵呵!
我已经弄好了,但是,还没给你改背景,你自己改吧!
如果你用层的话,那你可以考虑给层的CSS写上.a {
position:absolute
z-index:2(或者大于你现有的底图的z-index的任意数)
}