2016年11月30日 星期三

php generate qr code

Ref :  http://phpqrcode.sourceforge.net/examples/index.php?example=006
張貼者： 於 沒有留言:

2016年11月28日 星期一

bootstrap 3.0 visible



Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.
Extra small devicesPhones (<768px)Small devicesTablets (≥768px)Medium devicesDesktops (≥992px)Large devicesDesktops (≥1200px)
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible


就是在 <br> 下 hidden-sm
比如說 hidden-xs 放在<br> 那麼就只有 sm 以上的裝置才會斷行




張貼者： 於 沒有留言:

即時客服

https://www.zopim.com/?utm_campaign=Iref&utm_source=class.minwt.com&utm_medium=widget&utm_term=new-widget&utm_content=3LBiQjS2c9pArcjH3IFSrITxX6nS9Vb2&iref=3LBiQjS2c9pArcjH3IFSrITxX6nS9Vb2&lang=zh_TW
張貼者： 於 沒有留言:

2016年11月27日 星期日

css 選取器

.new2 > * > h2{}
張貼者： 於 沒有留言:

mobile first layout



html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="css/default-mobile.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="wrap">
        <ul class="news">
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
            <li>
                <h2>大標題</h2>
                <p class="news_content">「形分小重個動樣；時好量東，重有未用在有總心樂弟門軍物生也本安人們評保飯資……益同構經！院的類過知這大什，標沒使空會，或像物裡是一無，意動國山一親但！你精得化亮個最我不高也價率會大導火樹之麼變因不的朋。備卻年起大名頭很計著質現？常它特這獎紙過魚晚排為；會了拿病主時驚界，學創改家！走聽點這師我。醫運住；大廣間有發校月呢的有雖長背少半的接兒習通都的親家四知統業夠歌我體代來此辦，們們的因羅玩性有的用者國球稱而生無北上被灣童上，個外讓年不體。</p>
            </li>
        </ul>
    </div>
   
</body>
</html>


===========================================================


// 先以手機的版型出發

.wrap {
padding-top: 20px;
margin: 0 auto;
line-height: 1.5;
}

@media (min-width:960px){
.wrap{
max-width: 960px    //  限制最大的大小為960px
}
}
.news h2 {
color: #000000;
padding: .3em 0;
font-size: 20px
}
.news li {
width: 98%;   // 呈現單欄式
margin-right: 1%;
margin-left: 1%;
}

//   如果大於  768 px 就成立
@media (min-width: 768px) {
.news li {
width: 48%;   // 呈現雙欄式
float: left;
margin-bottom: 1em;
}
}
@media(min-width:960px){
.news li{
width: 31.33333%;   // 呈現三欄式
}
}




張貼者： 於 沒有留言:

響應式網頁的測試工具

Ref :  http://mediaqueri.es/



張貼者： 於 沒有留言:

2016年11月26日 星期六

seo 必讀資料

google seo document

http://static.googleusercontent.com/media/www.google.com/en//insidesearch/howsearchworks/assets/searchqualityevaluatorguidelines.pdf


https://www.quicksprout.com/2014/11/21/how-to-structure-a-perfect-seo-optimized-page/


search Engine 能見度
https://majestic.com/https://majestic.com/

https://www.similarweb.com

https://www.woorank.com/en/www/instantstamp.com


schema.org

http://schema.org/docs/schemas.html

schema 的範例

http://codepen.io/liao/pen/waaamx

測試工具

https://search.google.com/structured-data/testing-tool/










張貼者： 於 沒有留言:

2016年11月25日 星期五

SSL

Ref :  https://sofree.cc/cloudflare-free-ssl/

先處理 Title 的規則和 sitemap 最後再來處理 SSL
張貼者： 於 沒有留言:

seo 優化



1.  title 很重要

   內頁要    小分類  -> 中分類  -> 大分類  ->  公司名


    主頁  -> 公司名擺前面
張貼者： 於 沒有留言:

google 機器人check

Ref :  http://www.ithome.com.tw/news/92757

Ref : https://www.google.com/recaptcha/intro/index.html



張貼者： 於 沒有留言:

2016年11月23日 星期三

六角學院的前端工程師學習清單



Ref :  https://quip.com/D59vAxcgG8Qc
張貼者： 於 沒有留言:

2016年11月22日 星期二

jquery resizeable

Ref :https://jqueryui.com/resizable/





<!doctype html>







<html lang="en">







<head>







  <meta charset="utf-8">







  <meta name="viewport" content="width=device-width, initial-scale=1">







  <title>jQuery UI Resizable - Default functionality</title>







  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">







  <link rel="stylesheet" href="/resources/demos/style.css">







  <style>







  #resizable { width: 150px; height: 150px; padding: 0.5em; }







  #resizable h3 { text-align: center; margin: 0; }







  </style>







  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>







  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>







  <script>







  $( function() {







    $( "#resizable" ).resizable();







  } );







  </script>







</head>







<body>







 







<div id="resizable" class="ui-widget-content">







  <h3 class="ui-widget-header">Resizable</h3>







</div>







 







 







</body>







</html>




張貼者： 於 沒有留言:
標籤：

javascript 的一些研究

Ref :  http://stackoverflow.com/questions/15339991/jquery-change-image-height-keep-aspect-ratio

$(window).load(function() {

    $('.thumbnail img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height < minHeight){
            ratio = minHeight / height; // get ratio for scaling image
            $(this).css("height", minHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });
});

$(window).load(function() {
    $('.image-gallery-item-image-link img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height < minHeight){
            ratio = minHeight / height; // get ratio for scaling image
            $(this).css("height", minHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
        }

        var $img = $(this),
        css = {
            position: 'absolute',
            marginLeft: '-' + ( parseInt( $img.css('width') ) / 2 ) + 'px',
            left: '50%',
            top: '50%',
            marginTop: '-' + ( parseInt( $img.css('height') ) / 2 ) + 'px'
        };

        $img.css( css );
   });
});




張貼者： 於 1 則留言:
訂閱： 文章 (Atom)