如何使用CSS文件制作背景

html-css035

如何使用CSS文件制作背景,第1张

选择你喜欢的鼠标,参考以下方式加入代码中。

body{background:#000CURSOR:url(\'http://webme.bokee.com/inc/mouse079.cur\')}

a:hover{CURSOR:url(\'http://webme.bokee.com/inc/mouse024.ani\')}

说明1:第一行是鼠标指针初始形态,第二行是鼠标指针碰到链接的形态。

http://myok.blogchina.com/3429184.html

回答者:zxf76543 - 同进士出身 六级 8-6 08:37

http://post.baidu.com/f?kz=116256845

很好的..

回答者:哈哈泪 - 魔法师 四级 8-6 08:52

呵呵,建议你到百度空间里看看,那里有许多关于百度空间的各种各样CSS设置....看看,必定惊喜连连.....直接在贴吧里输入"百度空间"就可到达....那里高手云集........都是师傅啊....

回答者:一春飞雪 - 助理 二级 8-6 09:40

下面这个也许能帮你一些:

DIY博客背景+鼠标特效(HOT)

一、DIY博客背景代码:

<STYLE type=text/css>

body

{background:url(页面大背景图片地址) repeat scroll!important}

.banner

{background:url(题图下背景图片地址) no repeat no scroll!mportant}

.logo

{background:url(题图上背景图片地址) no repeat no scroll!mportant}

.bodyBg

{background:url(页面内背景图片地址) no repeat no scroll!mportant}

</STYLE>

这是更改博客最基本四部分的背景的代码,还有更改其他部分的代码,基本上可以把新浪博客的模板颜色改个底朝天!我觉得改太多了反而不好,可能会适得其反,反而使博客不好看,所以也就没贴出来!

解释一下,“页面大背景”就是整个博客的最大背景,由于中间部分被覆盖,所以显示的效果只是两边的部分!“题图下背景(banner)”是指博客名字(如情留-γ蚊ж子ま)和博客地址(如http://blog.sina.com.cn/m/wenzi >复制 >收藏本页)所在的那部分的背景,“题图上背景(logo)”是指所在在窄条的背景!而“页面内背景”是指除了以上这三部分外页面内的的背景!其中banner和logo宽都为770,banner高135,logo高40。

本人的一个图片素材库:http://blog.sina.com.cn/u/4845e15e010002ag#comment提供了几款banner+logo,有的是从其他博客盗过来的,其中有两张只是单纯的banner,其他的是banner和logo合起来的图片;要用这些图片需要对其裁剪成两部分,banner和logo的宽和高上面已经说明,数据有微小差别没有太大关系,不影响大致效果;裁剪其实很简单的,window自带的画图程序就能实现!

需要说明的是:这段代码不能添加在什么都没有的空白面板里,要不然会没有效果;在添加空白面板的时候,在显示源代码前打勾,然后先随便输入几个字符,什么都可以,再把代码放进去才行!或者把代码放在已建的面板里的其他东西的代码后面,比如放在你的时钟代码后面或者天气预报代码后面什么的都可以!不过我建议最好放在既有的面板里,如果单纯的输入几个字符的话,最后页面面板里显示的效果会出现那几个字符,影响美观!

二、DIY鼠标代码:

<STYLE type=text/css>

a:hover { cursor:url('鼠标地址一')}

body { cursor:url('鼠标地址二')}

</STYLE>

其中,“鼠标地址一”显示的效果是鼠标碰到有超链接时的形态;“鼠标地址二”显示的效果是一般情况下的鼠标形态,示例可以看我的博客上的鼠标效果。大家用的时候把从下面找的鼠标地址代进去就可以了。如果只要一种样式,则把代码中的“a:hover { cursor:url('鼠标地址一')}”删掉就行了。

需要说明的是,鼠标这也是CSS代码,不能放在什么都没有的空白面板里,你添加代码的时候先按个空格,接着再点显示源代码,你会看到一些代码,然后再把代码放进去,放在那些代码的后面。或者你可以把代码放在既建的已有东西的模板里的其他代码的后面,建议用此方法。

以下只是部分的鼠标样式地址,其他更多的部分请到另外两篇文章里找:

《CSS鼠标样式大全(1)》 《CSS鼠标样式大全(2)》

注意:如果你将鼠标放到下面各栏中,却没有显示出效果,那是因为页面还没有完全打开,鼠标样式还没有下载完毕,请大家耐心等待一会儿,等它加载完了就可以了!如果底部状态栏提示页面已经打开完毕,但是你还看不到效果的话请不要使用!

1.播放器的问题:

#mod_bgmusic{display:none}为隐藏播放器

2.背景图片:

在css里找到#header div.lc 左背景图{background:url(图片链接) no-repeat}

#header div.rc 右背景图{background:url(图片链接) no-repeat top right}

将图片链接换成你要显示得图片即可,可以用gif动画。

在css里找到#header div.lc 左背景图{background:url(图片链接) no-repeat}

#header div.rc 右背景图{background:url(图片链接) no-repeat top right}

将图片链接换成你要显示得图片即可,可以用gif动画。

网友问我如何修改空间的背景,现做如下说明:

1)先把自己的背景图片存到空间相册里,

2)然后用ctrl+F键找到#header div.lc和 #header div.rc;如下:

#header div.lc{background:url(图片地址) no-repeat 830px 0px}

#header div.rc{background:url(图片地址) no-repeat 830px 0px}

3)上面的“图片地址”是你存的背景图片的地址,你只需把原空间背景图片的地址替换成你自己的图片地址即可。

4)要改变空间下面的大背景,修改下面这句中的“图片地址”就好了:

.stage{background:url(图片地址) repeat-y}

说明:上面两行代码修改的是空间最上头标题的背景

这是我的备用

body{background:#000CURSOR: url('http://webme.bokee.com/inc/mouse028.cur')}

a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse020.ani')}

body {background:url(http://www.siteem.com/resource/images/06/04/10/pic_1144638229014696.jpg) no repeat no scroll!mportant}

BODY {background-repeat:repeat-y

background-attachment:fixed

}

#header{height:200pxbackground:#000000}

#header div.lc{}

#header div.rc{background:url(http://pp.tvvvv.com/AttFiles/MM/58/172/2006/1/1728081.jpg) no-repeat top right}

#header div.tit{top:25pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}

#header div.tit a.titlink{color:#FFFFFFtext-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}

#header div.desc{top:50pxleft:20pxcolor:#F81945font-size:13px}

#tabline{top:199px}

#tab{top:177px}

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2pxline-height:19pxcolor:#C3C3C3font-size:14px}

#tab span{color:#C3C3C3font-size:14px}

#tab a:link{color:#C3C3C3text-decoration:nonefont-size:14px}

#tab a:visited{color:#C3C3C3text-decoration:nonefont-size:14px}

#tab2{background:#DAE9F5}

#tab2 span{color:#000000font-size:12pxfont-weight:bold}

#tab2 a{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

.stage{}

#comm_info{color:#666666font-family:Arialtext-align:left}

#comm_info div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#comm_info a{color:#FAA511}

#page{height:30pxfont-size:14pxfont-family:Arialtext-align:center}

#page span{padding:3pxcolor:#666666font-size:14pxfont-weight:bold}

#page a.pc{color:#FAA511font-size:14pxfont-weight:bold}

#page a.pc:visited{color:#FAA511}

#page a.pi{padding:3pxcolor:#FAA511font-size:14px}

#page a.pi:visited{color:#FAA511}

.mod{margin-bottom:10px}

.modhandle{cursor:move}

.modth{height:24px}

.modhead{padding:4px 4px 0 4px}

.modopt{padding:4px 4px 0 0}

.modtit{color:#FF0000font-size:12pxfont-weight:bold}a.modtit{color:#FAA511}a.modtit:visited{color:#FAA511}

.modtitlink{color:#FAA511font-size:12pxfont-weight:bold}a.modtitlink{color:#FAA511text-decoration:none}a.modtitlink:visited{color:#FAA511text-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:underline}

.modact{color:#FAA511font-size:12px}a.modact:link{color:#FAA511}a.modact:visited{color:#FAA511}

.modbox{padding:10px 10px 0 10px}

.modtl{line-height:1px}

.modtc{}

.modtr{line-height:1px}

.modbl{line-height:1px}

.modbc{line-height:1px}

.modbr{line-height:1px}

#m_blog div.tit{font-size:14pxfont-weight:bold}

#m_blog div.tit a{color:#58DD00font-size:14pxfont-weight:bold}

#m_blog div.tit a:visited{color:#CCCCCC}

#m_blog div.date{margin:5px 0 8px 0color:#C9B569}

#m_blog div.cnt{color:#CCCCCCline-height:20pxfont-size:14px}

#m_blog div.more{margin:14px 0 16px 0}

#m_blog div.more a{color:#FF3333font-size:14px}

#m_blog div.more a:visited{color:#FAA511}

#m_blog div.opt{color:#666666font-size:12px}

#m_blog div.opt a{color:#FAA511font-size:12px}

#m_blog div.opt a:visited{color:#FAA511}

#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#m_blog div.none{padding:100px 0 100px 0color:#666666font-size:14px}

#m_blog{scrollbar-face-color: #E100E1

scrollbar-shadow-color: maroon

scrollbar-highlight-color: red

scrollbar-3dlight-color: #E6421A

scrollbar-darkshadow-color:#E100E1

scrollbar-arrow-color:#17C75D

scrollbar-base-color: #44FF8F

scrollbar-track-color: #E100E1

overflow-y:autoheight:1194px

filter: chroma(color=#E100E1)}

#m_pro a{color:#FAA511}

#m_pro a:visited{color:#FAA511}

#m_pro div.image{text-align:center}

#m_pro div.act{margin-top:10px}

#m_pro div.user{margin-top:10pxcolor:#7ACC00font-size:12pxfont-weight:bold}

#m_pro div.desc{color:#D65A08font-size:12px}

#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#m_pro td{color:#666666line-height:24pxfont-size:14px}

#m_album div.image{text-align:center}

#m_album div.page{color:#666666font-size:12pxtext-align:center}

#m_album div.page a{color:#0000CCfont-size:12px}

#m_album div.page a:visited{color:#0000CC}

#m_links div.item{color:#666666font-size:12px}

#m_links div.item a{color:#DE6210font-size:12pxtext-decoration:none}

#m_links div.item a:visited{color:#FAA511}

#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_links{overflow-y:autoheight:250px}

#m_artclg div.item{color:#666666font-size:12px}

#m_artclg div.item a{color:#FAA511font-size:12px}

#m_artclg div.item a:visited{color:#FAA511}

#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_comment div.item{color:#666666font-size:12px}

#m_comment div.item a{color:#FAA511font-size:12px}

#m_comment div.item a:visited{color:#FAA511}

#m_comment div.item a.cnt{color:#666666font-size:12pxtext-decoration:none}

#m_comment div.item a.cnt:visited{color:#666666text-decoration:none}

#m_comment div.item a.cnt:hover{color:#666666text-decoration:underline}

#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#m_albumlist div.note{color:#666666font-size:14px}

#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}

#m_albumlist div.none{padding:100px 0 100px 0color:#666666font-size:14px}

#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #43212E}

#m_albumlist div.tit{margin:6px 0 7px 0color:#666666font-size:14px}

#m_albumlist div.tit a{color:#FAA511font-size:14px}

#m_albumlist div.tit a:visited{color:#FAA511}

#m_albumlist span.count{color:#666666font-size:12pxfont-weight:bold}

#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}

#m_albumlist a.act{color:#FAA511font-size:12px}

#m_albumlist a.act:visited{color:#FAA511}

#m_albumlist a.page{color:#0000CCfont-size:14px}

#m_albumlist a.page:visited{color:#0000CC}

#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#FFFFFF}

#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}

#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}

#m_friend div.user{margin-top:4pxcolor:#666666font-size:12px}

#m_friend div.user a{color:#FAA511font-size:12px}

#m_friend div.user a:visited{color:#FAA511}

#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #43212E}

#m_setting a{color:#FAA511}

#m_setting a:visited{color:#FAA511}

#m_setting{line-height:22pxcolor:#666666font-size:14px}

#m_setting img.sel{border:4px solid #FFDB7B}

#m_setting img.unsel{border:1px solid #D2D2D2}

#m_setting span.tit{font-size:14px}

#m_setting span.usr{color:#666666}

#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}

#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #43212E}

#m_sysinfo a{color:#FAA511}

#m_sysinfo a:visited{color:#FAA511}

#m_sysinfo{line-height:22pxcolor:#666666font-size:14px}

#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}

#m_sysinfo span.date{color:#666666font-size:14px}

#m_setbase{color:#666666font-size:14px}

#m_setbase td{color:#666666font-size:14px}

#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #43212E}

#in_comment{width:710px}

#in_comment div.tit{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold}

#in_comment div.user{margin-bottom:6pxcolor:#666666font-size:12px}

#in_comment div.user a{color:#FAA511font-size:12px}

#in_comment div.user a:visited{color:#FAA511}

#in_comment div.user span.date{color:#666666font-size:12px}

#in_comment div.desc{color:#666666font-size:12px}

#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #43212E}

#in_send div.tit{margin:10px 0 10px 0color:#666666font-size:14pxfont-weight:bold}

#phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)xrayWIDTH: 225pxHEIGHT: 32px}