目前日期文章:201407 (6)

瀏覽方式: 標題列表 簡短摘要
<!--------------------聽歌--------------------->
<select onchange='mp4_m(this.value)'
onmouseover='this.focus() ' style='cursor: pointer;width:150px; background-color:#C0C0C0; color:#000;
font-size:20px;
display:scroll;
position:fixed;
top:0px;
left:1055px;
border: 3px outset #d5d5d5'>
<option />聽歌
<option value="0"/>停止聽歌
<optgroup style='font-size:5px;' label=""></optgroup>
<option value="1"/>所有詩歌
<optgroup style='font-size:5px;' label=""></optgroup>
<option value="2"/>國語詩歌
<optgroup style='font-size:5px;' label=""></optgroup>
<option value="3"/>粵語詩歌
<optgroup style='font-size:5px;' label=""></optgroup>
<option value="4"/>香港電台
<optgroup style='font-size:5px;' label=""></optgroup>
<option value="5"/>新城電台
</select>


<script>
function mp4_m(xxx) {
if(xxx==0){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();}

if(xxx==1){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();
myWindow=window.open("//www.youtube.com/embed/2It-atPhVII?autoplay=1;rel=0;list=PLJ6HAcRGQeqy5Ab5xS7dq0y63kGUhTISi","new_w_mp4","width=200, height=100");}

if(xxx==2){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();
myWindow=window.open("//www.youtube.com/embed/eCkfBDO9bvg?autoplay=1;rel=0;list=PLJ6HAcRGQeqzn2t1agiRUSbO68z-FpeAn","new_w_mp4","width=200, height=100");}

if(xxx==3){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();
myWindow=window.open("//www.youtube.com/embed/XbW3pa8i36k?autoplay=1;rel=0;list=PLJ6HAcRGQeqw0uzlLusoHHHP_Cq-Eq8MX","new_w_mp4","width=200, height=100");}

if(xxx==4){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();
myWindow=window.open("http://programme.rthk.hk/channel/radio/player_popup.php?rid=168&player=media&type=live","new_w_mp4","width=200, height=100");}

if(xxx==5){
myWindow=window.open("","new_w_mp4","width=200, height=100");
myWindow.close();
myWindow=window.open("http://www.metroradio.com.hk/Live/104/","new_w_mp4","width=200, height=100");}
}

</script>

c8cc168 發表在 痞客邦 留言(0) 人氣()

<!-----------網誌 圖 名------------->
<h3>
<img src="https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s128/site_logo.gif" /><br />
Blogger HTML<br /> 技巧
</h3>
<!---------------ccs----------------------->
<style type='text/css'>
body {             /*全版背景圖案*/
background-image:url("https://lh3.googleusercontent.com/-eNDfdkO5YEA/U6tz9ceyZqI/AAAAAAAABXM/lmWdVlZ3HkM/w100-h71-no/1030178739_t.jpg");
background-repeat: repeat;
margin-top: 50px;



}

body {min-width: 100%; /*全版寬度*/}

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 700px; /*文章寬度最小*/
max-width: 2500px;/*文章寬度最大*/
width:100%;       /*文章寬度*/}

.main-inner .column-left-outer {
width: 300px;         /*左邊欄位寬度*/
margin-left: -300px;  /*跟左邊欄位寬度*/}

.post {                 /*文章背景*/
border-radius: 50px;    /*文章背景圓角*/
background-color: rgba(238, 238, 238, 0.3);
border:5px solid peru;  /*文章背景邊界*/}

.post:hover{border:5px solid maroon;}

#navbar{display:none;}  /*隱藏 頂部Blogger 導覽列 */

#blog-pager{display:block;  /*呈現 新舊 文章選擇 */
            color:blue;
            font-size:30px;
            font-weight: bold; }

.feed-links{display:none;}  /*隱藏底部訂閱:文章(Atom)*/

.status-msg-wrap{display:none;} /*隱藏 標籤 最新文章*/

.Attribution {display:none;}  /*隱藏 最底下範本版權說明*/

   
h1 {font-size:8px;
    font-weight:bold;
    text-align:left;
    color:gray;
     }

h3 {font-size:30px;
    font-weight:bold;
    text-align:center;
    color:blue;}

h4 {font-size:30px;
    font-weight:bold;
    text-align:left;
    color:black;
          }


#GOTOP   {position:fixed;top:35px;left:0px;}
#home    {position:fixed;top:35px;left:80px;}
#Friendly{position:fixed;top:35px;left:160px;}
#Label1  {position:fixed;top:5px;left:260px;}
#Label2  {position:fixed;top:5px;left:360px;}
#Label3  {position:fixed;top:5px;left:480px;}
#Label4  {position:fixed;top:5px;left:600px;}


</style>

c8cc168 發表在 痞客邦 留言(0) 人氣()

  • Jul 24 Thu 2014 18:06

select option

<select >
 <option value="上水">上水</option>
 <option value="大埔">大埔</option>
 <option value="沙田">沙田</option>
 <option value="粉嶺">粉嶺</option>
</select>
<select style="cursor:pointer;">
 <option value="上水">上水</option>
 <option value="大埔">大埔</option>
 <option value="沙田">沙田</option>
 <option value="粉嶺">粉嶺</option>
</select>

style="cursor:pointer;"
多一只手指
<select style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;">
 <option value="上水">上水</option>
 <option value="大埔">大埔</option>
 <option value="沙田">沙田</option>
 <option value="粉嶺">粉嶺</option>
</select>


<select style="background-color: silver; border: 3px outset #d5d5d5; color: black; cursor: pointer; font-size: 20px; width: 150px;" onchange="alert(this.value)">
 <option value="上水">上水</option>
 <option value="大埔">大埔</option>
 <option value="沙田">沙田</option>
 <option value="粉嶺">粉嶺</option>
</select>

cursor:pointer 滑鼠游標圖案是手指
background-color: silver 底色
border: 3px outset #d5d5d5 邊框
color: black 文字顏色
font-size: 20px 文字大細
width: 150px; 寬度
height : 150px; 高度
onchange="alert(this.value)" 選擇後動作
alert(this.value) 顯示對話盒

c8cc168 發表在 痞客邦 留言(0) 人氣()

  • Jul 23 Wed 2014 15:17

c8cc168 發表在 痞客邦 留言(0) 人氣()


背景圓角
不同瀏覽器 用不同語法 ,所以在 CSS 或 style 內加曬三個語法。
CSS3 border-radius
Mozilla -moz-border-radius
WebKit -webkit-border-radius



方框 及 底色


<div style="-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px;background-color: rgba(255, 255, 0, 0.3); height: 300px; text-align: center; width: 80%;">

xxxxxx</div>

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
四個角為 圓角



background-color: rgba(255, 255, 0, 0.3);
rgba(red 值, green 值, blue 值, alpha 值)
alpha 值 0.3 不透明度 30%




border-radius style="-moz-border-radius: 25px; background: red; border-radius: 25px;-webkit-border-radius:25px; height: 125px; text-align: center; width: 125px;"

border-radius style="-moz-border-radius: :0px 30px 60px 120px;   -webkit-border-radius: 0px 30px 60px 120px; background: red; border-radius: 0px 30px 60px 120px; height: 125px; text-align: center; width: 125px;"

border-radius style="-moz-border-radius: 25px; -webkit-border-radius: 25px; background-color: rgba(255, 255, 0, 1.0); border-radius: 25px; height: 125px; text-align: center; width: 125px;"

border-radius style="-moz-border-radius: 25px; -webkit-border-radius: 25px; background-color: rgba(255, 255, 0, 0.3); border-radius: 25px; height: 125px; text-align: center; width: 125px;"

table border | tbody | -moz-border-radius | background-color | background | color | border-radius | text-align | background-color: rgba | style | color | height | width | text-align: center | 背景圓角 | 背景 圓角 |

c8cc168 發表在 痞客邦 留言(0) 人氣()

<input type="button" value="文字">

按鈕 滑鼠游標設定為(一只手)
<input type="button" value="文字"  style="cursor:pointer;" />

按鈕 滑鼠游標設定為(一只手)
<input type="button" value="文字"  style="cursor:pointer;" />

按鈕 連結
<input style="cursor: pointer;" type="button" value="文字" onclick="self.location.href='欲連結到的網址';" />

按鈕 自訂寬高
<input style="cursor: pointer; height: 50px; width: 100px;" type="button" value="文字" />

按鈕 文字 大細
<input style="cursor: pointer; font-size: 25px;" type="button" value="文字" />

圖片按鈕
<button style="cursor:pointer;"><img src= "https://lh4.googleusercontent.com/-uPkYUu3FcmI/U6t1IjYu7HI/AAAAAAAABYk/GJCWlC6Ddx4/s128/site_logo.gif" /></button>

| CSS | HTML | button | cursor pointer | span | border | margin | margin | background-color | center | text-align | img src | 按鈕 |

c8cc168 發表在 痞客邦 留言(0) 人氣()