滑開感覺動作css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<style>
.header ul li {
    display: inline;
}
.header ul a {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 30px;
    -webkit-transition: color .25s ease-in-out, width .25s ease-in-out;
    -moz-transition: color .25s ease-in-out, width .25s ease-in-out;
    -ms-transition: color .25s ease-in-out, width .25s ease-in-out;
    -o-transition: color .25s ease-in-out, width .25s ease-in-out;
    transition: color .25s ease-in-out, width .25s ease-in-out;
}
.header ul a.active, .header ul a:hover {
    width: 150px;
}
.header .fa{ width:30px;}
</style>

html 部分

<div class="header">
<ul>
<li><a href="#"><i class="fa fa-anchor"></i><span>投資組合</span></a></li>
<li><a href="#"><i class="fa fa-bell-o"></i><span>下午7時26分</span></a></li>
<li><a href="#"><i class="fa fa-taxi"></i><span>日出</span></a></li>
<li><a href="#"><i class="fa fa-cogs"></i><span>背景</span></a></li>
</ul>
</div>

示意圖

css 分享標籤

Follow us

• Twitter
• Facebook
• Google+
• Dribbble
• RSS

html

<ul class="redirect-socials">
<li><a class="twitter" href="#"><span>Twitter</span></a></li>
<li><a class="facebook" href="#"><span>Facebook</span></a></li>
<li><a class="google" href="#"><span>Google+</span></a></li>
<li><a class="dribbble" href="#"><span>Dribbble</span></a></li>
<li><a class="rss" href="#"><span>RSS</span></a></li>
</ul>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}
 p {
    margin: 1em 0;
    line-height: 1.4;
    font-family: "Merriweather", georgia, serif;
}
.redirect-socials li {
    display: inline-block;
    margin-right: .4em;
    margin-bottom: .6em;
}
.redirect-socials a {
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-block;
    padding: .8em 1.2em 1em;
    position: relative;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
text-decoration:none;
}
.redirect-socials .twitter {
    color: #50abf1;
    box-shadow: inset 0 -2px 0 #50abf1;
}
.redirect-socials .facebook {
    color: #3b599a;
    box-shadow: inset 0 -2px 0 #3b599a;
}
.redirect-socials .google {
    color: #df4a32;
    box-shadow: inset 0 -2px 0 #df4a32;
}
.redirect-socials .dribbble {
    color: #ec4989;
    box-shadow: inset 0 -2px 0 #ec4989;
}
.redirect-socials .rss {
    color: #e77b39;
    box-shadow: inset 0 -2px 0 #e77b39;
}
.redirect-socials a:hover {
    color: #fff; text-decoration:none;
}
.redirect-socials a span {
    position: relative;
    z-index: 5;
}
.redirect-socials a::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: inline-block;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;

}
.redirect-socials .twitter::before {
    background: #50abf1;
}
.redirect-socials .facebook::before {
    background: #3b599a;
}
.redirect-socials .google::before {
    background: #df4a32;
}
.redirect-socials .dribbble::before {
    background: #ec4989;
}
.redirect-socials .rss::before {
    background: #e77b39;
}
.redirect-socials a:hover::before {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);

}

工作筆記

(1)fckeditor 要換新的
(2)換頁程式太舊要更新
(3) FB DEBUG的地方,可以抓取
https://developers.facebook.com/tools/debug/

Bootstrap 小螢幕時選單從左/右側彈出

bootstrap navbar on mobile offnavas

http://stackoverflow.com/questions/20863288/bootstrap-3-slide-in-menu-navbar-on-mobile

這個網站可能已遭入侵,但是安全性問題卻空白，導致無法送出審查

1. 可能剛剛才申請search console權限,還沒找到入侵的問題

2. 可能被放在blocklist 裡面,到下列網址查詢
https://sitecheck.sucuri.net/results/OOO.com.tw  (不用輸入wwww)
http://aw-snap.info/file-viewer/ (掃描蠕蟲惡意程式)

3. 已經移除,但是GOOGLE還沒重新抓取你的網站

4. 到GOOGLE模擬器,再提交一次有問題的頁面

參考資料

This site may be hacked - but nothing in security issues

Google result “this site may be hacked” unable to request site review from Webmaster Tools

https://productforums.google.com/forum/#!msg/webmasters/jrYDYP5sBF4/OUrF14wK0tAJ

"This site may be hacked" but no Security Issues in Webmaster Tools

汪培珽：失戀肯找你哭 就是最棒的父母(轉載親子天下 – 2015年5月5日 下午3:14)

親子天下 – 2015年5月5日 下午3:14

相關內容

• 汪培珽：失戀肯找你哭 就是最棒的父母

作者：汪培珽

【爸媽很頭大】

「女兒告訴我她有男朋友時，我簡直驚嚇到不行，才十三歲啊！身為媽媽，我都還沒有準備好。我知道不能反對，但覺得有很多事還沒講清楚。她不願意談、也不願意聽，一副『你要講的我都知道』的樣子。

邀男友來家裡玩，我很尷尬，除了聊聊天，我只好躲進廚房，出來前還得大聲通知，以免看到我不想看到的畫面……」

「兒子個性比較多愁善感，我覺得交女朋友一定會讓他分心、影響功課，基本上我是反對的，尤其國三那年，發現他喜歡隔壁班女生時，我和他媽媽都很擔心，為了避免他受傷害，凡有那女生出現的場合（同學一起看電影啦、去圖書館念書等），我們都不讓他去。填志願時，凡是這女生可能填的學校也一概不讓他填，就希望他能順利念到好大學再說……」

「女兒三不五時會把我從她臉書封鎖，有一次竟興沖沖跑來叫我要按讚，我上網一看，差點沒昏倒！她換了一張大頭貼，竟然是和男友親親的自拍照！我當場腦袋一片空白，只能強裝平靜表示：『你們一定有更好的合照吧？』她說：『大家都說好可愛，已經九十九人按讚了！』可是，那個讚我真的按不下去呀！」

「我請週末要約會的女兒，早一點回家，說：『慢慢來，愛情才會長長久久。』她回說：『現在感覺好就要在一起，搞不好下個月感覺就沒了。』真的嗎？現在都流行談這麼短的戀愛嗎？」

【專家來解惑】

多大的孩子可以談戀愛？除非，父母要二十四小時嚴格監控孩子，不然，這不是你可以決定的事。
每個孩子的個性和興趣不同。有些孩子就是比較早熟，對異性很早就展現興趣；但有些就是對異性興趣缺缺。興趣缺缺？不對，不對。沒有早早就「動作頻頻」的孩子，不代表他們興趣缺缺。應該這樣說，當第二性癥出現後，人就會自然而然的對異性產生興趣，情況只在於，孩子有沒有環境可以展開進一步的行動？
我的孩子，天生就是早早對異性有興趣的那一種。十二歲，就開始對於男女朋友的事問東問西，試探意味甚濃。最後索性問我：「幾歲可以交男朋友？」我沒給答案，只說現在太早。拒絕孩子也需要耐心，我沒有一口否定孩子的想法，而是跟孩子聊天，順便聽聽他們的想法。

孩子提問，是想釐清自己想法

「為什麼羅密歐和茱麗葉可以？」孩子不放棄的挑戰我的拒絕。
「為什麼外國小說裡的情節，十幾歲就可以談戀愛，父母也同意？」
「為什麼不可以跟異性牽手？牽個手會怎樣？」
我從來不迴避孩子的問題，我很喜歡跟小孩一起討論大小事。即使沒有答案，小孩跟你要的是答案嗎？他們有時候只是想藉由跟你討論，釐清自己心裡的想法而已。
其實，孩子的學校也提供一年比一年「勁爆」的性教育。十五歲的孩子回家告訴我：「今天有堂課，老師提著一袋香蕉和小黃瓜進來，一男一女一組，香蕉或小黃瓜都可以，再發給我們一個保險套，然後教我們怎麼用，」小孩說得臉不紅、氣不喘，媽媽卻聽得目瞪口呆。
什麼樣的教育可以讓孩子用這麼健康的心態面對「性」這件事呢？
這樣開放的教育，真的會讓孩子冒著提早初嚐禁果的險嗎？但是，我們都是在保守性教育下長大的一群，我們後來的「境遇」又好到哪裡去了？對於性這件事，抱持避諱的態度，真是再錯誤不過的教育了。
父母常做的，就是鴕鳥最喜歡做的，以為自己看不到，就當事情沒發生。所以當有人發現青春期的女兒好像行為有異時，第一個就是檢查小孩的手機內容。如果親子是無法好好說話和溝通的，「監控」只是在延後問題，不是在解決問題。

試想：青少年不行談戀愛，大學才可以。大學談戀愛，問題就會減少嗎？對不起，在我看來，「選對象」也是件需要練習的事。孩子天生早早對異性有興趣，我一點都不打算阻止。不阻止孩子，不代表不關心孩子。就是因為父母不阻止的態度，才讓孩子遇到疑問時，第一個是回家來問你。

所以我的孩子曾經問過我：「如果有一天我回來跟你說我懷孕了，你會怎樣？」「如果做愛不會懷孕，為什麼不可以想做就做？」（呵呵，驚嚇中）
所以當我跟孩子聊這些跟「性」有關的事，絕不會用「會染病」、「會懷孕」、「會被對方告」……這些理由「嚇」孩子。現在網路資訊發達到了什麼鬼地步，你還在嚇孩子，真是太瞧不起這一代孩子的「知識程度」了。

和孩子正面討論性愛的責任

我都是從「心」出發，直接跟孩子說「做這些事」都不會死人，但是不要讓自己受傷了──在心裡的傷，是比身體上的傷還痛的。父母愛你，你也愛你自己。每件事都要三思而行，不要傷了自己。所以如果孩子真的「大肚子」或是讓別人「大肚子」回家呢？我直接告訴孩子，我不會罵人，我會跟你們一起解決。如果你一定要將自己的人生走到這麼「險」的地步，那就是你的命。
我這麼跟孩子說：性和愛是一體的兩面。沒有愛的性，你不會感到幸福；當夜深人靜的時候，你只會剩下失落和失望。不想對任何人提起的失落和失望，對人生就是一種傷害。在你沒確定你愛對方，愛到你願意跟他共同生活一輩子之前，就別因為激情輕易踏出那一步。真的不舒服，可以洗冷水澡；常洗冷水澡，有益身體健康。
我將底線全都攤給孩子看，就是要讓他們知道：自己要對自己負責。即使親如父母，最後都無法幫你承擔。
當孩子一出了我的視線，我對他們就是全然的信任。當然我的信任不是無中生有的，那是我累積了十幾年對他們的愛和關心所換來的。
「到底幾歲可以談戀愛呢？」父母不要太緊張啊，如果你是一個時時關心孩子的父母，十三歲的孩子做出讓你「不能接受的事」的機率，其實很小的。
從孩子十二歲問我這個問題，我不給幾歲的答案，只表明我不贊成。其實我是不知道答案哪！我常常跟你聊天，我常常解答你的疑惑，然後只說太早了，就是拖延戰術的一種。談戀愛當然不需要太早，但是如果這個孩子就是「喜歡」跟異性在一起的感覺，他們自己會拿捏時間的。對於孩子幾歲要交男女朋友，雖然表面上我對孩子表明不贊成，但心裡抱持的是順其自然、樂觀其成的態度。
至於交男女朋友會不會影響功課？當然會。但是我是這麼想的，青春期的愛戀情事，就是人生的一大樂趣。
當初我自己的被剝奪，或是當初我沒膽嘗試，既然孩子有這方面的「天分」，讓他們去嘗嘗最純真的「愛」的滋味，就是我愛孩子的最大體諒。況且，將全部的時間都拿去讀書，對孩子就一定是好的嗎？我強烈懷疑。
面對青少年，怎麼樣讓他們在遇到困難和疑問時，願意來找你，才是父母最大的功課。如果孩子失戀了，願意在你面前大哭一場，你就成功了一半。上個月，我才聽到了一場大哭，給我按個讚吧。

（專家小檔案：汪培珽，親子作家，最熱愛的「職業」是媽媽，已出版10本親子暢銷書。）

test

CSS 垂直中文排版

.vertical-text {
-ms-writing-mode: tb-rl; /* old syntax. IE */
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl; /* new syntax */

-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;
float:right;
height:80px;
}

Bootstrap carousel 設定圖片時間

SCRIPT部分   參考 

<script src="dist/js/bootstrap.min.js"></script>
   <script>
  $('.carousel').carousel({
   interval: 4000
  });
 </script>



HTML部分

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
       
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="images/banner1.jpg" alt="First slide">
          </div>
          <div class="item">
            <img src="images/banner5.jpg" alt="Second slide">
          </div>
       
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

fullpage.js 可以用滾輪看完整個網站

http://alvarotrigo.com/fullPage/

下載點