2014 ~ 猛甲茶道互動式創意網頁設計 Tea Road

找回 Windows 8 消失的開始按鈕與開始選單~Start Menu 8 2.0.1.172 中文版

2014年12月27日星期六下午3:55 發表意見

◎◎軟體小檔案◎◎
■ 軟體名稱：Start Menu 8
■ 軟體版本：2.0.1.172
■ 軟體介面：中文
■ 軟體性質：免費軟體
■ 支援系統：Windows
■ 軟體下載：http://forum.jeasy.info/viewtopic.php?f=34&t=1955
■ SHA1驗證碼： 913565f617fbafb77f989ebdd7ef9129f44f0d75
■ 官方網站：http://www.iobit.com/iobitstartmenu8.php

Step 1.

先下載 Start Menu 8 的安裝程式，下載後直接來安裝。

Step 2.

在安裝的尾聲，請注意不要勾選「Install Advanced SystemCare」。

Step 3.

在第一次啟動時，會出現設定的畫面，在這個畫面我們可以設定 Start Menu 8 。首先，先來看【樣式】，有兩種樣式可以選擇。

Step 4.

在【一般設定】中，則是可以設定「開啟時略過 Metro 畫面」，這是比較特別的地方，而其它設定由於是中文的畫面，所以就不予詳加說明囉！

Step 5.

Start Menu 8 內建許多開始按鈕樣式，你可以選擇一個適合你的開始按鈕。

Step 6.

在【功能表】的設定頁面， Start Menu 8 也可以設定那些常用服務要顯示在開始功能表。

Step 7.

「使用者介面」則是可以讓你變更帳戶的照片，另外也可以設定字型大小，最近使用程式的顯示數量等。

Step 8.

也可以在【使用者介面】中，設定按下電源時的動作。

Step 9.

設定好之後，執行這程式，就會看到熟悉的開始功能表啦！

引述自海芋小站

http://www.inote.tw/start-menu-8

免費虛擬光碟軟體

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

Related Posts Plugin for WordPress, Blogger...

自動換圖的產品說明與介紹 html css jquery語法

2014年12月25日星期四下午5:12 發表意見

0/4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>

<div style="margin:0 auto; text-align:center;">
<style type="text/css">
p{margin:0;padding:0;}
ol,ul{list-style:none;}
li{list-style-type:none;}
caption,th{text-align:left;}
address,caption,cite,code,dfn,ins,em,th,var{font-weight:normal;font-style:normal;}
input,textarea{font-size:12px;padding:2px;}
*{text-decoration:none;}
a{color:#06c;}
a:hover{color:#f00;}
#slide-box{margin:8px auto ;width:470px;height:150px;}
#slide-box p{border-bottom:0px;}
#slide-box .thumb-wrap{height:115px;}
#slide-box .tit-ctrl{height:30px;line-height:24px;}
#slide-box .ctrl{float:right;width:65px;margin-top:4px;}
#slide-box .ctrl .num{float:left;margin:2px 8px 0 8px;padding:0px 10px;line-height:16px;background-color:#FFA500;color:#fff;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:10px;}
#slide-box .ctrl .num strong{font-size:12px;}
#slide-box .title{float:left;margin-left:6px;}
#slide-box .title a{font-weight:bold;font-size:14px;}
#slide-box .shadow{display:none;height:8px;background-color:#000;}
.tl,.tr{margin:6px 0px 0 0px;cursor:pointer;}
.tl{float:left;}
.tr{float:right;}
#slide-box .description{height:38px;line-height:20px;padding:0 10px 5px 10px;clear:both;color:#fff;}
</style>

<div id="slide-box">
 <ul rel="slide-data" style="display: none;">
  <li>
   <p class="data-title">超連結網址說明文字１</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字１</p>
   <p class="data-humb">https://lh4.googleusercontent.com/-sS0zsGjdvQc/TsX1K1VjrCI/AAAAAAAADb4/MgtyDAIdKGg/s144/%2525E5%25259C%252596%2525E7%252589%2525877.jpg</p>
  </li>
  <li>
   <p class="data-title">超連結網址說明文字２</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字２</p>
   <p class="data-humb">https://lh6.googleusercontent.com/-jbI3sVcAHOc/TsXInSR_QWI/AAAAAAAADbU/dHJFBvE7IC0/s144/%2525E5%25259C%252596%2525E7%252589%2525877.jpg</p>
  </li>
  <li>
   <p class="data-title">超連結網址說明文字３</p>
   <p class="data-url">http://goo.gl/ZTbB7</p>
   <p class="data-description">透明背板說明文字３</p>
   <p class="data-humb">https://lh6.googleusercontent.com/-ihXBLafH85o/TsW1-EhoiwI/AAAAAAAADbE/8k-kc73gCo4/s144/%2525E5%25259C%252596%2525E7%252589%2525875.jpg</p>
  </li>

</ul>
<div class="thumb-wrap">
  <div><a href=""><img rel="thumb" src="http://goo.gl/ZTbB7" width="470" height="115" alt="" /></a></div>
  <div class="shadow" rel="shadow"></div>
  <p class="description" rel="description"></p>
 </div>
 <div class="tit-ctrl">
  <p class="title"><a href="" rel="title"></a></p>
  <div class="ctrl" rel="ctrl">
   <img class="tl" rel="tl" alt="" src="http://goo.gl/55bz1" title="點擊切換到上一張" /> 
   <img class="tr" rel="tr" alt="" src="http://goo.gl/EUVn1" title="點擊切換到下一張" />
   <span class="num" rel="num"><strong>0</strong>/<em>4</em></span>
  </div>
 </div>
</div>

f.thumb = f.find('[rel=thumb]');     
     f.shadow = f.find('[rel=shadow]');     
     f.des = f.find('[rel=description]');     
     f.title = f.find('[rel=title]');     
     f.ctrl = f.find('[rel=ctrl]');     
     f.num = f.find('[rel=num]');
     f.n = f.num.find('strong');     
     f.tl =  f.find('[rel=tl]');     
     f.tr =  f.find('[rel=tr]');
     f.t = t || 6000; 
   },
   //o-包裹元素id，btnL: 左控制按鈕, btnR: 右控制按鈕
   init: function( o, t ){
     //組織dom
     slidePic.getRelDom( o,t );
     //組織數據
     slidePic.getData();
     //整理陰影部分
     slidePic.setShadow();
     //鼠標移上大圖，顯示描述
     slidePic.showDes();
     //自動播放
     slidePic.auto();
     //手動控制
     slidePic.slideLR();
   },
   getData: function(){
     var  o = slidePic.o,
     //定義儲存變量
     d = o.data = [];
     //獲取數據以二維數組形式保存在slidePic.o.data中
     o.find('[rel=slide-data]').find('li').each(function( i ){
       d[i] = [];
       $(this).find('p').each(function(){
        d[i].push($(this).html());
       });
     });
     //獲得數據總條數
     o.size = slidePic.o.data.length;
     //當前數組中的位置
     o.now = 0;
     //顯示出來的數目，總是比數組中位置多1
     o.index = slidePic.o.now + 1;
     //默認值總數的設置
     o.num.find('em').html(o.size);
     //默認顯示設置
     slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
   },
   //處理陰影效果，採用絕對定位
   setShadow: function(){
      var o = slidePic.o,
        h = o.des.innerHeight(),
       w = o.des.parent().innerWidth();
       //保存陰影和描述的bottom值
       o.shadow.bottom = -h - 10;
       o.des.bottom = -h;
       o.shadow.css({'display':'block',
           'opacity': 0.5,
           'position': 'absolute',
           'bottom': -h - 10,
           'height': h + 10,
           'width': w,
           'zIndex': 20}); 
       o.shadow.parent().css({'position':'relative', 'overflow':'hidden'});            
       o.des.css({'position': 'absolute','bottom': -h, 'zIndex': 30});   
   },
   //設置當前項數據,不包括圖片，因為圖片有顯示效果
   updateDomData: function(n,title,href,des,thumb){
     var o = slidePic.o;
      //設置當前項碼數
      o.n.html( n );
      //設置標題和鏈接
      o.title.html( title ).attr('href',href);
      //設置描述
      o.des.html(des);
      //設置圖片鏈接
      o.thumb.parent().attr('href',href);
      //如果不需要圖片效果，則調用此方法
      if(thumb != undefined) o.thumb.attr('src', thumb );
   },
   //陰影和描述控制
   showDes: function(){
      var o = slidePic.o,
       pic = o.thumb; 
      pic.parent().parent().hover(function(){         
        o.shadow.animate({bottom: 0},'normal');
        o.des.animate({bottom: 0},'normal');
        //描述的dom添加hover事件
        o.des.hover(function(){
         window.clearTimeout( o.timeDes ); 
        },function( e ){ 
         //判斷鼠標是否移到了shadow上
         if(relatedTarget(e) == o.shadow[0]) return;
         o.shadow.animate({bottom: o.shadow.bottom},'normal');
         o.des.animate({bottom: o.des.bottom},'normal');
        });   
      },function(){
        //鼠標移出大圖1/5秒，陰影和描述設置隱藏
        o.timeDes = window.setTimeout(function(){
         o.shadow.animate({bottom: o.shadow.bottom},'normal');
         o.des.animate({bottom: o.des.bottom},'normal');
        },200);
      })
   },
   // 自動播放
   auto: function(){
     var o = slidePic.o,
      d = o.data;
      o.timerPic = window.setInterval(function(){
        o.now = o.now + 1;
        if (o.now == o.size) {
          o.now = 0;
          window.clearInterval( o.timerPic );
          slidePic.auto();
        }
        o.index = o.now + 1;
        slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
        slidePic.slider();
      }, o.t);
   },
   //漸顯效果
   slider: function(){
     var o = slidePic.o;
      o.thumb.hide();
      o.thumb.fadeIn('slow');
   },
   slideLR: function(){ 
       var o = slidePic.o,
        d = o.data;
       o.tl.click(function(){
         window.clearInterval( o.timerPic );
         o.now = o.now - 1;
         if (o.now == -1) o.now = o.size - 1;
         o.index = o.now + 1;
         slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
         slidePic.slider();
         
         slidePic.auto()
       });
       o.tr.click(function(){
         window.clearInterval( o.timerPic );
         o.now = o.now + 1;
         if (o.now == o.size) o.now = 0;
         o.index = o.now + 1;
         slidePic.updateDomData(o.index,d[o.now][0],d[o.now][1],d[o.now][2],d[o.now][3]);
         slidePic.slider();
         slidePic.auto();
       });
   }
  };
 //調用方式
 slidePic.init('#slide-box',8000);
</script>
</div>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

滑鼠移過出現 menu 導覽列選單 html css jquery語法

2014年12月25日星期四下午5:08 發表意見

◖ 產品分類 ◗

<style type="text/css">

/* 下滑工具板的高度設定為190px，所以位置要-190px */
/* 下滑工具板的畫面位置，安裝到部落格時，將17px改成-17px */ 
.down{margin:-2px 0 -210px 0px;}

.down table{
 overflow: hidden; 　　　           　/* 超出的部分，隱藏起來 */
 z-index:9999; 
 text-align:center;}                 /* 整體置中 */

a:hover{color:#2e6e16;}              /* 滑鼠經過時，文字顏色變化 */
 
 
.down #map{   
 width:700px;                        /* 工具板內容寬度 */
 position:relative;                  /* 工具板內容相對位置 */
 z-index:9;
 top:-210px;                         /* 工具板內容先向上縮210px */
 left:40px;                          /* 工具板內容距離左邊距47px */
 background:rgba(234,234,234,0.0);   /* 工具板內容的背景色 */ 
 text-align:left;                    /* 工具板內容居中放置 */
 padding-bottom:5px;
 padding-left:10px;
 margin-left:-5px;
 -webkit-transition: top 1.0s ease-out;   /* 滑鼠經過時，預計用1秒的時間向top滑動 */
 -moz-transition: top 1.0s ease-out;
 -o-transition: top 1.0s ease-out; }

.down #map:hover{
 top: 1px;                                /* 滑鼠經過時，工具板內容滑到的位置 */
 background:rgba(234,234,234,0.0);}       /* 滑鼠經過時，背景顏色的變化 */
</style>

<style type="text/css">

#navBar1{
 line-height:15px;
 font-size:16px;
 margin:-10px 0 20px 0;
 float:left;
 border:solid 2px #849c92;
 border-radius:13px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 background:-moz-linear-gradient(bottom,#596a63, #829a90);
 background:-webkit-gradient(linear,left bottom, left top, from(#596a63), to(#CCD6D2));
 -moz-box-shadow: 2px 5px 7px #161617;
 box-shadow: 2px 5px 7px #161617;}

#navBar1 ul ul{display:none;}

#navBar1 ul li:hover a{color:#ff0000;}

#navBar1 ul {
 padding:0;
 margin:0;
 list-style:none;
 position:relative;}

#navBar1 ul li{
 font-size:16px;
 display:block;
 float:left;
 padding-top:9px;
 padding-bottom:9px;}

#navBar1 ul li span a{border-left:solid #8cab9e thin;}

.headerList1 a{border-right:solid #505e58 thin;}

#navBar1 ul li a{
 display:block;
 padding:4px;
 padding-left:13px;
 padding-right:13px;
 color:#FFF;
 text-decoration:none;
 font-family:Tahoma, Geneva, sans-serif;
 font-size:100%;}

#navBar1 ul ul{
 position:absolute;
 z-index:99999;
 top:40px; 
 background:-webkit-gradient(linear,left bottom, left top, from(rgba(89,106,99,0.9)), to(rgba(204,214,210,0.8)));
 /* background:url(http://goo.gl/3Olkk); */
 width:auto;
 border:thin solid #849c92;
 font-size:70%;
 display:none;}

#navBar1 ul li:hover ul{
 position:absolute;
 width:96%;
 right:2%; 
 display:block;}

#navBar1 ul ul li{
 padding:0;
 padding-top:3px;
 padding-bottom:2px;}

#navBar1 ul li:hover a{border:none;color:#ff0000;}

#navBar1 ul:hover ul a{color:#fff;}

#navBar1 ul li a:hover{ 
 color:#ff0000;
 text-decoration:underline;}

</style>

</head>

<body>

<div style="width:600px;height:190px;overflow:hidden;background:rgba(234,234,234,0.7);border:0px solid #ff0000;">
  <div style="width:598px;height:189px;padding:15px 0 0 7px;border:0px solid #ffff00; ">

<div id="navBar1">
  <ul>
    <li class="headerList1"><a href="http://monga3.blogspot.com/search/label/%E8%8C%B6%E5%8C%85">茶包</a>
      <ul>
        <li> <a href="http://monga3.blogspot.com/2011/11/blog-post_5651.html"> 茶心茶包 </a></li>
        <li> <a href="http://monga3.blogspot.com/2011/11/blog-post_15.html"> 泡茶趣</a></li>
        <li> <a href="http://monga3.blogspot.com/2011/11/blog-post_2394.html"> 蒸菁綠茶包 </a></li>
      </ul>
    </li>
    <li class="headerList1"><span><a href="#">茶具</a></span>
      <ul>
        <li> <a href="http://monga3.blogspot.com/2011/11/blog-post.html"> 行動杯壺 </a></li>
        <li> <a href="http://monga3.blogspot.com/2011/11/tea-road.html"> 飄逸杯壺 </a></li>
        <li> <a href="#"> 分類B-3 </a></li>
        <li> <a href="#"> 分類B-4 </a></li>
        <li> <a href="#"> 分類B-5 </a></li>
      </ul>
    </li>
    <li class="headerList1"><span><a href="#">分類CCC</a></span>
      <ul>
        <li> <a href="#"> 分類C-1 </a></li>
        <li> <a href="#"> 分類C-2 </a></li>
        <li> <a href="#"> 分類C-3 </a></li>
        <li> <a href="#"> 分類C-4 </a></li>
      </ul>
    </li>
    <li class="headerList1"><span><a href="#">分類DDD</a></span>
      <ul>
        <li> <a href="#"> 分類D-1 </a></li>
        <li> <a href="#"> 分類D-2 </a></li>
        <li> <a href="#"> 分類D-3 </a></li>
        <li> <a href="#"> 分類D-4 </a></li>
        <li> <a href="#"> 分類D-5 </a></li>
      </ul>
    </li>
    <li><span><a href="#">分類EEE</a></span>
      <ul>
        <li> <a href="#"> Basics </a></li>
        <li> <a href="#"> Operators </a></li>
        <li> <a href="#"> Functions </a></li>
        <li> <a href="#"> Loops </a></li>
        <li> <a href="#"> Scripts</a></li>
      </ul>
    </li>
  </ul>
</div>

</div>
 </div>

<br/>
    <center>     
      <img src="http://goo.gl/4L7Gw" width="20"/>
       <font color=#ff0000><b>◖ 產品分類 ◗</b></font>     
    </center>

   </div>
  </td>
 </table>
</div>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

部落格 blog有音樂的漂亮時鐘

2014年12月25日星期四下午5:00 發表意見

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

滑鼠滑移過側邊自動滑出式超連結表單 html css jquery語法

2014年12月25日星期四下午4:45 發表意見

<body>

<div class='clear'></div>
<style type="text/css" >
#menu {
 position: absolute;
 top: 93px;       /*表單在螢幕上下的位置*/
 left: -160px;   /*表單在螢幕左右的位置*/
 width: 184px;
 z-index: 9999;
 position:fixed;  
 -webkit-transition: left 1.0s ease-out; /*滑出時間１秒*/
 -moz-transition: left 1.0s ease-out;
 -o-transition: left 1.0s ease-out; }

#menu:hover { left: -4px;/*opacity:0.9;*/} /*滑鼠經過,滑到的位置*/

#menu-top { 
 background:url(http://2.bp.blogspot.com/-X8MKKLwCQRM/ToeuSw6FwMI/AAAAAAAADEI/AGAGtaQbwv8/s200/menu-top.png) no-repeat;
 height: 32px;}

#menu-content {
 background:url(http://4.bp.blogspot.com/-gyRiPTS1JRc/ToettSHdvbI/AAAAAAAADEA/8dDOmj1BY0M/s200/menu-content%2B%25281%2529.png) repeat-y;
 text-align: center;
 padding: 0 15px 0 16px;
 position: relative;
 min-height:20px;}

#logo { margin-bottom: 22px; margin-top: 20px; } /*logo在表單的位置*/

#menu-bottom {
 background:url(http://1.bp.blogspot.com/-fSn74kT-CU8/Toeu3TRKhrI/AAAAAAAADEQ/dfJthBTF5Ik/s200/menu-bottom.png) no-repeat;
 height: 39px;}

ul#top-menu li { padding-bottom: 17px; }
ul#top-menu li a { text-decoration:none; }
ul#top-menu a strong {
 color:#fff;
 font-size:16px;
 display: inline; }
ul#top-menu a span {
 color:#929292;
 display:block;
 font-size:10px;
 text-transform: uppercase;
 margin-top:7px; }
ul#top-menu a span.sf-sub-indicator {
 display: inline;
 color: #F6E68B;
 font-size: 16px; }
ul#top-menu li.current-menu-item > a strong, ul#top-menu li a:hover strong/*, ul#top-menu li.sfHover > a > strong */{ color: #f6e68b; }  /*滑鼠經過,文字改變的顏色*/

ul#top-menu li ul {      
 background: url(http://2.bp.blogspot.com/-oJySOcnmrOU/TofMLjNJjlI/AAAAAAAADFg/SZVUnCD3MJM/s1600/sublink+%2528015%2529.gif) no-repeat bottom left;     /*控制右邊分頁*/
 width: 182px;
 padding: 14px 0;
 text-align: center;
 z-index: 9999;
 left: 152px; }

span.dropdown-top {
 background: url(http://2.bp.blogspot.com/-oJySOcnmrOU/TofMLjNJjlI/AAAAAAAADFg/SZVUnCD3MJM/s1600/sublink+%2528015%2529.gif) no-repeat;
 display: block;
 width: 181px;
 height: 100px;
 position: absolute;
 top: -14px;
 left: 0px; }

/*.nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; z-index: 10; }
.nav li { float:left; position:relative; }
.nav a { display:block; float: left;}
 .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:50px; }
 .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
  .nav li li:hover ul, ul.nav li li.sfHover ul { left:192px; top:0px; }
 .nav li:hover ul, .nav li li:hover ul { top: -999em; }
 .nav li li {display: block; padding: 10px; float: left; height: auto !important; }
 .nav li ul { width: 179px; z-index:1000; }
  .nav li li a:link, .nav li li a:visited {display: block; height: auto; float: left; }
  .nav li:hover { visibility: inherit; } */

/*** ESSENTIAL STYLES ***/

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height: 1.0; }
.sf-menu ul { position: absolute; top: -999em; width:10em; /* left offset of submenus need to match (see below) */ }
.sf-menu ul li { width:155px;padding:0 10px 0 15px; }
.sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 176px; /* match ul width */ top: -9px; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: -9px; }

/*** adding sf-vertical in addition to sf-menu creates a vertical menu 
.sf-vertical, .sf-vertical li { width: 10em; } ***/
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 11em; /* match ul width */ top: -9px; }
/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } 
.nav li, .nav a { float: none; } 
</style>

<div id='container'>
 <div id='menu'>
  <div id='menu-top'/></div>
   <div id='menu-content'>

</ul>

  </li>

</ul>
  </li>

</ul>
  </li>

</ul>

  </li>

</ul> 
   </div>  
  <div id='menu-bottom'/></div>
 </div> 
</div>
<div class='clear'></div>

</body>
</html>

"你是獵人還是獵物？"

滑鼠滑移過出現資訊看板自動更新網頁時間 html css jquery語法

2014年12月25日星期四下午4:39 發表意見

［語法修改位置，善用Ctrl+F］

■  身體位置
margin:-10px 0 0 -5px;

■  資訊看板的５條顏色線，分別由下列５個CSS語法控制。
border-top: 2px solid #FFFF00;}    看板１：線條顏色
border-top: 2px solid #FF00FF;}    看板２：線條顏色
border-top: 2px solid #0099FF;}    看板３：線條顏色
border-top: 2px solid #00FF00;}    看板４：線條顏色
border-top: 2px solid #f29c16;}    看板５：線條顏色

■  資訊看板的標籤名稱大小。
font-size:15px;

■  資訊看板的標籤名稱放置在這裡。
　<ul class='domtabs'>
　 <li><a href='#tabone'>看板１</a></li>
　 <li><a href='#tabtwo'>看板２</a></li>
　 <li><a href='#tabthree'>看板３</a></li>
　 <li><a href='#tabfour'>看板４</a></li>
　 <li><a href='#tabfour'>看板５</a></li>
　</ul>

■  資訊看板的內容放置在這裡。
資訊看板１，內容放置於此。
資訊看板２，內容放置於此。
資訊看板３，內容放置於此。
資訊看板４，內容放置於此。
資訊看板５，內容放置於此。

.adu201109302009{

position:fixed;

z-index:9999;

line-height:20px;

top:60px;

right:-360px;

border:0px solid #888;

padding:10px 10px 10px 15px;

-webkit-transition: all 1.5s linear;

-moz-transition: all 1.5s linear;

-o-transition: all 1.5s linear;}

.adu201109302009 .tool_box201109302016{

background:url(http://goo.gl/3x8pG)no-repeat 0 0;

width:58px;

height:58px;

float:left;

margin-right:8px;}

.adu201109302009:hover{

right: -8px;

-webkit-transition: all 1.5s linear;

-moz-transition: all 1.5s linear;

-o-transition: all 1.5s linear;}

.table201109302011{

background: rgba(220,220,220,0.8);

width:345px;

border:1px solid #888;

padding:10px 5px 5px 10px ;

-moz-box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.6);

-webkit-box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.6);

box-shadow: -5px 5px 8px 0px rgba(0,0,0,0.6);}

.table201109302011 td div{

overflow-x:hidden;

overflow-y:auto;

font-size:15px;

line-height:20px;

max-height:480px;}

</style>

</head>

<body>

<tr>

<td>

<font style="Color:#800000;"><b>［語法修改位置，善用Ctrl+F］</b></font>

<div>

■  身體位置 <br/>

margin:-10px 0 0 -5px; <br/><br/>

■  資訊看板的５條顏色線，分別由下列５個CSS語法控制。<br/>

border-top: 2px solid #FFFF00;}    看板１：線條顏色<br/>

border-top: 2px solid #FF00FF;}    看板２：線條顏色<br/>

border-top: 2px solid #0099FF;}    看板３：線條顏色<br/>

border-top: 2px solid #00FF00;}    看板４：線條顏色<br/>

border-top: 2px solid #f29c16;}    看板５：線條顏色<br/><br/>

■  資訊看板的標籤名稱大小。<br/>

font-size:15px;<br/><br/>

■  資訊看板的標籤名稱放置在這裡。<br/>

</ul><br/><br/>

■  資訊看板的內容放置在這裡。<br/>

資訊看板１，內容放置於此。<br/>

資訊看板２，內容放置於此。<br/>

資訊看板３，內容放置於此。<br/>

資訊看板４，內容放置於此。<br/>

資訊看板５，內容放置於此。<br/><br/>

</div>

</td>

</tr>

<td>

<br/>

var d=new Date();

document.write("<font style=font-size:9pt;Color:#800000>","本頁最後更新時間："+ "<br />"+d.toDateString(document.lastModified)+"   "+d.toLocaleTimeString(document.lastModified),"</font>");

</script>

</td>

</table>

</div>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

滑鼠移過出現變換的超連結滑動標籤雲 html css jquery語法

2014年12月25日星期四下午4:33 發表意見

網址名稱

/*控制標籤雲的寬與高*/
#www_zzjs_net {
 position:relative; 
 width:300px;
 height:140px;
 padding:0 60px 0 0;}

#www_zzjs_net a {
 position:absolute;
 top:0px;
 left:0px;
 font-family: Microsoft YaHei;
 color:orange;
 font-weight:bold;
 text-decoration:none;
 padding: 3px 6px 0 0; }

/*滑鼠經過時的變化*/
#www_zzjs_net a:hover {border: 1px solid #555; background:transparent; }

/*顏色控制*/
#www_zzjs_net .a00 {color:#a00;}
#www_zzjs_net .blue {color:blue;}
#www_zzjs_net .red {color:red;}
#www_zzjs_net .chocolate {color:chocolate;}
#www_zzjs_net .orange {color:orange;}
p1 { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }
p1 a { font-size: 14px; color: #ba0c0c; }
p1 a:hover { color: red; }
</style>

</head>

<body>

</div>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

滑鼠移過出現說明文字 css html jquery語法

2014年12月25日星期四下午4:29 Css , Html , Java 發表意見

大標題１

次標題１

Answer：

回答內容回答內容回答內容回答內容回答內容

大標題２

次標題２

Answer：

回答內容回答內容回答內容回答內容回答內容

大標題３

次標題３

Answer：

回答內容回答內容回答內容回答內容回答內容

div.preview {              /* 控制回答方框 */
 filter: alpha(opacity=92);
 -moz-opacity: 0.92;       /* 方框的透明度 */
 opacity: 0.92;
 background: #DBFFDD;      /* 方框的背景 */
 border: 2px solid #cb9;   /* 方框的框線 */
 width:550px; }            /* 方框的寬度 */

div.preview1 {              /* 第２組控制回答方框 */
 filter: alpha(opacity=92);
 -moz-opacity: 0.92;        /* 第２組方框的透明度 */
 opacity: 0.92;
 background: #DBFFDD;       /* 第２組方框的背景 */
 border: 2px solid #cb9;    /* 第２組方框的框線 */
 width:900px;
 z-index:9999; }            /* 第２組方框的寬度 */

div.preview h3,div.preview1 h3 {           /* 控制大標題 */
 margin: 0px;
 padding: 2px;
 color:green;
 font-size: 20px;
 background:#B3FFB6;
 text-align: center; }

div.preview div,div.preview1 div  {         /* 控制次標題 */  
 margin: 0px;
 padding: 2px;
 color: #000b4f;
 font-size: 18px; }

div.preview div.date,div.preview1 div.date {    /* 控制回答內容 */ 
 text-align:left;
 font-size: 16px;
 padding:10px; }
-->
</style>

</head>

<a  href="#"  onmouseover="overTip('sw01')"  onmouseout="outTip('sw01')"  />大標題１</a>
 <div id="sw01" class="sw">
  <div class="preview" >
   <div>次標題１</div>
    <h3>Answer：</h3>
     <div class="date" style"width:900px;">回答內容回答內容回答內容回答內容回答內容</div>
  </div>
 </div><br/>

<a  href="#"  onmouseover="overTip('sw02')"  onmouseout="outTip('sw02')"  />大標題２</a>
 <div id="sw02" class="sw">
  <div class="preview">
   <div>次標題２</div>
    <h3>Answer：</h3>
     <div class="date" >回答內容回答內容回答內容回答內容回答內容</div>
  </div>
 </div><br/>

<a  href="#"  onmouseover="overTip('sw03')"  onmouseout="outTip('sw03')"  />大標題３</a>
 <div id="sw03" class="sw">
  <div class="preview">
   <div>次標題３</div>
    <h3>Answer：</h3>
     <div class="date">回答內容回答內容回答內容回答內容回答內容</div>
  </div>
 </div><br/>

</div>

</body>
</html>

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

喝茶兼養魚　金魚茶包台灣人做的！

2014年11月21日星期五中午12:13 發表意見

一成不變的茶包形狀，在台灣人手裡有了新突破！台灣廠商子村莊園（CHARM VILLA）設計出一款「小金魚」茶包，在還沒「下水泡湯」之前，白色茶袋剪裁出金魚形狀的外觀，放進茶杯沖水後，瞬間有如養在池裡的金魚，在茶湯中優游自得。小金魚茶包也榮獲2014／2015德國Red Dot（紅點）傳達設計獎的殊榮，且紅到國外網站競相報導，品茶兼養魚，著實十分療癒！

經記者去電詢問小金魚茶包的價位與銷售狀況，銷售人員回覆茶包有蜜香紅茶、玫瑰蜜香紅茶、阿里山金萱茶共3種，蜜香紅茶一盒480元，玫瑰蜜香紅茶、阿里山金萱茶均為580元，一盒12入；但2014年訂單已爆滿，需排到明2015年1月才能拿貨，而想購買的民眾，2015年的訂單將在今年12月30日在開放預購。
賣酒的網站：老酒天堂橡木桶鼎級王台灣酒研學會
~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

運命的故事

2014年11月8日星期六上午9:58 發表意見

運命的故事

在我們生活裡充滿著許多的感動，這些感動有些像艷陽高照的太陽，溫暖她人、有些讓人痛哭流涕。

我分享一個運命的故事感你們聽，這是我媽媽的公司請來擁有「無腿舞后」之稱的何欣茹，在她九歲那年，他興高采烈的捧著田徑的獎杯，沒想到，惡運悄悄的跟著她，讓他整個命運逆轉過來，再過平交道時，雙腳不幸的被火車輾過，整個骨頭碎掉，只剩下皮包著腳掌，可惜上第沒留下任何希望，醫生首先把她兩隻腳截掉，而且還要天天泡藥水，還要穿義肢。

何欣茹:「大概有五、六個人把她圍住，把她推倒，再用石頭丟她，而欺負她完就一哄而散。他開始封閉自己不與人接處，十四年後，有一個人，就像救星般似的。何欣茹:「我看到他撐著兩隻拐杖，她的笑容如太陽般燦爛，何欣茹也開始學會游泳、划獨木舟˙˙˙˙˙˙等。

就這樣兩人開始學習國標舞，二00四拿下世界倫標舞大賽第四名、亞洲第一名，何欣茹:「當你時時刻刻，都接受別人的幫助的人，然後轉換到現在變成，可以去幫助別人的人，我覺得那種轉換是很令人興奮的。」「命運」兩的字對她而言，要顛倒過來寫「運命」，運轉自己的的命。

我覺得我們應該學習他那永不放棄的精神，這溫馨、感人的故事是否讓你覺得感動呢？

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

這世界沒有真正的笨蛋

2014年11月5日星期三下午1:28 發表意見

一件事發生了，要學到教訓，不然這件事就白發生了！

這世界沒有真正的笨蛋，只有習慣不動腦袋的人，所以要常常動動腦！

態度決定想法，想法決定做法，做法決定會不會成功，加上運氣部分，你還掌握65%以上。所以做事在沒盡力前別輕言放棄，但也不能蠻幹。

自信來自對自我的了解, 因為了解自己的不足, 更能去欣賞他人的好.自信是無忌妒的！

長相及聰明是父母的功勞，努力及成就才是你自己創造出來的，你可以決定的.。

如果傷心難過可以解決事情，請用力的哭.如果不行，請在情緒發洩後，將多餘的情緒化為力量將事情圓滿解決.不然你還得哭好幾次。

要做什麼人你自己決定，所以要對自己的決定負完全的責任。

~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

"你是獵人還是獵物？"

Tea Road

Monga Shop

101時尚舍~豐富您的居家生活

HAPPY玩家帆布包購物網

統愛眼鏡大批發

公司形象網站+部落格+購物車+網路相簿

延齡國際股份有限公司

孟甲商行~專營南北雜貨茶葉

雅奕國際有限公司~專業經營人力派遣、外勞引進項目

台北市骨節整復職業工會

中華民國兩岸消費者保護協會

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定教學

動畫響應式EDM廣告行銷設計

中華整復師總會資源網

中華整復師總會

中華公益慈善總會

A.M.C.T脊骨神經力學公共研究網

猛甲茶道互動式創意網頁設計 Tea Road

找回 Windows 8 消失的開始按鈕與開始選單~Start Menu 8 2.0.1.172 中文版

自動換圖的產品說明與介紹 html css jquery語法

滑鼠移過出現 menu 導覽列選單 html css jquery語法

部落格 blog有音樂的漂亮時鐘

滑鼠滑移過側邊自動滑出式超連結表單 html css jquery語法

滑鼠滑移過出現資訊看板自動更新網頁時間 html css jquery語法

滑鼠移過出現變換的超連結滑動標籤雲 html css jquery語法

滑鼠移過出現說明文字 css html jquery語法

Answer：

Answer：

Answer：

喝茶兼養魚　金魚茶包台灣人做的！

運命的故事

這世界沒有真正的笨蛋

聯絡我們

101時尚舍~豐富您的居家生活

HAPPY玩家帆布包購物網

統愛眼鏡大批發

公司形象網站+部落格+購物車+網路相簿

延齡國際股份有限公司

孟甲商行~專營南北雜貨茶葉

雅奕國際有限公司~專業經營人力派遣、外勞引進項目

台北市骨節整復職業工會

中華民國兩岸消費者保護協會

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定 教學

動畫響應式EDM廣告行銷設計

中華整復師總會資源網

中華整復師總會

中華公益慈善總會

A.M.C.T脊骨神經力學公共研究網

Answer：

Answer：

Answer：

聯 絡 我 們

響應式網頁媒體查詢 Media Queries 及嵌入內容的基本設定教學

聯絡我們