第一篇:大學城空間建設代碼
背景音樂設置
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.tmdps.cn/UploadFiles/BlogFile/8/270623/p1.jpg“)no-repeat;}
自己PS一張1005*150像素大小的圖片并傳到網上,記住圖片的URL,替換代碼中的方法二:
整個頂部設背景
.banner {filter:alpha(opacity=0);}
.pageBody{background:url(”http://www.tmdps.cn/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.tmdps.cn/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.tmdps.cn/shubiao/bianxing/36.ani');} A {CURSOR:hand}
其中:'http://www.tmdps.cn/shubiao/bianxing/36.ani'為鼠標指針形狀的URL,可到該網站上去找自己喜歡的鼠標形狀,語句:A {CURSOR:hand},將超鏈接的指針形狀設置回手形。
插入flash掛件的代碼