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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94vm97WyQVua1kBWpCcbNAQq6hLTj-V4rn3P90cgXNBFngtKDobxVWBD4Xfua3gr-xk9X1LjZiaXU9It46lqxL_AoOkgrzwGSKc-j8-WwUn3OghFA6EV3AsAiEL6oOXLqq4BmAh_HETfJ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbk_UY5uXoUjVBUkSf51NH8ZWSfFB60TKH4nu2SEUeKx-f-01zDhvDCtGyJEKvoIa1tR_qmjqQMDLGukLnM0Ms7bElsbYisNmIJzmcReWh2CjbiHBer9R77qpcWf5TVjjRlIXC6NgxNEU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6LyntUEYORSa8tCbfUrTo-LiEuhOCqt2vyt6G055gXL7QSRRudpraMn4NAswG3u1RhffwilFZkBKBEYOU-yOJhnsI3gm-SMwi4AXOMbhfBqOTSJg1VFvYp-S3hiIXOw0pa1GmPoY0E9nI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvm9c72u1LuWWawh5h_GZ2I4dlG-WWDXz0k3NAbIVeODtIsZ6cksi9KcTegy9oZmDCRQMsbR-tCEsSqwXtdDxaa4RlhH1IJodeWE2BCbJFtT_Z4p-6ue9EKxitUg7nW8QWzqYwx98XVs/s200/menu-top.png) no-repeat;
 height: 32px;}

#menu-content {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTZi5nhyphenhyphenVQaLsLMYwdQSu8iLdXodW-mfEkcP4eD1dHLVgrWbnWYLNrcG-_sGaJSUv8Fo9o_bk5chrrwEv83vMJSDa9HNlX2eoGN85KMuEa0MifVwVXQGsW7x6JyMwo6oa5GZvyK41Lk4/s200/menu-content+%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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkp1g1G0Qs4hu2DqEonwoVrsPVcqPlhtNDCyqRTOpRfAxk7J7JR6Ctg8_ivEzg76wvysAcVJnWwNgkTOUOockbfesh3YTi0Ek0S-JDOFMReMN1jSzkBmJsaRVbXDK8mQ3u47xhJfOSNK4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4CYvRkyzYtE2WGmTldjJq-y3dz6x1MueToAl6jQWmzNszi84aqWM-NlJ6bNKlvGwguLxOMsKCl6p2BzphsB4tpSuAIGNDsGZ1F4jZvsajNXAcmSnWOsLbVKUEwStWTfb9dhKjYTfEw8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4CYvRkyzYtE2WGmTldjJq-y3dz6x1MueToAl6jQWmzNszi84aqWM-NlJ6bNKlvGwguLxOMsKCl6p2BzphsB4tpSuAIGNDsGZ1F4jZvsajNXAcmSnWOsLbVKUEwStWTfb9dhKjYTfEw8/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>

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

"你是獵人還是獵物？"

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 及嵌入內容的基本設定教學

聯絡我們