第一篇:大学城空间建设代码
背景音乐设置
EMBED style=“FILTER: invert()”src=http://117.135.129.181/wap/856571.mp3 width=1 height=1 type=audio/x-ms-wma ShowStatusBar=“1” loop=“true” >
其中:http://117.135.129.181/wap/856571.mp3歌曲网址,width和height都设为0就不显示播放器了
loop=“true”表示循环播放,type=audio/mpeg表示自动播放
固定大背景设置 背景图片不变,可以使用以下代码:
方法一:可以重复
方法二:不重复
滚动背景代码:随着你拉动滚动条而上下滚动,适合小图片,什么闪烁的星星之类的!图片很小即可,它会自动平铺!
顶部背景设置
方法一:
.banner {background:url(”http://www.xiexiebang.com/UploadFiles/BlogFile/8/270623/p1.jpg“)no-repeat;}
自己PS一张1005*150像素大小的图片并传到网上,记住图片的URL,替换代码中的方法二:
整个顶部设背景
.banner {filter:alpha(opacity=0);}
.pageBody{background:url(”http://www.xiexiebang.com/uploadImage/photo/a0/***TSy4.jpg“)no-repeat scroll 0px 0 transparent;}
.pageMeta img{display:none;}
上图中背景的宽度为1005像素,高度300像素。
解释:
.banner {filter:alpha(opacity=0);}不显示大学城本身提供的banner;.pageBody{background:url(”背景图片地址“)no-repeat scroll 0px 0 transparent;} 设置顶上的背景
.pageMeta img{display:none;}不显示左上角大学城图标
所有模块背景统一换一样的(包括左右、头像、留言本、最新动态等所有模块)
pe=text/css>
.i_space_r,#left,.link,#five_header,.space_lr,.i_space_r.one {background:url(http://www.xiexiebang.com/uploadImage/photo/a0/20111028203328juQg.png);}
头像背景 块(添加右上角矩形框的背景)
左侧右侧背景模块图片或设为透明 设置
有背景的
透明的
.i_space_r,#left {background:url(”“);}
其中:”/UploadFiles/BlogFile/6/211712/beijing2.jpg“为背景图片的URL
如果希望这2块中没背景,也就是透明的,可设:background:url(”“);
留言板背景 模块独设置
#LeaveWordLbl {background-image:url(背景图片的地址);}
底部版权背景 模块边框设置
#bottom { border: 0px;}
#bottom {background:url(/UploadFiles/BlogFile/22/711608/4.jpg);}
以上代码是设置底部版权声明部分矩形框的边框线是否显示及背景。如果希望设置边框线,则将0px设置为1px或其他。
左侧导航栏目背景颜色设置
#left {BACKGROUND-COLOR: #c4fcb0;}
左侧栏目中的图片设置
#divMenu_85605
{background-image:url(/UploadFiles/BlogFile/8/287426/c1.jpg);background-repeat:no-repeat;padding-bottom:70px;background-position:bottomcenter;margin-bottom:10px;} #divMenu_28806 {background-image:url(/UploadFiles/BlogFile/8/287426/c2.jpg);background-repeat:no-repeat;padding-bottom:100px;background-position:bottomcenter;margin-bottom:15px;}
#divMenu_308713{background-image:url(/UploadFiles/BlogFile/8/287426/c3.jpg);background-repeat:no-repeat;padding-bottom:120px;background-position:bottomcenter;margin-bottom:20px;} #divMenu_66460 {background-image:url(/UploadFiles/BlogFile/8/287426/c4.jpg);background-repeat:no-repeat;padding-bottom:120px;background-position:bottomcenter;margin-bottom:15px;} #divMenu_39820 {background-image:url(/UploadFiles/BlogFile/8/287426/c5.jpg);background-repeat:no-repeat;padding-bottom:140px;background-position:bottomcenter;margin-bottom:15px;} #divMenu_39623 {background-image:url(/UploadFiles/BlogFile/8/293276/c6.jpg);background-repeat:no-repeat;padding-bottom140px;background-position:bottom center;margin-bottom:15px;} #divMenu_29854 {background-image:url(/UploadFiles/BlogFile/8/293276/c7.jpg);background-repeat:no-repeat;padding-bottom:140px;background-position:bottom center;margin-bottom:15px;}
第一步:有多少个栏目PS多少张图片,建议图片大小为140*80像素。宽度不能超过170像素,高度任意,建议图片做到一样大小,这样更好看。
第二步:分析你自己大学城的代码,右击自己的空间然后选择“查看源文件”,在源文件中用Ctrl+F查找左侧栏目的名称,如“网页设计客户端技术(”这是我的拉,你查你自己的哟),记录下来那个图片的id,如我的是“85605”,如此方法,将你的左侧栏目的所有id记录下来。
第三步:复制我上面代码的并对它进行修改,举例如下
#divMenu_85605{background-image:url(/UploadFiles/BlogFile/8/287426/c1.jpg);background-repeat:no-repeat;padding-bottom:70px;background-position:bottom center;margin-bottom:10px;}
红色字体部分就是你查到的你的那个栏目的id(注意,你设置的该栏目的图片是在该栏目的顶部显示的);绿色字体部分就是你上传到空间的图片的链接;蓝色字体需要根据你的图片大小去调整效果,padding-bottom为图片距离顶边的距离,margin-bottom为各栏目之间相隔的距离,这2个参数可以通过调整他们的大小测试一下他们的作用。
左边一栏(文字)目标题的字体颜色、字体和字号
.link {color:blue;font-size:14px;”FONT-SIZE: 8pt“>楷体;}
右边一栏(文字)小栏目标题的字体、字号、文字颜色
.i_space_lr.i_title_d {color:blue;font-size:14px;” FONT-SIZE: 8pt;“>楷体_GB2312;}
以上代码可以改变右边一栏“最近登录的好友”、“我发起的学习俱乐部”、“我加入的俱乐部”,3个子栏目标题的字体颜色、字体和字号。
中间一栏(文字)小栏目标题的字体、字号、文字颜色
.title_d {color:blue;font-size:14px;”FONT-SIZE: 8pt“>楷体_GB2312;}
以上代码可以改变中间一栏“我的空间动态”、“简介”、“留言板”、“评论”,4个子栏目标题的字体颜色、字体和字号。
“世界大学城”图标不显示
.pageMeta {filter:alpha(opacity=0);}.welcome {filter:alpha(opacity=100);}
这个图标在左上角,如果设置了背景(不是白色)或背景图片,则这个图片有点碍眼。以下代码可以不显示这个图片,但鼠标指向它的时候,仍会变成手,单击它可以链接到“世界大学城”的首页。
换行代码:
文字链接代码:
改变鼠标指针 形状的代码
BODY {CURSOR:url('http://www.xiexiebang.com/shubiao/bianxing/36.ani');} A {CURSOR:hand}
其中:'http://www.xiexiebang.com/shubiao/bianxing/36.ani'为鼠标指针形状的URL,可到该网站上去找自己喜欢的鼠标形状,语句:A {CURSOR:hand},将超链接的指针形状设置回手形。
插入flash挂件的代码