2018年7月8日 星期日

2018年3月28日 星期三

Bootstrap 中使 Footer 在最底下

          沒有留言 
<footer class="panel-footer">
    <div class="container">
       Testing 123
    </div>
</footer>


html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}


------------------------ 第二種方法
轉自 使用Flexbox實現footer置底

body {
    /*首先宣告我們要使用flex佈局*/
    display: flex;
    /*讓我們的flex佈局，由上到下排列*/
    flex-direction: column;
    /*高度設定為 可大於但不可小於 整個瀏覽器可視範圍*/
    min-height: 100vh;
}

.container {
    /*設置flex-grow: 1，讓它能夠彈性伸展*/
    flex-grow: 1
    /*以下兩種方式也可以達到一樣效果，flex是三種屬性的縮寫*/
    /*flex: 1等於 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;*/
    /*flex: auto等於 flex-grow: 1; flex-shrink: 1; flex-basis: auto;*/
    /*flex: 1; */
    /*flex: auto;*/
}


@media only screen and (max-width: 600px) {
    .container {
        flex-grow: 0;
    }
}


Share:
Read More

2018年1月1日 星期一

SEO學習

          沒有留言
PageRank：利用反向連結的數量與質量計算網頁排名的技術。
HTML標記方式會影響PageRank。
查詢PageRank網站： http://pagerank.bookstudio.com/

頁尾連結：在頁尾植入網站相關資訊的文字連結。
雖然google討厭，但不會讓seo的效果打折。

nofollow可指定給下列的連結：
1.不具公信力的內容：貼在留言欄裡的連結
2.付費連結：廣告連結
3.網路爬蟲的優先順序

1.沒有META關鍵字也沒有關係，已失去意義。
2.以複合關鍵字作為長期戰略。
3.以能提供使用者適當資訊的關鍵字製作連結。
若連結關鍵字與連結頁面的<h1>是同一個關鍵字，搜尋引擎就會認為該連結是具有公信力的重要連結。
4.設定圖片的alt,title。title(圖片標題), alt(說明文字)
5.QDF：滿足使用者搜尋，提供新聞這類最新的資訊。
6.QDD：提供多元資訊。
7.Googlec會調降文字沙拉的網站排名，並讓後面的連結無效。

「新型搜尋引擎-蜂鳥演算法」
蜂鳥是一種google從早期就持續研究，可利用口語搜尋的會話型搜尋演算法。
根據google說法，蜂鳥將對90%的搜尋結果造成影響。從結論而言，刻意施行的SEO策略將完全無效。
舉例來說：若以「日本最高的山是哪座山」搜尋，會搜尋出富士山。

「熊貓演算法」
讓劣質內容排名下滑，讓優質內容排名提升。

「企鵝演算法」
讓自導自演、付費的連結排名下滑。

好文推薦：
網頁SEO優化入門，看這一篇就夠了
https://transbiz.com.tw/seo-guide/






Share:
Read More

2017年12月31日 星期日

2017年12月7日 星期四

在html使用類似background-size的效果

          沒有留言
http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

.box { width: 160px; height: 160px; margin: 10px 0 20px; background-color: #beceeb; overflow: hidden; resize: both; }
.box > img {width: 100%; height: 100%; background-color: #cd0000;}
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
Share:
Read More

2017年12月4日 星期一

梯形

          沒有留言
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="trapezoid">
  </div>
</body>
</html>


.trapezoid{
   background-image: url(../image/bg.jpg);
   color: white;
    width: 0;
    border-left: 1600px solid transparent;
    border-bottom: 50px solid white;
}


Share:
Read More

2017年12月3日 星期日

Copyright © 米煎的學習筆記 Mi-Jian's Note | Powered by Blogger
Design by ShapedTheme | Blogger Theme by NewBloggerThemes.com