|
zashbell ...
 Lv.6
私訊
發言
+好友
2012-05-13 13:13:33
|
|
註:不是所有流覽器都支持所有東西;以下為圖文教學
CSS: 主要用來設定網頁樣式像是顏色,字型,字體大小或背景圖等等
HTML: 主要用來設計網頁基本架構
JavaScript: 主要用來編寫網頁功能像是從簡單的表格內容確認到保全系統等等
BASS留言版編輯CSS:
因為可編輯的部份是在<style>和</style>Tag的中間
所以CSS語法可直接用;不用再加HTML的<style>和</style>Tag
所以HTML/JavaScript語法必需在</style>...<style>的中間來進行切換
BASS個人版編輯HTML:
因為可編輯的部份是在<html>和</html>Tag的中間
所以CSS語法必需加HTML的<style>和</style>Tag
所以HTML/JavaScript語法正常用;不用加</style>和<style>Tag來進行切換
色碼:
色碼是顏色的代號;當CSS需要更改顏色時得把color:後的#ffffff或其他色碼換掉;
色碼表網址如下;請用HEX下的那一列代號來換色;依此類推;
http://www.w3schools.com/cssref/css_colorsfull.asp...
BASS留言版語法基本常用篇:(音樂和背景)
/*HTML:自行定義背景音樂自動重覆語法;置中;不隱藏;
<br />是換行,放越多會空越多行;<center>..</center>是置中
需更改把http://bbsimg.shangdu.com/UserFiles/File/176/61383176/1329291303195.mp3
換掉成其他mp3的網址就行
需改成手動的話把autostart="true"改成autostart="false"
需改成不重覆的話把loop="true"改成loop="false"
17和16數字可以自己改成其他數字*/
</style>
<center>
<embed src="http://bbsimg.shangdu.com/UserFiles/File/176/61383176/1329291303195.mp3"
autostart="true" loop="true" width="17" height="16"/>
</center>
<style>
/*CSS:置中以下的音樂;把這行的center改成left的話是靠左;改成right的話是靠右*/
div.my_music{text-align:center;}
/*HTML:自行定義背景音樂;非自動撥放;手動;不隱藏
若需要改音樂把audioUrl後的http://...mp3換掉就行
如果想換其他的音樂盒把<embed...></embed>的部份換掉就行
懶得自己上傳可以去找公開已經上傳的mp3網址
http://music.sogou.com/song/topsong_1.html?w=02013...
更多種音樂的例子可以去看教學網(英文的)
http://www.w3schools.com/html/html_sounds.asp...
如果按了裡頭的例子Try it yourself還聽不到,那就是你的電腦不支持*/
</style>
<div class="my_music">
<embed type="application/x-shockwave-flash"
flashvars="audioUrl=http://bbsimg.shangdu.com/UserFiles/File/176/61383176/1329291303195.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
width="300" height="27" quality="best"></embed><br /><br /><br />
</div>
<style>
/*CSS:背景固定右上不重複;需更改位置的話把右上的top right
換成右下的bottom right或左上的top left或左下的bottom left或中間的center
更改背景圖片把http://bassavg.com/bassmark.gif換成其他圖片掉網址就行;可換gif,jpg,png,etc.*/
body
{
background-image:url(http://bassavg.com/bassmark.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top right;
}
/*CSS:自行定義背景顏色;改色自己查色碼表*/
body{background-color:#ffffff;}
/*CSS:自行定義背景圖片*/
body{background-image:url(http://www.w3schools.com/css/paper.gif);}
/*如果需要更改背景圖片把http://www.w3schools.com/css/paper.gif換掉就行
更多背景例子請去試教學網的Try it yourself
http://www.w3schools.com/css/css_background.asp...
*/
BASS留言版語法入門篇:
/*CSS:將公告文字圖片置中且留言版內容靠左;開啟小聊天則無效*/
p{text-align:center;}
/*CSS:關掉表格的四方形邊框*/
table, td, th{border:0px;}
/*CSS:關掉上方廣告*/
div.ad{display:none;}
/*CSS:關掉中間廣告;小聊天和<iframe>音樂也會一起關掉;回覆旁的[f]Like也會一起關掉*/
iframe{display:none;visibility:hidden;}
/*CSS:關掉小logo*/
.logo{display:none;}
/*CSS:關掉BASS ICON*/
div.head{display:none;}
/*CSS:關掉 首頁 遊戲 小說 論壇 設計 問卷 註冊*/
.head_menu{display:none;}
/*CSS:關掉 首頁 遊戲 小說 論壇 設計 問卷 註冊 的背景圖*/
.head_menu{background:url(none) repeat-x;}
/*CSS:自行定義 首頁 遊戲 小說 論壇 設計 問卷 註冊 連接的顏色*/
.head_menu a:link{color:#000000;}
.head_menu a:visited{color:#000000;}
.head_menu a:hover{color:#000000;}
/*CSS:關掉 所有新文章 常客排名 分類精華文章 發表新主題 回論壇 跳到標題 的背景圖
關掉 留言版 (文章: x 主題: y) by username 管理 本版精華主題 的背景圖
自行定義 (文章: x 主題: y) by 的文字顏色*/
.small_menu{background:url(none) repeat-x; color:#000000;}
/*CSS:關掉中間公告部份的背景圖*/
.tell_content{background:none;}
/*CSS:自行定義 連接的顏色和樣式*/
.content a:link {color:#990000; text-decoration: none;}
.content a:visited {color:#990000; text-decoration: none;}
.content a:hover {color:#990000; text-decoration: underline;}
/*CSS:關掉 時間 標題 最後發表*/
.small_head{display:none;}
/*CSS:關掉 時間 標題 最後發表 的背景; 自行定義 時間 標題 最後發表 的字體和顏色;數字25可換*/
.small_head{background:none;color:#000000;font-size:25px;}
/*CSS:關掉意見的背景圖*/
.talk_content{background:none;}
/*CSS:調整整體大小;數字50可換*/
.main_frame{width:50%;}
/*CSS:調整字體顏色*/
font{color:#000000;}
/*CSS:自行定義 所有新文章 常客排名 分類精華文章 發表新主題 回論壇 跳到標題 的背景顏色
自行定義 留言版 (文章: x 主題: y) by username 管理 本版精華主題 的背景顏色*/
.small_menu{background-color:#cccccc;}
/*CSS:自行定義中間公告部份的背景顏色*/
.tell_content{background-color:#cccccc;}
/*CSS:自行定義 時間 標題 最後發表 以下表格的背景顏色*/
.content{background-color:#cccccc;}
/*CSS:打意見時文字置中*/
input{text-align:center;}
/*CSS:變更意見邊框;數字5和色碼000000可改*/
input{border:5px solid #000000;}
/*CSS:使用黑貓鼠標如果流覽器不支持則替換成十字鼠標;
連接http://ashine0118.myweb.hinet.net/kuroineko.ani可自行替換其他ani連接網址
更多鼠標教學請參考
http://www.w3schools.com/cssref/playit.asp?filenam...
*/
body,a{cursor:url(http://ashine0118.myweb.hinet.net/kuroineko.ani),crosshair;}
/*CSS:留言版黑邊框;數字20和色碼000000可改*/
.main_frame{border: 20px solid #000000;}
/*CSS:將公告文字圖片置中且留言版內容文字置中;開小聊天也有效*/
.content table{text-align:center;}
/*CSS:留言版置右*/
.main_frame{float:right;}
/*CSS:留言版置左*/
.main_frame{float:left;}
/*CSS:縮整體的字體大小;數字10可改*/
.main_frame,a,font,table,input{font-size:10px;}
/*CSS:條整粗體字大小;數字10可改*/
b{font-size:10px;}
/*CSS:關掉所有圖片連接和iframe;一起用可以抽掉底下的長廣告
不過會把其他圖片連接,小聊天,iframe音樂類也一起關掉*/
a img{display:none;}
iframe{display:none;}
/*CSS:改粗體連接色為棕色;包括底下數字顏色*/
a b{color:#880000;}
/*CSS:關掉下方搜尋但不關意見;會引響秘密主題*/
form{visibility:hidden;}
.follow form{visibility:visible;}
/*CSS:關掉帖子第一個回覆下方的廣告框*/
#topic_ad{display:none;}
/*CSS:修改秘密主題的秘碼輸入部份的框色*/
form table,form table td{border-width:0px;}
form table td{background-color:#ffffff;}
/*CSS:關掉垂直線分格線*/
#pm0,#pm1,#pm2,#pm3,#pm4,#pm5{display:none;}
/*CSS:修改横線分格線顏色樣式為白色*/
hr{border: 1px solid #ffffff;}
/*CSS:公告底下加條紅線*/
.tell_content{border-bottom-style:solid;border-width:1px;border-color:#ff0000;}
/*CSS&HTML:自行定義自己的標誌;
把http://img542.imageshack.us/img542/2603/newicon2.png換掉就行*/
/*CSS:關掉BASS ICON*/
div.head{display:none;}
/*HTML:自行定義自己的標誌*/
</style>
<center>
<img src="http://img542.imageshack.us/img542/2603/newicon2.png" alt="LOGO"/>
<br /><br />
</center>
<style>
/*HTML:自行定義連接網址;需更改把http://bassavg.com/lgpps7/ 和 回BASS論壇 的部份自己換掉*/
</style>
<center>
<a href="http://bassavg.com/lgpps7/">回BASS論壇</a>
</center>
<style>
/*CSS&HTML:圖片連接;把連接加在之前的圖上;*/
/*CSS:關掉BASS ICON*/
div.head{display:none;}
/*HTML:自行定義自己的標誌連接;連接和圖片連接可改*/
</style>
<center>
<a href="http://bassavg.com/idv.php?id=zashbell">
<img src="http://img542.imageshack.us/img542/2603/newicon2.png" alt="LOGO"/>
<a/>
<br /><br />
</center>
<style>
/*HTML:大字公告;大小可改數字50;大字公告文字部份可改*/
</style>
<center>
<font size="50">大字公告</font>
</center>
<style>
/*HTML:跑馬燈範例;HELLO~~~!!!字可改*/
</style><marquee>HELLO~~~!!!</marquee><style>
/*HTML:YouTube自動播放影片一次範例
連接網址是 http://www.youtube.com/watch?v=MyziqLYNoNM
必需把 watch?v= 改成 v/
所以會變成 http://www.youtube.com/v/MyziqLYNoNM
可替換成你想放的YouTube影片*/
</style>
<center>
<embed src="http://www.youtube.com/v/MyziqLYNoNM&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent">
</embed>
</center>
<style>
/*HTML&JavaScript:由鼠標來更換圖片
圖http://img542.imageshack.us/img542/2603/newicon2.png是當鼠標不在圖上時
圖http://img199.imageshack.us/img199/9749/newicon.jpg是當鼠標移到圖上時
以上這兩個圖片連接可自行更換*/
</style>
<center>
<img src="http://img542.imageshack.us/img542/2603/newicon2.png"
onmouseout="this.src='http://img542.imageshack.us/img542/2603/newicon2.png';"
onmouseover="this.src='http://img199.imageshack.us/img199/9749/newicon.jpg';"/>
</center>
<style>
/*HTML&JavaScript:簡單按鈕藏字範例;center可改left或right來置左或置右*/
</style>
<div align="center">
<script type="text/javascript">
function display_my_words()
{document.getElementById("hide").innerHTML="隱藏的字";}
</script>
<p id="hide">表面上的字</p>
<button type="button" onclick="display_my_words()">顯示隱藏字</button>
</div>
<style>
/*HTML:白色捲軸;色碼#ffffff可改;;IE OK;Firefox不行*/
</style>
<body style="overflow:scroll;scrollbar-base-color:#ffffff;"></body>
<style>
/*HTML:圖片跑馬燈;圖http://...gif可改*/
</style>
<marquee><img src="http://bassavg.com/bassmark.gif"/></marquee>
<style>
BASS留言版語法進階篇:
/*CSS:想要用更多CSS花樣;必需要學會簡化,合併和綜合運用
<<簡化>>
舉例來說,當同時需要用到以下這三種語法的話
div.ad{display:none;}
iframe{display:none;}
.logo{display:none;}
我們可以合併簡化它因為同時都含有display:none;
所以簡化會變成
div.ad,iframe,.logo{display:none;}
功效是一樣的
<<合併>>
舉例來說當同時需要用以下這兩行時
body{color:#000000;}
body{background-color:#ffffff;}
可以併成以下
body{color:#000000;background-color:#ffffff;}
功效一樣
<<綜合運用>>
就是把以知的物件更換顏色,更換字體大小,更換字型和更換圖片連接
這樣就能弄出專屬你的留言版
舉例來說
[PARTA]物件包括
body{...} 控制整體
p{...} 控制文字段落
table{...} 控制表格
input{...} 控制意見輸入的部份
.head_menu{...} 控制首頁那行
.small_menu{...} 控制所有新文章和留言版名的那兩行
.tell_content{...} 控制中間公告的部份
.content{...} 控制連接的部份;首頁下的部份
.small_head{...} 控制時間的部份
.talk_content{...} 控制意見背景框的部份
.main_frame{...} 控制整個留言版
a:link{...}控制一般連接;當未拜訪過連接時
a:visited{...}控制一般連接;當拜訪過連接時
a:hover{...}控制一般連接;當滑鼠碰到連接時
.head_menu a:link{...}控制連接;當未拜訪過首頁那行連接時
.head_menu a:visited{...}控制連接;當拜訪過首頁那行連接時
.head_menu a:hover{...}控制連接;當滑鼠碰到首頁那行連接時
.content a:link{...}控制連接;當未拜訪過首頁行以下的連接時
.content a:visited{...}控制連接;當拜訪過首頁行以下的連接時
.content a:hover{...}控制連接;當滑鼠碰到首頁行以下的連接時
[PARTB]可更換功能包括
background-color:#000000; 更換背景顏色為色碼
color:#000000; 更換文字顏色為色碼
text-align:center; 更換文字位置;center置中可以改成left或right來置左或置右
font-size:25px; 更改字體大小為指定數字;25可變更
font-family:arial; 更改字型為指定字型;arial可變更;請自己查一下基本支持字型
background-image:url(http://www.w3schools.com/css/paper.gif); 更改背景為連接圖;連接圖可變更
background:none; 去除背景
display:none; 不顯示
border: 5px solid #000000; 加上黑色邊框;數字5可改;色碼可改;solid可改成dotted其他樣式
(更多CSS的可更換功能可以在網上查;例:不透明度)
所謂綜合運用就是把[PARTA]加上[PARTB]
例如body{...}加上background-color:#000000;
其中[PARTA]的body只的是整體
而[PARTB]的background-color是用來更換背景顏色為色碼;色碼#000000是黑色
加起來就是把整個背景顏色換成黑色*/
body{background-color:#000000;}
/*CSS:長用的連接特效例子
[PARTA] .head_menu a:hover{...}控制連接;當滑鼠碰到首頁那行連接時
[PARTB] color:#000000; 更換文字顏色為色碼
加起就是當滑鼠碰到首頁那行連接時更換文字顏色為黑色*/
.head_menu a:hover{color:#000000;}
/*CSS:連接特效再加上邊框效果
那就把邊框特效那行加進來
[PARTA] .head_menu a:hover{...}控制連接;當滑鼠碰到首頁那行連接時
[PARTB] border: 5px solid #000000; 加上黑色邊框;數字5可改;色碼可改;solid可改成dotted其他樣式
加起就是當滑鼠碰到首頁那行連接時加上黑色邊框;邊框粗細是由5px控制;改細可改1px;
.head_menu a:hover{border: 5px solid #000000;}
然後加上之前的.head_menu a:hover{color:#000000;}
就是.head_menu a:hover{border: 5px solid #000000;color:#000000;}
當滑鼠碰到首頁那行連接時更換文字顏色為黑色並加上黑色邊框*/
.head_menu a:hover{border: 5px solid #000000;color:#000000;}
/*CSS:連接綜合範例1:設定首頁行外的所有連接為深藍色並在滑鼠碰處連接時加上深藍色點狀邊框*/
a:link,.content a:link,a:visited,.content a:visited,a:hover,.content a:hover
{color:#00008b;text-decoration:none;}
a:hover,.content a:hover{border: 1px dotted #00008b;}
/*CSS:連接綜合範例2:設定所有連接為深藍色並在滑鼠碰處連接時加上深藍色點狀邊框*/
a:link,.head_menu a:link,.content a:link,
a:visited,.head_menu a:visited,.content a:visited,
a:hover,.head_menu a:hover,.content a:hover
{color:#00008b;text-decoration:none;}
a:hover,.head_menu a:hover,.content a:hover
{border: 1px dotted #00008b;}
/*CSS:邊框綜合範例
上面這部份的順序不可亂換;效果會不一樣
1px粗細可換;solid種類可換;色碼可換*/
table, td, th{border:0px;}
.content,.small_menu,.tell_content,.small_head{border:1px solid #e6e6fa;}
.small_menu,.tell_content,.small_head
{border-top-width:0px;border-bottom-width:1px;
border-left-width:0px;border-right-width:0px;}
.head_menu,.small_menu,.tell_content,.content,.small_head{background:none;}
更多邊框範例可以參考以下教學網
http://www.w3schools.com/css/css_border.asp...
/*
CSS&HTML:Flash綜合範例
銀色背景加Flash動態;http://...swf可改;width和height可改;top:2px的2可改
*/
.head_menu,.small_menu,.tell_content,.small_head,.talk_content{background:none;}
body{background-color:silver;}#topic_ad{display:none;}
table,tr,td{border:0px;}
div.flash{text-align:center;position:absolute;top:2px;z-index:-1;}
</style><div class="flash">
<embed src="http://blog.roodo.com/oei/c9e2386c.swf"
wmode="transparent" quality="high" height="300" width="1000" />
</div><style>
/*CSS:綜合運用範例1*/
/*CSS:把背景設為黑色*/
body{background-color:#000000;}
/*CSS:把BASSICON,意見背景和部份邊框拿掉*/
div.head{display:none;}.talk_content{background:none;}table,tr{border:0px;}
/*CSS:把表格的整個背景清空*/
.head_menu,.small_menu,.tell_content,.content,.small_head{background:none;}
/*CSS:把所有連接設成白色*/
a:link,.head_menu a:link,.content a:link,
a:visited,.head_menu a:visited,.content a:visited
{color:#ffffff;text-decoration:none;}
a:hover,.head_menu a:hover,.content a:hover
{color:#ffffff;text-decoration:underline;}
/*CSS:把其他部份的字也統一設成白色*/
body, p, table, font,.small_menu,.small_head{color:#ffffff;}
/*CSS&HTML綜合運用範例2*/
/*CSS:設定背景圖片*/
body {background-image:url(http://www.w3schools.com/css/paper.gif);}
/*CSS:設定公告置中且無邊框*/
p{text-align:center;} table, td, th{border:0px;}
/*CSS:關掉所有廣告*/
div.ad,.logo,iframe{display:none;visibility:hidden;}
/*CSS:關掉BASS ICON,首頁和時間*/
div.head,.head_menu,.small_head{display:none;}
/*CSS:關掉所有文章,公告和意見的背景*/
.small_menu,.tell_content,.talk_content{background:none;}
/*CSS:將連接設成黑色*/
.content a:visited,.content a:link{color:#000000; text-decoration:none;}
.content a:hover {color:#000000; text-decoration: underline;}
/*CSS:調整整體大小和字色*/
.main_frame{width:50%;} font,.small_menu{color:#000000;}
/*CSS:置中音樂*/
div.my_music{text-align:center;}
/*HTML:自行定義手動音樂*/
</style>
<div class="my_music">
<embed type="application/x-shockwave-flash"
flashvars="audioUrl=http://bbsimg.shangdu.com/UserFiles/File/176/61383176/1329291303195.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
width="300" height="27" quality="best"></embed><br /><br /><br />
</div>
<style>
/*CSS&HTML綜合運用範例3*/
/*CSS:將留言版的不透明度改成86%;用了三行來支持不同流覽器;調整留言版大小為80%*/
.main_frame{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=86)";
filter:alpha(opacity=86);opacity:.86;}.main_frame{width:80%;}
/*CSS:自定義背景*/
body{background-image:url(http://img600.imageshack.us/img600/7425/graywithwhitetexture450.jpg);}
/*CSS:拿掉邊框*/
table,tr,td{border:0px;}
/*CSS:拿掉廣告和BASS ICON*/
div.ad,iframe,.logo,div.head{display:none;visibility:hidden;}
/*CSS:設定留言版背景為白色*/
.head_menu,.small_menu,.tell_content,.small_head,.content,.talk_content
{background:none;background-color:#ffffff;}
/*CSS:設定連接和字體為黑色*/
a:link,.head_menu a:link,.content a:link,
a:visited,.head_menu a:visited,.content a:visited,
a:hover,.head_menu a:hover,.content a:hover
{color:#000000;text-decoration:none;}
body, p, table, font,.small_menu,.small_head{color:#000000;}
/*HTML:調整留言版位置*/
</style><br /><br /><br /><style>
BASS CSS[PARTA]物件補充部份:
/*
.forum{...} 控制留言版首頁行以下的部份
blockquote{...}控制留言版意見部份
目前BASS系統版才會用到的CSS
.small_content{...} 控制BASS主頁面的小標題區域
.small_content2{...} 控制BASS主頁面的小標題區域
.bottom{...} 控制BASS主頁面下面的版權Copyright @ year
*/
自己簡查自己的語法有沒有用錯:
用Firefox開一下自己的留言版就知道了
如果用Firefox一開就整個跑位和顏色錯亂了
就代表你的語法裡有錯
這個時候把自己的語法一個個分開測試吧
然後仔細找一下就會知道自己那裡用錯了
簡查一下連接的順序;不然連接不會正常顯示其效果
a:hover一定要在a:link和a:visted的後面
a:active一定要在a:hover的後面
如果不小心把留言版語法玩死了!
可以去按'設計'然後個人服務的'清空樣式'來清空你的語法;不引響留言
不推荐:
/*HTML:簡單防右鍵;沒太大作用;很好破解;非所有瀏覽器支持;
要寫出相當安全的網頁需要用到大量的JavaScript請自己Google*/
</style><body oncontextmenu="window.event.returnValue=false"></body><style>
Q:什麼是注解行?
語法的注解行(comment line)
是一般寫程式時用來形容該編程的功能的
電腦系統是不執行這部份的東西的
它是純粹寫來給人看的
CSS的注解行為/*中間這裡可以打上任何你想放的形容*/
舉例來說以下這條行的功能是把背景顏色改成白色
body{background-color:#ffffff;}
這條可以直接放在BASS的留言版的設定樣式來設定為CSS
我們在這條線上放上注解行會改成以下這兩行
/*把背景顏色改成白色*/
body{background-color:#ffffff;}
把改過的這兩行放在BASS的留言版的設定樣式來設定為CSS;作用和上面只有一行是一樣的
HTML的注解行為<!--中間這裡可以打上任何你想放的形容-->
舉例來說以下這條行的功能是加上自己的圖
<img src="http://img542.imageshack.us/img542/2603/newicon2.png" alt="LOGO"/>
這條可以直接放在BASS的個人版的編輯HTML來加圖
我們在這條線上放上注解行會改成以下這兩行
<!--加上自己的圖-->
<img src="http://img542.imageshack.us/img542/2603/newicon2.png" alt="LOGO"/>
把改過的這兩行放在BASS的個人版的編輯HTML;作用和上面只有一行是一樣的
Q:自定義圖片看不到?
先確認你的http://...jpg/png/gif圖片網址是活的沒死
再來確認你的語法有沒有用錯
Q:自定義音樂聽不到?
先確認你的http://...mp3音樂網址是活的沒死
再來確認你的語法有沒有用錯
Q:自定義鼠標看不到?
先確認你的http://...ani鼠標網址是活的沒死
再來確認你的流覽器是IE;某些流覽器不支持ani
最後確認你的語法有沒有用錯
Q:自定義Flash看不到?
先確認你的http://...swf網址是活的沒死
最後確認你的語法有沒有用錯
Q:能否自由選音樂?
/*HTML&JavaScript:從以下兩首手動選擇音樂*/
</style>
<script>
<!--
function choose(o)
{
var index=o.selectedIndex; var url=o.options[index].value;
if(url){var open=window.open(url,"_blank");}
}
//-->
</script>
<select onchange="choose(this);">
<option value="">選擇音樂</option>
<option value="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3">如果我變成回憶</option>
<option value="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3">我知道</option>
</select>
<style>
/*HTML&JavaScript:從以下三首手動選擇音樂;http://...mp3可改成網址*/
</style>
<script>
<!--
function choose(o)
{
var index=o.selectedIndex; var url=o.options[index].value;
if(url){var open=window.open(url,"_blank");}
}
//-->
</script>
<select onchange="choose(this);">
<option value="">選擇音樂</option>
<option value="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3">如果我變成回憶</option>
<option value="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3">我知道</option>
<option value="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3">全世界都停電</option>
</select>
<style>
修改的部份是增加以下這行如果想增加更多首;依此類推
<option value="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3">全世界都停電</option>
Q:有沒有多種背景音樂語法?
已經有人答過了兩次
(2008-11-12 11:04:09)
https://bassadv.com/lgpps7/topic.php?id=1204354598...
(2009-08-29 23:37:18 )
https://bassadv.com/lgpps7/topic.php?id=1151482608...
我幫他們補說明細一點好了
/*HTML&JavaScript:從以下兩首隨機抽一首音樂自動重覆播放
我用的歌曲是如果我變成回憶和我知道*/
</style>
<script type="text/javascript">
var musics = new Array(2);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
var index = Math.floor(Math.random()*musics.length);
document.write("<embed src="+musics[index]+" autostart=true loop=true width=17 height=16></embed>");
</script>
<style>
/*HTML&JavaScript:從以下三首隨機抽一首音樂自動重覆播放
我用的歌曲是如果我變成回憶,我知道和全世界都停電*/
</style><script type="text/javascript">
var musics = new Array(3);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
musics[2]="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3";
var index = Math.floor(Math.random()*musics.length);
document.write("<embed src="+musics[index]+" autostart=true loop=true width=17 height=16></embed>");
</script><style>
這裡用Array建空間來放音樂檔;裡面用了2代表想要2首;然後下面行是把你想聽的音樂網址放進去
var musics=new Array(2);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
當你想要3首時會改成如下;依此類推來增加
var musics=new Array(3);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
musics[2]="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3";
這樣的話每次去留言版時聽到的音樂都會是隨機抽的
如果你想弄像播放列表Playlist的東西;你需要把你的用的音樂寫成'm3u'
上傳到網路上然後讀取它來用
你必需要有一個免費的空間;英文教學網如下
http://www.quackit.com/html/codes/create_music_pla...
/*HTML:自動播放一列的音樂;不重覆;我用的是教學網的m3u;IE OK;Firefox不行*/
</style>
<embed src="http://www.quackit.com/html/codes/music_playlist.m3u"
width="300" height="40" autostart="true" loop="false"></embed>
<style>
如何寫你自己的m3u?
先打開你的記事本,然後把你想聽的歌曲往如下一一放上
http://f10.wretch.yimg.com/as3551096321/2/18644349...
http://f10.wretch.yimg.com/handsomeboy4/1/11792696...
http://f10.wretch.yimg.com/as3551096321/2/18644349...
然後存成.m3u檔;最後傳到自己的空間上替換掉例子的m3u的網址
Q:可否無名音樂盒加上隨機音樂語法?
/*HTML&JavaScript:從以下三首隨機抽一首音樂自動重覆播放
我用的歌曲是如果我變成回憶,我知道和全世界都停電
此語法為無名音樂盒加上隨機音樂語法;只支持無名音樂;增減音樂方式和上面類似;
autostart=true為自動;autostart=false為手動
repeat=true為重覆;repeat=false為不重覆
volume控制音量可以等於0~100的數字
backcolor,frontcolor和lightcolor顏色可改;開頭為0x加上六位數色碼像是ffffff
width為音樂盒寬;數字可改;height為音樂盒高;數字可改*/
</style><script type="text/javascript">
var musics = new Array(3);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
musics[2]="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3";
var index = Math.floor(Math.random()*musics.length);
document.write("<embed src="+
"http://pic.wretch.cc/photos/serv/video/video_player/BGMusicPlayer.swf?file="+
musics[index]+"&autostart=true&repeat=true"+
"&volume=90&backcolor=0x000000&frontcolor=0xffffff&lightcolor=0xffffff"+
" width=90 height=20></embed>");
</script><style>
Q:有沒有隨機圖語法?
/*所以把上面的音樂語法修改一下就可以拿來做隨機圖;
這樣每次逛自己的留言版時看到的圖都會是隨機抽的*/
/*HTML&JavaScript:從以下兩種圖片隨機選一個來用
增加方法和上面的方法類似只要注意一下這裡是用images和圖片連接檔*/
</style><center><script type="text/javascript">
var images = new Array(2);
images[0]="http://img199.imageshack.us/img199/9749/newicon.jpg";
images[1]="http://img542.imageshack.us/img542/2603/newicon2.png";
var index = Math.floor(Math.random()*images.length);
document.write("<img src="+images[index]+" alt=random></img>");
</script></center><style>
Q:有沒有隨機文字語法?
/*HTML&JavaScript:進出留言版時隨機出現以下五種句子之一
修改方式和上面類似只要注意一下這裡是用sentences和文字*/
</style><center>
<script type="text/javascript">
var sentences = new Array(5);
sentences[0] = "隨機文字1";
sentences[1] = "隨機文字2";
sentences[2] = "隨機文字3";
sentences[3] = "隨機文字4";
sentences[4] = "隨機文字5";
var index = Math.floor(Math.random()*sentences.length);
document.write(sentences[index]);
</script>
</center><style>
/*HTML&JavaScript:進出留言版時隨機出現以下五種句子之一
修改方式和上面類似只要注意一下這裡是用sentences和文字;換行用<br />*/
</style><center>
<script type="text/javascript">
var sentences = new Array(5);
sentences[0] = "隨機文字1";
sentences[1] = "隨機文字2<br />換行文字<br />再換行文字";
sentences[2] = "隨機文字3";
sentences[3] = "隨機文字4";
sentences[4] = "隨機文字5";
var index = Math.floor(Math.random()*sentences.length);
document.write(sentences[index]);
</script>
</center><style>
Q:有沒有隨機背景語法?
/*HTML&JavaScript:隨機選背景圖;重覆;需改不重覆改repeat為no-repeat;left top為左上;位置可改;
修改方式和上面類似只要注意一下這裡是用backgrounds和圖片連接*/
</style>
<body>
<script type="text/javascript">
var backgrounds=new Array(2);
backgrounds[0]="http://www.w3schools.com/css/paper.gif";
backgrounds[1]="http://img600.imageshack.us/img600/7425/graywithwhitetexture450.jpg";
var index = Math.floor(Math.random()*backgrounds.length);
document.body.style.background="url("+backgrounds[index]+") repeat left top";
</script>
</body>
<style>
P.S.
1)有些範例的HTML是在<center>...</center>的中間
如果想改成置左只要把<center>和</center>拿掉就可以用了
如果想改成置右那只要把<center>和</center>換成<div align="right">和</div>就可以了
2)display:none;和visibility:hidden;本質上其實有點小不同
visibility:hidden;會有空白空間但display:none;不會
3)background:url(none) repeat-x;和用background:none;的作用一樣
4)有一個JavaScript的例子加了<!--和//-->
這是用來防有些流覽器不支持JavaScript
防把JavaScript當做網頁內容顯示
5)如果同時改同樣的東西寫了兩次如下
/*CSS:把背景設為黑色*/
body{background-color:#000000;}
/*CSS:把背景設為白色*/
body{background-color:#ffffff;}
後面的會把前面的蓋掉
所以背景會是白色而非黑色
6)補充說明不透明度86的CSS;數字86可改;
改時請一起改成同樣的數字;這樣用不同流覽器去看才會是一樣的
IE8的不透明度用
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=86)";
IE5-7的不透明度用
filter:alpha(opacity=86);
IE9,Firefox,Chrome,Opera,和Safari用
opacity:.86;
題外話:BASS個人版
編輯HTML打上語法存檔即可
色碼#ffffff和#000000可以查色碼表來改顏色
BASS個人版 CSS必需加<style>...</style>
BASS個人版 HTML/JavaScript直接用;HTML不要加BASS留言版的</style>...<style>
BASS個人版和留言版的差別就在<style>Tag的切換
所有留言版可以放的個人版一樣可以放;注意一下就好了
<!--用CSS改BASS個人版的好友列顏色-->
<style>
select,option
{
color:#ffffff;
background-color:#000000;
}
</style>
<!--BASS個人版CSS綜合範例-->
<style>
/*加邊框*/
body{border:20px double #f5f5f5;}
/*設定上排字的位置*/
div.idv_font_bg{position:relative;top:20px;}
/*設定上排字的顏色和字體*/
font{color:#191970;font-family:"Times New Roman",Times,serif;}
/*設背景顏色*/
body{background-color:#ffffff;}
/*改連接顏色*/
a:link,a:visited{color:#191970;text-decoration:none;}
a:hover{color:#3399CC;text-decoration:underline;}
/*改選項顏色和字體*/
select,option
{color:#191970;
background-color:#f5f5f5;
font-family:"Times New Roman",Times,serif;
font-size:12px;}
</style>
<!--BASS個人版CSS綜合範例-->
<style>
/*設定背景圖不重覆;設定文字置中*/
body
{
background-image:url(http://img542.imageshack.us/img542/2603/newicon2.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 35%;
text-align:center;
}
/*設定整體的字型大小和顏色;設定字為白色背景為黑色*/
body,font,option,select,a:link,a:visited,a:hover
{font-family:Times New Roman;font-size:12px;
color:#ffffff;background-color:#000000;}
/*改特定行的字體大小和顏色*/
.example{font-size:30px;color:#ffcc99;}
</style>
<br />
<div class="example">這裡可以打你想打的字</div> <br />
換一行的字 <br />
再換行的字 <br />
依此類推 <br />
<br />
<!--BASS個人版HTML&JavaScript綜合範例-->
<!--置中-->
<center>
<!--想放的圖-->
<br /><img src="http://img542.imageshack.us/img542/2603/newicon2.png"/><br />
<!--想放的字-->
<br />
饅頭很好吃<br />
饅頭很營養<br />
<br />
<!--想放的連接-->
<a href="http://bassavg.com/lgpps7/">BASS論壇</a><br /><br />
<!--想放的音樂-->
<script type="text/javascript">
var musics = new Array(3);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
musics[2]="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3";
var index = Math.floor(Math.random()*musics.length);
document.write("<embed src="+musics[index]+
" autostart=true loop=true width=17 height=16></embed>");
</script>
</center>
<!--BASS個人版HTML&JavaScript&CSS綜合範例-->
<style>
/*設定文字和連接的顏色和字體*/
body,select,option,font,a:link,a:visited,a:hover
{color:#300000;font-family:"Times New Roman",Times,serif;}
</style>
<!--置中-->
<center>
<!--想放的圖-->
<br /><img src="http://img542.imageshack.us/img542/2603/newicon2.png"/><br />
<!--想放的字-->
<br />
饅頭很好吃<br />
饅頭很營養<br />
<br />
<!--想放的連接-->
<a href="http://bassavg.com/lgpps7/">BASS論壇</a><br /><br />
<!--想放的音樂-->
<script type="text/javascript">
var musics = new Array(3);
musics[0]="http://f10.wretch.yimg.com/as3551096321/2/1864434960.mp3";
musics[1]="http://f10.wretch.yimg.com/handsomeboy4/1/1179269632.mp3";
musics[2]="http://f10.wretch.yimg.com/as3551096321/2/1864434959.mp3";
var index = Math.floor(Math.random()*musics.length);
document.write("<embed src="+musics[index]+
" autostart=true loop=true width=17 height=16></embed>");
</script>
</center>
資訊方面:
其他更多像是捲軸,鼠標和一些裝飾的東西素材請去翻
https://bassadv.com/lgpps7/topic.php?id=1151482608...
https://bassadv.com/lgpps7/topic.php?id=1087229309...
更多的BASS留言版教學可以去翻
https://bassadv.com/lgpps7/topic.php?id=1207827558...
更多的CSS,HTML和JavaScript教學可以去翻http://www.w3schools.com
http://www.w3schools.com/css/default.asp...
http://www.w3schools.com/html/default.asp...
http://www.w3schools.com/js/default.asp...
http://www.w3school.com.cn/css/...
http://www.w3schools.com/cn/html/html_css.asp...
後言:
如果有幫助請回我一聲謝
回覆或意見都可以
有不懂再問 :) 請PM問或在我的留言版上問
:以上最後修改日:9/27/2012;(修正死圖) 5/31/2012以前的教正CSS color:#000000;(O) color=#000000;(X)
-------------------------------------------------------------------------------------
Q&A:
:9/12/2012
Q:請問如何加上左右銀色邊框?
A:用以下
/*CSS:加上左右銀色邊框;silver可改為其他#色碼;粗細150可改*/
body{border-left:150px solid silver;border-right:150px solid silver;}
:8/28/2012
Q:請問縮版時亂掉如何處理?
A:用overflow
很多人用IE都會縮過頭因為用IE看起來一切正常如下
用Firefox/GoogleChrome就會變成下圖
用以下的CSS的話就會如圖
/*CSS:固定版面顯示大小;長寬可改*/
.main_frame{width:800px;height:230px;overflow-x:auto;}
資料來源:
http://www.w3schools.com/cssref/playit.asp?filenam...
:8/27/2012
Q:請問要怎麼把已發表的主題裡面,圖上的邊框改顏色或弄掉?
A:用以下;去邊框不能和改色同時用
/*CSS:圖片去邊框*/
img{border:0px;}
/*CSS:圖片邊框改色;色碼自己改*/
img{border-color:#880000;}
:8/25/2012
Q:請問意見可以改寬度嗎？
A:用這個IE會顯示有點問題因為lazi的html沒用<!DOCTYPE...>
/*CSS:意見輸入縮小*/
div.follow input{width:100px;}
div.follow input[type="submit"]{width:50px;}
:8/22/2012
Q:請問意見的發言底色該如何更改為其他顏色或透明?
A:用以下改背景
/*CSS:拿掉意見邊框;修改意見高度;設背景為半透明的png圖*/
input
{
border:0px;
height:20px;
background:url(http://img191.imageshack.us/img191/7953/graytransparent30.png);
}
|
