Study Journals of TYRuan: 6月 2014

2014年6月18日星期三

CSS 屬性 display 的值 inline block inline-block none

http://blog.xuite.net/vexed/tech/29221717-CSS+%E5%B1%AC%E6%80%A7+display+%E7%9A%84%E5%80%BC+inline+block+inline-block+none

我先列幾個網站，有興趣的人可以算算 CSS 屬性 display 的值到底有幾種︰

這麼多種也就罷了，每個瀏覽器支援的程度又不一樣 ~!@#$%^&* 。我到現在也是頭昏昏的，很多細微的差別也不是很清楚。所以我只挑我比較常用的四種出來介紹︰

display : none
把 HTML 元件的 display 設為 none 就是不顯示這個東西。 display : none 和 visibility : hidden 的差別是 display : none 這個東西就不見了，不佔空間， visibility : hidden 只是隱形看不見，還是有佔空間。
display : inline
<a> 、 <span> 、 <b> 、 <i> 、 <img> 、 <iframe> ... 這幾個 HTML 元素預設的 display 屬性是 inline ，用最簡單的講法解釋 display : inline 就是兩個 display : inline 的元素連在一起會在同一行，不會換行。
display : inline 的 HTML 元素可以有 margin-left 、 margin-right 、 padding-left 、 padding-right ，但不能有 margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。
要讓 display : inline 元素水平置中的方式是在此元素的父元素加上 text-align : center 。
當然你也可以用 CSS 把預設是 display : inline 的 HTML 元素設成 display : block 。
附帶一提， display : inline 元素不該包住 display : block 元素。
display : block
<div> 、 <p> 、 <h1> 、 <h2> ... 這幾種 HTML 元素預設的 display 屬性是 block ，簡單講就是不管 display : block 元素的前面後面是什麼，碰到 display : block 元素就是會換行，而 display : block 元素的寬度預設會撐到最大。
display : block 元素不管是 margin 、 padding 、 width 、 height 、 background-image 通通都可以。
要將 display : block 元素水平置中，方法是在此元素加上 margin : 0 auto ， 0 可以取代為任何數字。
當然也可以用 CSS 把預設是 display : block 的 HTML 元素設成 display : inline 。
display : inline-block
顧名思義，就是外面是 inline ，裡面是 block 。
所以碰到 display : inline-block 元素不會換行，但是又可以設定 padding-top 、 padding-bottom 、 width 、 height 、 background-image 。
用 CSS 讓連結用圖片顯示就是 inline-block 常見的應用。

一切看來這麼美好！怎麼可能，你第一天寫 CSS 嗎？下面整理一些比較常遇到的 bug ︰

IE6 IE7 只有預設是 display : inline 的元素才可以設定為 display : inline-block 。
還好有 Hack 讓預設不是 display : inline 的元素在 IE6 IE7 秀成 inline-block ︰
```
div {
  display : inline-block;
  *display : inline;
  *zoom : 1;
}
```
在 IE6 display : block 搭配 float : left 或 right 會讓 margin-left 、 margin-right 變兩倍。
解決方法， IE6 自己除以 2 XD ！
```
div {
  float : left;
  margin-left : 10px;
  _margin-left : 5px;
}
```
另一種解法就是搭配上上面的 Hack ，讓 display : block 變成 inline-block 囉！
```
div {
  float : left;
  margin-left : 10px;
  _display : inline;
  _zoom : 1;
}
```
IE 特定情況下 display : inline-block 會和 text-indent 相衝。
詳情請看這篇。
Webkit 核心 Chrome 、 Safari 特定情況 display : inline-block 垂直對齊問題。
詳情請看這篇。

CSS Hack 什麼時候該用 _ ，什麼時候該用 * 請看這篇。

ul li 製中

2014年6月17日星期二

PHP date and mktime function


http://php.net/manual/en/function.date.php

<?php
$tomorrow  = mktime(0, 0, 0, date("m")  , date("d")+1, date("Y"));$lastmonth = mktime(0, 0, 0, date("m")-1, date("d"),   date("Y"));$nextyear  = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);

?>

http://www.php.net/manual/en/function.mktime.php


<?phpecho date("M-d-Y", mktime(0, 0, 0, 12, 32, 1997));
echo date("M-d-Y", mktime(0, 0, 0, 13, 1, 1997));
echo date("M-d-Y", mktime(0, 0, 0, 1, 1, 1998));
echo date("M-d-Y", mktime(0, 0, 0, 1, 1, 98));?>

19天前：
$sdate = date("Y-m-d",mktime(0, 0, 0, date("m"), date("d")-19, date("Y")));

7天前：
$sdate = date("Y-m-d",mktime(0, 0, 0, date("m"), date("d")-7, date("Y")));

2014年6月12日星期四

apache下设置不显示目录列表 Indexes FollowSymLinks

http://blog.sina.com.cn/s/blog_66c183b3010102ql.html

如果你的文件根目录里有 index.html，浏览器就会显示 index.html的内容，如果没有 index.html，浏览器就会显示文件根目录的目录列表，目录列表包括文件根目录下的文件和子目录。

同样你输入一个虚拟目录的地址：

http://localhost:8080/b/
如果该虚拟目录下没有 index.html，浏览器也会显示该虚拟目录的目录结构，列出该虚拟目录下的文件和子目录。

如何禁止 Apache 显示目录列表呢？

要禁止 Apache 显示目录结构列表，只需将 Option 中的 Indexes 去掉即可。

<Directory "D:/Apa/blabla">
Options Indexes FollowSymLinks #---------->Options FollowSymLinks
AllowOverride None
Order allow,deny
Allow from all
</Directory>
你只需要将上面红色代码中的 Indexes 去掉，就可以禁止 Apache 显示该目录结构。用户就不会看到该目录下的文件和子目录列表了。

Indexes 的作用就是当该目录下没有 index.html 文件时，就显示目录结构，去掉 Indexes，Apache 就不会显示该目录的列表了。

第二种方法
解决办法：
1、编辑httpd.conf文件
vi ./conf/httpd.conf

   找到如下内容：
          ?BR>          <Directory “C:/Program Files/Apache2.2/htdocs”>
              #
              # Possible values for the Options directive are “None”, “All”,
              # or any combination of:
                 Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
              #
              # Note that “MultiViews” must be named *explicitly* — “Options All”
              # doesn’t give it to you.
              #
              # The Options directive is both complicated and important. Please see
              # http://httpd.apache.org/docs/2.2/mod/core.html#options
              # for more information.
              #
              Options Indexes FollowSymLinks

              #
              # AllowOverride controls what directives may be placed in .htaccess files.
              # It can be “All”, “None”, or any combination of the keywords:
              #   Options FileInfo AuthConfig Limit
              #
              AllowOverride None

              #
              # Controls who can get stuff from this server.
              #
              Order allow,deny
              Allow from all

</Directory>
……

   在Options Indexes FollowSymLinks在Indexes前面加上 – 符号。
        即： Options -Indexes FollowSymLinks
   【备注：在Indexes前，加 + 代表允许目录浏览；加 – 代表禁止目录浏览。】

这样的话就属于整个Apache禁止目录浏览了。

    如果是在虚拟主机中，只要增加如下信息就行：
           <Directory “D:test”>
             Options -Indexes FollowSymLinks
             AllowOverride None
             Order deny,allow
             Allow from all
         </Directory>
     这样的话就禁止在test工程下进行目录浏览。

备注：切记莫把“Allow from all”改成 “Deny from all”，否则，整个网站都不能被打开。
<Finished>

还有一种方法：

可以在根目录的 .htaccess 文件中输入

<Files *>
Options -Indexes
</Files>
就可以阻止Apache 将目录结构列表出来。

2014年6月10日星期二

Learn CSS Positioning in Ten Steps

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://mepopedia.com/forum/read.php?30,916

以下推薦的網頁是很好的 CSS Postion 用法介紹，看完之後有種可以掌握 CSS 的感覺 (而不是「被掌握」)

2014年6月7日星期六

「日照小時」與「等效日射小時」怎麼區別啊?

http://www.hengs.com/solarcase%20qa.html#06

日照小時：

一天內太陽直射光線照射地面的時間。以小時為單位。或是日出與日落之間的時間間隔。某地的日照時數和該地的地理位置與季節有關（如熱帶地區日照小時多.寒帶地區少）。經常引用日照小時者如農業用途或工程施工，其定義為在日射量＞120W/m2之時間累積值，高於此日射量的時間通常視線尚稱良好，有助於作物光合作用或為工程上可以施工時間，在台灣地區此數值全年約為2,000~3,000小時之間；

等效日射小時：

為評估太陽能發電之重要因子，此數值越大表示當地日射能量越強，發電量可以越多，其定義為將當地之日射量換算為1000W/m2之標準條件下之有效照射時間，在台灣地區此數值全年約為 900~1,650小時之間，如以每日平均值計算約為2.5~4.5小時之間。下表為依據中央氣象局與本公司估算之全台各地日平均「等效日射小時」，等校日照小時須對照下表之台灣地區全天空輻射量與公式做換算：全天空輻射量換算等校日照小時公式＝ESH=該月全天空輻射量÷（該月總天數Ｘ3.6），以上表套公式算起來，台灣各地之效日照小時大略如下

等效日照小時
2.5	3	3.5	4	4.5
台北基隆宜蘭	桃園花蓮新竹	苗栗台中彰化南投雲林台東金門	嘉義台南高雄澎湖	屏東

上表為概況表，以同一緯度而言，通常海邊優於平原，平原又優於山邊與山地地區，在評估太陽能發電效益實應優先考慮「等效日射小時」優良者。

2014年6月5日星期四

跑馬燈 + hover 暫停

<?php
if ( !isset($_SESSION) ) { session_start(); }
?>
<!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" />
<meta name="keywords" content="化學,酒精,化工,chemical,alcohol,echo,化學原料,化工原料,乙醇,食用酒精,ACROS,Aldrich,ALFA,ChemService,Duchefa,FISHER,FLUKA,frinton,MATRIX,MATRIX,MP,Polyscience,SIGMA,STREM,SynChem,TCI,TRC,Alfa Aesar,ThermoFisher,Lancaster,fluka,Showa,乾洗手,DIY,MSDS" />
<meta name="description" content="景明化工以專業團隊提供快速、優質的服務，滿足您的需求，是景明永續追求的目標" />
<meta name="verify-v1" content="KxNAS5zcatSQci46PlwIcjiegi79TPLIEV4kMJaJpa4=" >
<META name="y_key" content="84ac5ce93437152b">
<title>景明化工</title>

<script type="text/javascript" src="js/jquery-1.8.0.min.js?v=1"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js?v=1"></script>
<script type="text/javascript" src="js/mouseImage-min.js?v=1"></script>
<script type="text/javascript" src="js/menu-min.js?v=1"></script>
<script type="text/javascript" src="js/window-main-min.js?v=1"></script>
<script type="text/javascript" src="js/index-back-min.js?v=1"></script>
<script type="text/javascript" src="js/custom-min.js?v=1"></script>

<link href="css/style_new.css?v=1" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function(){
$(function(){
   // 先取得 .abgne-news-scroll ul, 並設定淡入及輪播時間
   var $news = $('#scroll ul'),
   fadeInSpeed = 1000,
   timer, speed = 3000;
   _stop = false;

   // 若按鈕使用中,計數器暫停並歸零
   $('#scroll img').hover(
       function(){
          _stop = true;
          clearTimeout(timer);
       },
       function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
       }
   );

   $('.brand_form_logo').hover(
       function(){
          _stop = true;
          clearTimeout(timer);
       },
       function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
       }
   );

   // 用來控制輪播用
   function newsScroll(){
    // 先找出最後一個 li
    var $last = $news.find('li:last');
    // 複製一份並先隱藏起來
    // 接著把它加到 .abgne-news-scroll ul 中的第一個項目
    // 最後用淡入的方式顯示, 當顯示完後繼續輪播
    $aaa = $last.clone();
    $aaa.hover(
       function(){
          _stop = true;
          clearTimeout(timer);
       },
       function(){
          _stop = false;
          timer = setTimeout(newsScroll, 3000);
       }
   );

    $aaa.hide().prependTo($news).fadeIn(fadeInSpeed, function(){
      if (!_stop) {
        timer = setTimeout(newsScroll, speed);
      }
    }).css("class","brand_form_logo");
    // 把 $last 移除掉
    $last.remove();
   }

   // 啟動輪播計時器
   if (!_stop) timer = setTimeout(newsScroll, speed);
   //newsScroll();

   $('a').focus(function(){
           this.blur();
   });

});
});
</script>

<style>
.nodisplay { display:none;}
</style>

</head>

<body>
<div id="coverwrap"></div>
<div id="body">


<div id="header">
<?php require_once('header.php'); ?>
</div>



<?php require_once('side.php'); ?>



<div id="footer">
<?php require_once('footer.php'); ?>
</div>



<div id="main">
    <div id="index">
      
      <div id="index_bottom">
        
        <div class="index_inner" style="width:25%">
          <img src="images/index_mv_title_min.png?v=1" border="0" /><br />
          <iframe width="230" height="135" src="https://www.youtube.com/embed/lnzlA8AS4H4" frameborder="0" allowfullscreen></iframe>
        </div>
        

<?php
#get news
require_once('controller/conn_news.php');

$news_db = new echo_news;
$news_db->connect();

$news_objs = $news_db->get_latest_news(4);
while( ($news_list[] = $news_objs->fetch_assoc()) || array_pop($news_list) );
?>
        
        <div class="index_inner" style="width:25%">
          <img src="images/index_news_title_min.png?v=1" border="0" />&emsp;
          <?php foreach($news_list as $news):?>
          <div class="index_news">
            <div class="index_day"><?=date("Y-m-d", strtotime($news["created_on"]))?></div>
            <div class="index_word"><a href="news/detail.php?id=<?php echo $news['auto_sn']; ?>">．<?=$news["news_title"]?></a></div>
          </div>
          <?php endforeach;?>
        </div>
        
      </div>
      
      <div id="index_unit01">
        <div id="banner_change">
          <ul>
            <li><div class="nodisplay">景明酒精事業部</div></li>
            <li><div class="nodisplay">景明化學事業部</div></li>
            <li><div class="nodisplay">景明食用酒精</div></li>
            <li><div class="nodisplay">景明酒精包裝</div></li>
            <li><div class="nodisplay">景明 AENCORE 代理</div></li>
          </ul>
        </div>
      </div>
       <div class="abgne-news-scroll" id="scroll">
         <a href="/brand"><img src="../images/indexbrandtitle.jpg" id="indexbrandtitle" alt="景明代理品牌" title="暫停跑馬燈"></a>
         <ul>
           <li id="brand01" class="brand_form_logo"><a target="_blank" href="http://abcr.lookchem.com/"><img alt="景明代理 ABCR" src="../images/brand_01.jpg" width="159" height="60" border="0" /></a>
           <br>ABCR GmbH & Co. KG：來自於德國。<br>提供各式含氟化合物。</li>
           <li id="brand02" class="brand_form_logo"><a target="_blank" href="http://www.acros.com/"><img alt="景明代理 ACROS" src="../images/brand_02.jpg" width="160" height="60" border="0" /></a>
           <br>ACROS：產地比利時<br />各式的有機合成中間體起始物，另有生化合成專用藥品。另外也提供高純度的無機金屬。</li>
           <li id="brand25" class="brand_form_logo"><a target="_blank" href="http://aencore.com/"><img alt="景明代理 AENCORE" src="../images/brand_25.jpg" width="140" height="104" border="0" /></a>
           <br>AENCORE：來自澳洲。<br>酸液製造商，長期提供澳洲檢驗單位使用。主要提供無機鹽、材料/金屬鹽和高分子化合物</li>
           <li id="brand03" class="brand_form_logo"><a target="_blank" href="http://www.alfa.com/"><img alt="景明代理 ALFA AESAR" src="../images/brand_03.jpg" width="160" height="60" border="0" /></a>
           <br>ALFA AESAR：產地美國。<br />與英國LANCASTER合併，主要提供金屬和氟化物；金屬產品主要延續Johnson Matthey 符合最高純度及最高品質特點，除此之外也提供奈米等級、太陽能、燃料電池相關產品。</li>
           <li id="brand04" class="brand_form_logo"><a target="_blank" href="http://www.dowelectronicmaterials.com/"><img alt="景明代理 AZ electronic materials" src="../images/brand_04.png" width="140" height="50" border="0" /></a>
           <br>簡稱 AZ。景明主要代理銷售全省學校實驗室及國家各類研究機構。為專業光阻劑供應商。</li>
           <li id="brand05" class="brand_form_logo"><a target="_blank" href="http://www.chriskev.com/"><img alt="景明代理 CHRISKEV" src="../images/brand_05.gif" width="160" height="45" border="0" /></a>
           <br>CHRISKEV：產地美國。<br />提供各式Polyimide (PI)單體、diamine及dianhydride。光電特用化學品主要供應來源。</li>
           <li id="brand06" class="brand_form_logo"><a target="_blank" href="http://www.isotope.com/"><img alt="景明代理 CIL Cambridge Isotope Laboratories" src="../images/brand_06.jpg" width="50" height="100" border="0" /></a>
           <br>CIL：產地美國。<br />主要供應NMR使用的氘化溶劑 ( D-SOLVENT )。</li>
           <li id="brand07" class="brand_form_logo"><a target="_blank" href="http://www.duchefa-biochemie.com/"><img alt="景明代理 DUCHEFA" src="../images/brand_07.jpg" width="160" height="60" border="0" /></a>
           <br>DUCHEFA：來自荷蘭。<br />植物細胞及組織培養生化用的培養基及相關試藥。</li>
           <li id="brand08" class="brand_form_logo"><img src="../images/brand_08.png" width="160" height="40" border="0" />
           <br>ECHO CHEMICAL：公司自有品牌<br />與世界大廠合作穩定供應各種等級的溶劑，如HPLC /ACS/工業級。</li>
           <li id="brand09" class="brand_form_logo"><a target="_blank" href="http://www.fishersci.com/ecomm/servlet/cmstatic?storeId=10652&ddkey=http:cmstatic"><img alt="景明代理 FISHER CHEMICAL" src="../images/brand_09.png" width="160" height="60" border="0" /></a>
           <br>FISHER CHEMICAL：來自美國。<br />全球首屈一指的分析實驗室溶劑(試劑)製造商。主要提供最高純度最高品質的產品給全球最頂尖的學府、藥廠、政府檢驗單位、研究單位以及生技公司。</li>
           <li id="brand10" class="brand_form_logo"><a target="_blank" href="http://www.generalchemical.com/"><img alt="景明代理 GENERAL CHEMICAL" src="../images/brand_10.jpg" width="160" height="60" border="0" /></a>
           <br>GENERAL CHEMICAL：來自美國。供應各種電子級溶劑。</li>
           <li id="brand11" class="brand_form_logo"><a target="_blank" href="http://www.grandkem.com/"><img alt="景明代理 GRAND CHEMICAL" src="../images/brand_11.jpg" width="160" height="60" border="0" /></a>
           <br>GRAND CHEMICAL：供應各種特殊溶劑。</li>
          
          
           <li id="brand13" class="brand_form_logo"><a target="_blank" href="http://www.maybridge.com/"><img alt="景明代理 MAYBRIDGE" src="../images/brand_13.jpg" width="93" height="100" border="0" /></a>
           <br>MAYBRIDGE：來自於英國。<br />目前ACROS、FISHER及MAYBRIDGE已經合併，其Maybridge系列提供藥廠最多元化和最高水準藥物中間體加速新藥品的開發效能。</li>
           <li id="brand14" class="brand_form_logo"><a target="_blank" href="http://www.mpbio.com/?country=206"><img alt="景明代理 MP MPBIO" src="../images/brand_14.jpg" width="110" height="70" border="0" /></a>
           <br>MPBIO：簡稱 MP。來自美國。<br />供應各種生化試劑，特別為動物飼料並可依客戶需求而提供客製化服務。</li>
           <li id="brand15" class="brand_form_logo"><a target="_blank" href="http://www.pharmcoaaper.com/"><img alt="景明代理 PHARMCO-AAPER" src="../images/brand_15.jpg" width="160" height="40" border="0" /></a>
           <br>PHARMCO-AAPER：來自美國。<br />生產及製造世界上最高純度製藥及分析等級品質乙醇的首選廠商。實施最嚴格的品管系統，並全面整合至專屬的製造流程，已達成一連串從原料到成品的品質監控及管制。<br />
主要提供生物業、製造業、醫療業及其他關鍵工業應用之高純度乙醇、世界級cGMP等級溶劑、無菌產品及客製化混合配方。<br />
其供應產品經過FDA、ISO及Kosher認證，符合並凌駕cGMP與HACCP規範及其他國際性的品管標準。</li>
           <li id="brand16" class="brand_form_logo"><a target="_blank" href="http://www.purac.com/"><img alt="景明代理 PURAC" src="../images/brand_16.jpg" width="160" height="66" border="0" /></a>
           <br>PURAC：來自於荷蘭。<br />世界上最大也是最有經驗的天然乳酸、乳糖醇、聚丙酸和聚乳酸的生產菌，所有產品均有生物可分解的特性。</li>
           <li id="brand17" class="brand_form_logo"><a target="_blank" href="http://www.scharlab.com/"><img alt="景明代理 Scharlab Scharlau" src="../images/brand_17a.jpg" width="160" height="60" border="0" />&emsp;<img src="../images/brand_17b.jpg" width="160" height="60" border="0" /></a>
           <br>Scharlab (Scharlau)：來自西班牙。<br />主要供應實驗室試藥、無機物和微生物培養皿等生技產品；以最高品質和最合理的價格結合最出色的歐系高規並符合EP / USP規格品牌。</li>
           <li id="brand18" class="brand_form_logo"><a target="_blank" href="http://seed-chem.com/"><img alt="景明代理 SEEDCHEM" src="../images/brand_18.jpg" width="80" height="80" border="0" /></a>
           <br>SEEDCHEM：來自澳洲。<br />主要依客戶需求提供特殊包裝以及客製化產品服務。</li>
           <li id="brand19" class="brand_form_logo"><a target="_blank" href="http://www.showa1.com/en/"><img alt="景明代理 SHOWA" src="../images/brand_19.jpg" width="160" height="60" border="0" /><a>
           <br>SHOWA 昭和化學株式会社：產地日本。<br />秉持著日本人的認真態度，對產品上高度要求的執著；提供業界最高品質的無機鹽和化學試藥以供研發和實驗進步和創新。</li>
           <li id="brand20" class="brand_form_logo"><a target="_blank" href="http://scientificpolymer.com/"><img alt="景明代理 SP2 scientific polymer" src="../images/brand_20.jpg" width="160" height="40" border="0" /></a>
           <br>Sp2：專業製造高分子，高分子單體與高分子標準品。</li>
           <li id="brand21" class="brand_form_logo"><a target="_blank" href="http://www.strem.com/"><img alt="景明代理 STREM" src="../images/brand_21.jpg" width="160" height="60" border="0" /></a>
           <br>STREM：產地美國。<br />主要供應高純度金屬及各種有機金屬、MOCVD材料、奈米材料及觸媒。</li>
           <li id="brand22" class="brand_form_logo"><a target="_blank" href="http://www.synthon-chemicals.com/"><img alt="景明代理 SYNTHON" src="../images/brand_22.jpg" width="164" height="80" border="0" /></a>
           <br>SYNTHON CHEMICALS：來自德國。<br />主要提供各式液晶中間體及特化合成用中間體。</li>
           <li id="brand23" class="brand_form_logo"><a target="_blank" href="http://www.tcichemicals.com/zf/tw/index.html"><img alt="景明代理 TCI" src="../images/brand_23.jpg" width="119" height="80" border="0" /></a>
           <br>TCI(東京化成)：來自於日本。<br />主要提供有機中間體，產品種類多，其包裝最適合實驗室分析研究，也提供完美客製化服務，產品線齊全且交期快!</li>
           <li id="brand24" class="brand_form_logo"><a target="_blank" href="http://www.tedia.com/"><img alt="景明代理 TEDIA" src="../images/brand_24.png" width="160" height="60" border="0" /></a>
           <br>TEDIA：來自於美國。<br />生產製造最多種類的高純度溶劑，提供GC、HPLC、QC及合成等所需各等級溶劑，且備有各式庫存。</li>
         </ul>
       </div>
    </div>
</div>


</div>
</body>

</html>

--------------------------------------------------------------------------------------------------------------------------

/*代理品牌跑馬燈設定*/
.abgne-news-scroll ul {
margin: 0;
padding-top: 40px;
list-style: none;
}
.abgne-news-scroll {
width: 190px;
height: 590px;
overflow: hidden;
float: left;

border:10px solid #eeeeee;
background:#fefae4;
box-shadow:0 3px 5px rgba(0%,0%,0%,0.3);
}
.abgne-news-scroll li {
/*background: url(arr.jpg) no-repeat 5px 10px;*/
padding: 40px 0px 0px 0px;
margin-left: -20px
}
#indexbrandtitle {
    position: relative;
    float: left;
    top: 8px;
    left: 0px;
    padding-right: 11px;
}

利用 jQuery 來製作網頁頁籤(Tab)

http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html

在網路知識爆炸的 Web 2.0 時代，一個頁面上要顯示的資訊越來越多，但總不可能把全部的內容都一次顯示出來塞滿整頁吧！所以就出現了頁籤(Tab)這樣的展示方式。

每個標籤都有相對應的內容區塊，這樣只要一個小小的位置能放置的資訊就會比原先的更多，就像是原本只是一層矮平房，現在把它蓋成 101 大樓一樣！

廢話不多說，讓我們先來看看 HTML 的部份吧：

檢視原始碼 HTML

<body>
 <div class="abgne_tab">
  <ul class="tabs">
   <li><a href="#tab1">男丁格爾</a></li>
   <li><a href="#tab2">jQuery</a></li>
  </ul>
 
  <div class="tab_container">
   <div id="tab1" class="tab_content">
    <h2>關於作者</h2>
    <p>目前工作是網頁開發為主，因此針對了 HTML, JavaScript, CSS 等知識特別深入研究。若有任何問題，歡迎直接留言或是透過 Mail 討論。</p>
   </div>
   <div id="tab2" class="tab_content">
    <h2>jQuery is a new kind of JavaScript Library.</h2>
    <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript</p>
   </div>
  </div>
 </div>
</body>

.abgne_tab 區塊是用來包覆我們的頁籤區塊，而 ul 及 li 是用來當標籤，其中的超連結是利用錨點(Anchor)的方式來設定，對應到指定的 id 元素。除了可以讓 jQuery 來直接取到元素之外，當 JavaScript 被停用時，至少還能用原本錨點(Anchor)的功能。

檢視原始碼 CSS

ul, li {
 margin: 0;
 padding: 0;
 list-style: none;
}
.abgne_tab {
 clear: left;
 width: 400px;
 margin: 10px 0;
}
ul.tabs {
 width: 100%;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
}
ul.tabs li {
 float: left;
 height: 31px;
 line-height: 31px;
 overflow: hidden;
 position: relative;
 margin-bottom: -1px; /* 讓 li 往下移來遮住 ul 的部份 border-bottom */
 border: 1px solid #999;
 border-left: none;
 background: #e1e1e1;
}
ul.tabs li a {
 display: block;
 padding: 0 20px;
 color: #000;
 border: 1px solid #fff;
 text-decoration: none;
}
ul.tabs li a:hover {
 background: #ccc;
}
ul.tabs li.active  {
 background: #fff;
 border-bottom: 1px solid#fff;
}
ul.tabs li.active a:hover {
 background: #fff;
}
div.tab_container {
 clear: left;
 width: 100%;
 border: 1px solid #999;
 border-top: none;
 background: #fff;
}
div.tab_container .tab_content {
 padding: 20px;
}
div.tab_container .tab_content h2 {
 margin: 0 0 20px;
}

當設定好 CSS 排版之後，大概就能看到基本的畫面了：

筆者的想法是，在未加上程式之前把內容都先顯示出來，預設讓 JavaScript 被停用或是載入失敗時還能看到內容。接著沒問題之後，就是加上 jQuery 來實做出完整的頁籤效果囉：

檢視原始碼 JavaScript

$(function(){
 // 預設顯示第一個 Tab
 var _showTab = 0;
 var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active');
 $($defaultLi.find('a').attr('href')).siblings().hide();
 
 // 當 li 頁籤被點擊時...
 // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
 $('ul.tabs li').click(function() {
  // 找出 li 中的超連結 href(#id)
  var $this = $(this),
   _clickTab = $this.find('a').attr('href');
  // 把目前點擊到的 li 頁籤加上 .active
  // 並把兄弟元素中有 .active 的都移除 class
  $this.addClass('active').siblings('.active').removeClass('active');
  // 淡入相對應的內容並隱藏兄弟元素
  $(_clickTab).stop(false, true).fadeIn().siblings().hide();
 
  return false;
 }).find('a').focus(function(){
  this.blur();
 });
});

一開始可以設定是要先顯示第幾個標籤的內容，接著就是把不顯示的部份給隱藏起來。當完成顯然及隱藏的步驟之後，就能看到完整的效果畫面了：

當點擊其它的頁籤時會立即的切換顯示相對應的內容。若想用滑鼠的滑入來觸發頁籤切換的話，只要把 click 事件改成 mouseover 事件就可以囉。

雖然完成了一個頁籤區塊，但有時可能一個頁面上就會放了2-3個頁籤區塊。若每個頁籤區塊的結構都差不多的話，我們就不用一一的為每個區塊來寫程式，只要善用 jQuery 的 each() 就能快速的完成 N 個頁籤區塊的設定：

檢視原始碼 JavaScript

$(function(){
 // 預設顯示第一個 Tab
 var _showTab = 0;
 $('.abgne_tab').each(function(){
  // 目前的頁籤區塊
  var $tab = $(this);
 
  var $defaultLi = $('ul.tabs li', $tab).eq(_showTab).addClass('active');
  $($defaultLi.find('a').attr('href')).siblings().hide();
 
  // 當 li 頁籤被點擊時...
  // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
  $('ul.tabs li', $tab).click(function() {
   // 找出 li 中的超連結 href(#id)
   var $this = $(this),
    _clickTab = $this.find('a').attr('href');
   // 把目前點擊到的 li 頁籤加上 .active
   // 並把兄弟元素中有 .active 的都移除 class
   $this.addClass('active').siblings('.active').removeClass('active');
   // 淡入相對應的內容並隱藏兄弟元素
   $(_clickTab).stop(false, true).fadeIn().siblings().hide();
 
   return false;
  }).find('a').focus(function(){
   this.blur();
  });
 });
});

這樣出來的頁籤(Tab)效果就已經蠻實用的，若美術設計能力夠的話，還能改用圖片的標籤來美化呢！

CSS 選擇器、選取器（Selector）種類簡介

http://blog.fishsaut.com/2010/03/css-selector.html

http://blog.mukispace.com/css-selectors/

Class selectors（Class選擇器，Dreamweaver稱為類別選擇器，這樣翻譯也對啦）
ID selectors（ID選擇器）
Type selectors（型態選擇器，Dreamweaver稱為標籤選擇器，因為套用於HTML標籤）
Universal selector（通用選擇器）
Attribute selectors（屬性選擇器）
Descendant combinator（後代選擇器）
Child combinator（子選擇器）
Adjacent sibling combinator（同層相鄰選擇器）
General sibling combinator（同層全體選擇器）
Pseudo-classes（偽類選擇器）
Pseudo-elements（偽元素選擇器）
Groups of selectors（群組選擇器）

Class selectors（Class選擇器）

「.」開頭，名稱可自訂，一張網頁可有多個class屬性值。

CSS

.emText { color:red;}

HTML

<p class="emText">此段會套用紅色</p>

ID selectors（ID選擇器）

「#」開頭，名稱可自訂，一張網頁只能有一個ID屬性值。

CSS

#emText { color:red;}

HTML

<p id="emText">此段會套用紅色</p>

Type selectors（型態選擇器）

設定於HTML的標籤上，網頁上所有的標籤都會套用。

CSS

h1 {color:red;}
p {color:black;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用黑色</p>

Universal selector（通用選擇器）

使用字元「*」，整張網頁下的所有元素都會套用設定。

CSS

* {color:red;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用紅色</p>

Attribute selectors（屬性選擇器）

針對有套用特定屬性的標籤做CSS設定。例如：

E[att] //套用於含att屬性的E標籤（簡易屬性選擇器）
E[att=val] //套用於att屬性值為val的E標籤（精確屬性選擇器）
E[att~=val] //套用於att屬性值包含val的E標籤（部份屬性選擇器）

CSS

div {color:black;}
div[title] {color:red;}
div[title=fishbecat] {color:green;}
div[title~=fishbecat] {color:blue;}

HTML

<div> 此區塊會套用黑色</div>
<div title="blog"> 此區塊會套用紅色</div>
<div title="fishbecat"> 此區塊會套用綠色</div>
<div title="fishbecat's blog">此區塊會套用藍色</div>

顧名思義，就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型，分別為:

h2[class] //符合所有含 class 的 h2 標籤即可

<style>
h2 {
  color: red;
}
</style>

<h2>
我是紅色</h2>
<h2 class="title">
我是紅色</h2>
<h2 class="nav title">
我是紅色</h2>
<h2 class="title-a-b">
我是紅色<h2>
<h2 class="title sidebar">
我是紅色</h2>

<style>

h2 {

color: red;

}

</style>

h2[class=title] //符合含 class=title 的 h2 標籤

<style>
body {
  color: black;
}
h2[class=title] {
  color: red;
}
</style>
 
<h2>
我是黑色</h2>
<h2 class="title">
我是紅色</h2>
<h2 class="nav title">
我是黑色</h2>
<h2 class="title-a-b">
我是黑色<h2>
<h2 class="title sidebar">
我是黑色</h2>

<style>

body {

color: black;

}

h2[class=title] {

color: red;

}

</style>

h2[class~=title] //只要 class 裡頭有包含 title 文字的 h2 標籤即可

<style>
body {
  color: black;
}
h2[class~=title] {
  color: red;
}
</style>
 
<h2>
我是黑色</h2>
<h2 class="title">
我是紅色</h2>
<h2 class="nav title">
我是紅色</h2>
<h2 class="title-a-b">
我是黑色<h2>
<h2 class="title sidebar">
我是紅色</h2>

<style>

body {

color: black;

}

h2[class~=title] {

color: red;

}

</style>

h2[class|=title] //class 的開始值必須為 title 的 h2 標籤

<style>
body {
  color: black;
}
h2[class|=title] {
  color: red;
}
</style>
 
<h2>
我是黑色</h2>
<h2 class="title">
我是紅色</h2>
<h2 class="nav title">
我是黑色</h2>
<h2 class="title-a-b">
我是紅色<h2>
<h2 class="title sidebar">
我是紅色</h2>

<style>

body {

color: black;

}

h2[class|=title] {

color: red;

}

</style>

Descendant combinator（後代選擇器）

E F，利用空白鍵區隔兩個元素，表示在 E 元素內的 F 元素才會套用。(中間相隔有別的tag也可以)

CSS

a { color:black;}
h1 a { color:red;}
#wrapper a { color:green;}

HTML

<a> 只設定a標籤會套用黑色</a>

<h1>
<a>在h1裡的a標籤會套用紅色</a>
</h1>

<div id="wrapper">
<a>在ID=wrapper裡的a標籤會套用綠色</a>
</div>

Child combinator（子選擇器）

E > F，利用>區隔兩個元素，表示在有父子關係的元素才會套用。與後代不同的是 E 及 F 元素之間不能再插入其它的元素，否則就不是父子關係了。

CSS

#wrapper > p{ color:red;}
#wrapper p { color:black;}

HTML

<div id="wrapper">
<p>在id=wrapper區塊裡的段落會套用紅色</p>
</div>

<div id="wrapper">
<span>
<p>中間多了span就只會套用黑色</p>
</span>
</div>

Adjacent sibling combinator（同層相鄰選擇器）

E + F，利用+區隔兩個元素，表示在與 E 同一層關係的相鄰 F 元素才會套用。

CSS

h1 { color:red;}
h1 + p { color:green;}

HTML

<h1>標題1會套用紅色</h1>
<p>跟h1相鄰的p會套用綠色</p>
<p>沒有跟h1相鄰的p會套用預設值</p>

General sibling combinator（同層全體選擇器）

E ~ F，利用~區隔兩個元素，表示在與 E 同一層關係的 F 元素全部都會套用。
不過這是CSS 3的選擇器。目前並沒有所有瀏覽器都支援，Dreamweaver CS4也沒支援。

CSS

h1 { color:red;}
h1 ~ p { color:green;}

HTML

<h1>標題1會套用紅色</h1>
<p>h1接下來p都會套用綠色</p>
<p>h1接下來p都會套用綠色</p>

Pseudo-classes（偽類選擇器）

這個名詞可能許多人都覺得陌生，但提到a:link、a:visited、a:hover、a:active應該就很熟悉了吧！

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

CSS

p:first-child { color:red;}
p:lang(zh-TW) { color:green;}

HTML

<div>
<p>第一個 p 會套用紅色</p>
<p>其它的 p 不會變色</p>
</div>

<div>
<p lang="zh-TW">語言為 zh-TW 會套用綠色</p>
<p lang="en">語言為 en 不會變色</p>
</div>

Pseudo-elements（偽元素選擇器）

其實偽元素選擇器蠻多的，小魚就只先介紹 :first-line、:first-letter 這兩個元老級的偽元素。

:first-line   //元素的第一行會套用
:first-letter   //元素的第一個字母會套用
:after   //在元素後加上內容（一般會配 content 屬性）
:before   //在元素前加上內容（一般會配 content 屬性）

CSS

p:first-line { color:red;}
p:first-letter { color:green;}
.price:before { content:"NT$";}
.price:after { content:"元整";}

HTML

<div>
<p>
第一行會套用紅色<br/>
第二行以後不會變色
</p>
</div>

<div>
<p>
第一個字會套用綠色<br/>
其它的字不會變色
</p>
</div>

<div>
數字前加上"NT$"，數字後加上"元整"：<span class="price"> 1000 </span>
</div>

Groups of selectors（群組選擇器）

您還可以用「,」逗點區隔，同時對多個選擇器定義樣式。
E, F, G，同時針對E、F、G元素設定樣式。

CSS

h1, h2, p {color:red;}

HTML

<h1>群組內的元素都套用紅色</h1>
<h2>群組內的元素都套用紅色</h2>
<p>群組內的元素都套用紅色</p>
<a>群組沒定義的元素不會變色</a>

訂閱：文章 (Atom)

標籤

2014年6月18日 星期三

2014年6月17日 星期二

2014年6月12日 星期四

2014年6月10日 星期二

2014年6月7日 星期六

2014年6月5日 星期四

Class selectors（Class選擇器）

ID selectors（ID選擇器）

Type selectors（型態選擇器）

Universal selector（通用選擇器）

Attribute selectors（屬性選擇器）

Descendant combinator（後代選擇器）

Child combinator（子選擇器）

Adjacent sibling combinator（同層相鄰選擇器）

General sibling combinator（同層全體選擇器）

Pseudo-classes（偽類選擇器）

Pseudo-elements（偽元素選擇器）

Groups of selectors（群組選擇器）

網誌存檔

2014年6月18日星期三

2014年6月17日星期二

2014年6月12日星期四

2014年6月10日星期二

2014年6月7日星期六

2014年6月5日星期四