技術提供：Blogger.

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

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務！ 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


顯示具有 Css 標籤的文章。 顯示所有文章
顯示具有 Css 標籤的文章。 顯示所有文章

動態廣告輪播 jquery

2016年11月23日 星期三 下午5:55   , ,   發表意見

前往DEMO




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

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

讓 IE8以下版本支援響應式網頁設計語法(Responsive Web Design)

2016年2月16日 星期二 下午4:11   , , ,   發表意見

放在</head>上面
<!--[if lt IE 9]>
 <script src="http://webdesignerwall.com/wp-content/themes/wall/js/css3-mediaqueries.js"></script>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="~/Content/html5shiv/js/html5shiv.min.js"></script>
<script src="~/Content/respond/js/respond.min.js"></script>

*<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>


 <!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

 <!-- IE9 以下的 cross site ajax -->
 <!--[if lte IE 9]>
 <script type="text/javascript" src="jquery.xdomainrequest.min.js"></script>
 <![endif]-->

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

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

Jquery 選單menu 演示範例 語法下載

2016年2月3日 星期三 下午3:07   , ,   發表意見

Large Drop Down Menu Demo





閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

自訂卷軸顏色樣式 css jquery語法

2016年2月1日 星期一 下午6:04   , ,   發表意見

以下文字節錄於網頁設計向前走

沒有必要，千萬別叫訪客註冊

註冊對許多人來說是非常非常麻煩的事情，註冊代表對方會拿到你的資料，會有不好的感覺。重點是，訪客到你的網站來是需要看你網站的內容，不是來註冊的，如果需要註冊才能看的內容，我通常選擇不看，除非內容精華到極點。

不要在網頁中嵌入背景音樂

許多新手在初接觸網頁設計時，都會以為在網頁中嵌入音樂會讓網頁質感很高。這不對，播放音樂並沒有比較好，個人感覺會很煩躁、無法靜下心來閱讀文章，很吵。如果一堆網站都這樣做，真的會被吵死。

網站勿複雜、複雜則無法成大事

請你使用最少、最簡便的步驟讓訪客看到你網頁的內容，不需要在首頁載入前還先有一個Flash影片特效。訪客需要的是網站的內容，在網站剛起步時請直接讓訪客看到重要的內容，不要使用在進去首頁前特別用「點此進入」再來進去首頁。

一定要留下聯絡方式

沒有留下聯絡方式的網頁幾乎等於在做白工，沒辦法幫你增加一分人氣、一分知名度。這不僅對自己不利，更對訪客不利，你可能因此失去許多機會。

不要使用一閃一閃的文字

請不要使用閃來閃去的文字，這看起來很不舒服。

使用CSS+DIV取代HTML畫表格(table)、使用CSS定義樣式

如果你要學網頁設計我會建議你HTML和CSS一定要一起學，使用HTML畫table框架的模式已經非常非常非常落伍了(幾年前的網頁很多是這樣做)。CSS比HTML的功能更多、更便利、更容易分析整個網頁的佈局。強調一次，不要使用HTML畫table框架。

請留意SEO(搜尋引擎優化)，但不要過度操作

這個時代，已經沒有人在記你的網址打你的網址了，大家都使用Google來查資料，所以當你在製作網頁時，請留意網頁的meta標籤，是否讓搜尋引擎Google對你的網站微笑。

避免在文章內文中插入Adsense廣告

如果你在內文插入廣告，必然的流量一大點擊率就會上升，或許短期內錢可以進來比較多。但是以長期來看的話，會讓部分看不慣廣告的人離開，要放廣告，盡量放在邊欄就好。（不過在中文網頁，沒有插入廣告在內文的網站滿少的

簡單的導航結構

訪客拜訪網站的目的不是了解你的網站複雜的結構，而是要取得它想要的資訊，這一點一再強調，結構一定要化繁為簡，使用最簡單的方法讓訪客看到你的網頁核心價值，越簡單，越好。

讓訪客一眼就知道哪個文字是連結

訪客沒有時間去注意你在哪些文字上加了超連結，你要讓他們一眼看見哪個是連結，可以點，看到更多的內容。通常連結都使用藍色，比瀏覽器預設藍再淡一點（用預設藍感覺就沒那麼專業），如#06c看起來很舒服，適合當作連結的顏色，通常我們都會把底線去除，等訪客滑鼠移到上方時再顯示底線。

盡量不要給一般文字加上顏色，重點使用粗體代替之

這點在撰寫文章時要注意一下，盡量不要在文字上面加上顏色，當加多了，整個文章就會變得非常難以閱讀，也會很刺眼。如果是要註明文章的重點，請使用粗體字，不要使用顏色，別以為七彩繽紛很好看。

訪客點擊連結後，連結需換色

這點就是單純的網頁便利度的問題，當訪客點過的連結變色，能夠馬上知道這個連結有點過了，通常用在重複的連結會比較明顯，我想，除非記憶很差不然應該不會忘記吧。

不要使用GIF動畫圖片檔

當你使用了動畫圖片GIF檔，訪客一半以上的注意力都會被分散，所以不要在網頁中有會動的圖片，除非你就是要他點那個圖片，才會這樣做。而且，這會讓你的網站顯的非常不專業，有很多新手都喜歡讓網頁動來動去的，但那很不好。

不要使用POPUP彈出視窗

現在許多瀏覽器都已經有防跳窗的功能了，因為惡意網站總是利用跳窗來載入不正常的東西，而且會妨礙訪客瀏覽網頁。使用POPUP彈出視窗是一個很爛的決定。

在網頁底部提供更多資訊

不知道大家有沒有這個習慣，就是看網頁一定會拉卷軸到最底部，確認過沒有其他內容後才離開。透過這點，許多國外企業網站常常在頁底放連絡資料、更多介紹文、粉絲團嵌入、首頁等等功能，這些都有可能讓訪客有更多的資訊，讓訪客停留於網站的時間更長，黏著度更高。

不要變更已經公開網頁的網址

更改已經公開的網頁的網址如大家所知對SEO不好，同時也對有把網址加入到書籤、我的最愛的讀者帶來不便。

除了內文，其他區塊盡量減少圖片

網頁內文要圖文並茂這點我非常同意，也有利於SEO。但是其他地方，如側邊欄的地方，就盡量不要使用圖片做出效果，應該要使用CSS，並做到最簡化，「簡單風」是未來的趨勢，千萬別把網頁製作的太複雜、用太多圖片。用太多圖片會拖慢載入速度。

勿使用太複雜的導航文字

導航的文字真的不需要複雜，不需要像是一個成語一樣，只需要最簡單的幾個字就好。如「關於我們」、「連絡我們」、「訂閱我們」，其實這個還可以更簡單，把我們去掉也可以。





閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

響應式選單設計 menu範例

2016年2月1日 星期一 下午3:25   , ,   發表意見

Html語法
<span class="toggle">Menu</span>
<nav class="nav">
    <ul>
        <li>
            <a href="#">產品分類</a>
            <ul>
                <li><a href="#">產品分類1</a></li>
                <li><a href="#">產品分類2</a></li>
                <li><a href="#">產品分類3</a></li>
            </ul>
        </li>
        <li><a href="#">關於我們</a></li>
        <li><a href="#">聯絡我們</a></li>
        <li><a href="#">相關連結</a></li>
        <li><a href="#">部落格</a></li>
        <li><a href="#">服務項目</a></li>              
    </ul>
</nav>

Jquery語法
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".toggle").click(function() {
        $(this).toggleClass("active");
        $(".nav").slideToggle();
    });
    $(".nav > ul > li:has(ul) > a").append('<div class="arrow-bottom"></div>');
});
</script>

Css語法
<style>
            body {
                margin: 0;
                padding: 10px;
                font-family: 'Open Sans', sans-serif;
                font-size: 18px;
            }
            nav {
                display: block;
                float: left;
                width: 100%;
                margin-bottom: 30px;
             
            }
            .nav ul{
                margin: 0;
                padding: 0;
            }
            .nav li{
                position: relative;
                float: left;
                color: #FFF;
                list-style: none;
                background: #E77C40;
            }
            .nav li a {
                display: block;      
                padding: 15px 30px;
                color: #FFF;
                text-decoration: none;
            }

            .nav li:hover {
                background: #E9905E;
            }
            .nav li ul {
                background-color: rgba(231, 124, 64, 1);
                display: none;
                position: absolute;
                top: 100%;
            }
            .nav li:hover ul {
                display: block;
                right: 0;
                left: 0;
                top: 100%;
            }
            .toggle {
                display: none;
            }
            .arrow-bottom {
                position: absolute;
                top: 25px;
                right: 13px;
                margin-left: 5px;
                border-top: 4px solid #FFF;
                border-right: 4px solid transparent;  
                border-left: 4px solid transparent;      
                width: 1px;
                height: 1px;
            }
            @media (max-width: 640px) {
                .nav {
                    display: none;
                }
                .toggle {
                    display: inline-block;
                    background: #D8540A;
                    padding: 10px 15px;
                    color: #FFF;
                }
                .nav li{
                    float: none;
                }
                .nav li a{
                    padding: 10px 15px;
                }
                .nav li:hover ul {
                    position: relative;
                    display: block;
                    background: transparent;
                }
                .nav li:hover ul li{
                    background: transparent;
                }
                .nav li:hover ul li a{
                    padding-left: 30px;
                }
                .arrow-bottom {
                    top: 20px;
                }
            }              
        </style>

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

為 網站安裝 Line 分享按鈕及標題與網址自動換行語法

2016年1月27日 星期三 下午6:41   , ,   發表意見

1. 網頁版：沒有作用
2. 行動裝置(平板)：字串有網址的話會失效
3. 手機版：執行正常
<a href="http://line.naver.jp/R/msg/text/?文章標題%0D%0A文章網址"><img src="圖片網址"/></a>

 黃色字體就是文章標題與文章網址自動換行的語法

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

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

將文字大小Px 轉換成 Em CSS3 圓角 border-radius

2015年11月23日 星期一 下午4:46   ,   發表意見

要把 PX變成 EM非常簡單，1em=16px
假設字體大小為20px，希望字體大小變為24px，計算公式為24/20=1.2，因此字體大小為1.2em；如果希望字體大小為16px，公式為16/20=0.8，故字體為0.8em


 <div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>

 四個角的語法
  • border-top-left-radius - 設定左上角
  • border-top-right-radius - 設定右上角
  • border-bottom-right-radius - 設定右下角
  • border-bottom-left-radius - 設定左下角
css語法

.abt-left img{
width:100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

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

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

響應式選單menu

2015年10月29日 星期四 下午3:00   ,   發表意見

<!DOCTYPE html>
<html lang="zh-TW">
    <head>
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--[if IE 7]>
        <link rel="stylesheet" href="/stylesheets/font-awesome-ie7.min.css">
        <![endif]-->
        <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <style>
            body {
                margin: 0;
                padding: 10px;
                font-family: 'Open Sans', sans-serif;
                font-size: 18px;
            }
            nav {
                display: block;
                float: left;
                width: 100%;
                margin-bottom: 30px;
             
            }
            .nav ul{
                margin: 0;
                padding: 0;
            }
            .nav li{
                position: relative;
                float: left;
                color: #FFF;
                list-style: none;
                background: #E77C40;
            }
            .nav li a {
                display: block;      
                padding: 15px 30px;
                color: #FFF;
                text-decoration: none;
            }

            .nav li:hover {
                background: #E9905E;
            }
            .nav li ul {
                background-color: rgba(231, 124, 64, 1);
                display: none;
                position: absolute;
                top: 100%;
            }
            .nav li:hover ul {
                display: block;
                right: 0;
                left: 0;
                top: 100%;
            }
            .toggle {
                display: none;
            }
            .arrow-bottom {
                position: absolute;
                top: 25px;
                right: 13px;
                margin-left: 5px;
                border-top: 4px solid #FFF;
                border-right: 4px solid transparent;  
                border-left: 4px solid transparent;      
                width: 1px;
                height: 1px;
            }
            @media (max-width: 640px) {
                .nav {
                    display: none;
                }
                .toggle {
                    display: inline-block;
                    background: #D8540A;
                    padding: 10px 15px;
                    color: #FFF;
                }
                .nav li{
                    float: none;
                }
                .nav li a{
                    padding: 10px 15px;
                }
                .nav li:hover ul {
                    position: relative;
                    display: block;
                    background: transparent;
                }
                .nav li:hover ul li{
                    background: transparent;
                }
                .nav li:hover ul li a{
                    padding-left: 30px;
                }
                .arrow-bottom {
                    top: 20px;
                }
            }              
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".toggle").click(function() {
        $(this).toggleClass("active");
        $(".nav").slideToggle();
    });
    $(".nav > ul > li:has(ul) > a").append('<div class="arrow-bottom"></div>');
});
</script>
    </head>
    <body>
<span class="toggle">Menu</span>
<nav class="nav">
    <ul>
        <li>
            <a href="#">Works</a>
            <ul>
                <li><a href="#">Work1</a></li>
                <li><a href="#">Work2</a></li>
                <li><a href="#">Work3</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Service</a></li>              
    </ul>
</nav>
    </body>
</html>
~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

table css樣式 border cellspacing cellpadding 寬高

2015年8月13日 星期四 上午11:57     發表意見

 cellspacing表示表格間隔寬度,cellpadding表示表格的高度
table border="1" cellpadding="10" cellspacing="10"
艋舺大道 艋舺茶道 猛甲茶道
孟甲商行 夢甲商行 夢假孟真


border="1" cellpadding="5"(表格高度) cellspacing="0"(表格間 間格為0)
艋舺大道 艋舺茶道 猛甲茶道
孟甲商行 夢甲商行 夢假孟真
~歡迎轉載，但請註明來源網站名稱和網址，文章若有侵權，請來信告知，我們會盡快處理~

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...

捲軸及箭頭顏色修改

2015年8月5日 星期三 下午2:43     發表意見

/* ------------ 這是 Chrome瀏覽器設捲軸 的方式 ------------ */
/* 捲軸底色 */
::-webkit-scrollbar
{
background-color:#79b5dd; ←色碼請自行修改
}


/* 捲軸上方的箭頭 */
::-webkit-scrollbar-button:vertical:decrement{
background-image: url("上方箭頭圖片網址");
background-repeat: no-repeat;
}

/* 捲軸下方的箭頭 */
::-webkit-scrollbar-button:vertical:increment {
background-image: url("下方箭頭圖片網址") ;
background-repeat: no-repeat;
}


/* 捲軸拉的軸軌的顏色 */

::-webkit-scrollbar-thumb{
background-color:#006cd8; ←色碼請自行修改
}

/* 捲軸拉的垂直軸軌設成圓角及顏色 */
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color:#006cd8; ←色碼請自行修改
-webkit-border-radius: 6px; ←圓角的角度請自行修改
}


/* 捲軸拉的橫向軸軌設成圓角及顏色 */
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color:#006cd8; ←色碼請自行修改
-webkit-border-radius: 3px; ←圓角的角度請自行修改
}


/*滾動軸上下左右的最上端角*/
::-webkit-scrollbar-corner{
background-color: #79b5dd; ←色碼請自行修改
}


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

閱讀更多

"你是獵人還是獵物？"

 Related Posts Plugin for WordPress, Blogger...