2016年12月5日 星期一

css reference

Ref :  http://cssreference.io/



張貼者： 於 沒有留言:

2016年12月4日 星期日

Q板人物 http://tw.vonvon.me/

Ref:  http://tw.vonvon.me/

張貼者： 於 沒有留言:

off canvas 的選單設計

Ref :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="css/all.css">
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/all.js"></script>
</head>
<body >
  <div class="container">

   //  給手機 看的
    <div class="aside">
      <a href="#" class="mobile-close">關閉</a>
      <ul class="menu">
        <li><a href="#">選單一</a></li>
        <li><a href="#">選單二</a></li>
        <li><a href="#">選單三</a></li>
        <li><a href="#">選單四</a></li>
       
      </ul>
    </div>

    //  給pc 看的
    <div class="main">
      <div class="header">
        <a href="#" class="mobile-link">選單連結</a>
        <ul class="menu">
          <li><a href="#">選單一</a></li>
          <li><a href="#">選單二</a></li>
          <li><a href="#">選單三</a></li>
          <li><a href="#">選單四</a></li>
        </ul>
      </div>
      <div class="content">
        <p>
          媽注程的由進局大會他社高這是後由費的不，理草內商手媽居職標。陸生無提會好氣放年平國題、的公照演了、是慢前最角態足，實生覺條教動如張新又。怕歡灣電我馬過慢歷那自，亮該何裡機其岸：自一比該斷標的人晚細後企了工高，投廣不光，事西相人者有心：地用功資一風人法一大自公理我時口不。商燈少力北們定大。房有兩新！
        </p>
        <p>
          著線部環性，們沒答民中……適友笑我得：表世化邊腳頭。沒內等中社然到的。布失排、樹重頭市：的差轉時機品裡他難該人到了：留全必員子一反。動些色，上正聞回標要時？
        </p>
        <p>
          去可子以國議到立的飛生物，便我說證回投日是細點，講孩人……名有和和其常作特。業畫府步外前，光生人有分好，裡哥文直，有成突一點是經陽容維子得安分人已的來種站一質大。他到看一這書切一雙全，領一民園是並了。息因電界樂車次卻經了男。
        </p>
      </div>
    </div>
  </div>
  </div>
</body>
</html>


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

css:


.container{
  position: relative;
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;   // 水平置中
}

.mobile-link,.mobile-close{
  background: green;
  color: #fff;
  padding: 5px;
  display: inline-block;
  margin: .3em;
  text-decoration: none;
}

//  在pc 板的時候關閉
.mobile-link{
  display:none;
}
@media(max-width: 768px){
  .mobile-link{
    display:inline-block;
  }
}
.main{
  transition: all 0.3s;
}
.header{
  height: 50px;
  background: red;
  margin-bottom: 1em;
}
.header .menu {
  float: right;
}
.open .header .menu{
  display: none;
}
.content {
  padding: 1em;
}
.content p{
  margin-bottom: 1em;
}
@media(max-width:767px){
  .header .menu{
    display: none;
  }
}
.header .menu li{
  float: left;
}
.header .menu li a{
  color: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 1em;
  display: block;
  transition: all .8s;
}
.header .menu li a:hover{
  background: orange;
}
.aside{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 270px;
  height: 100%;
  background: yellow;
  overflow: hidden;
  -webkit-transform: translateX(-270px);
  transform: translateX(-270px); // 移出畫面外....
  transition: all .3s;
}
/*增加 class open 觸發選單*/
.open .main{
  -webkit-transform: translateX(270px);
  transform: translateX(270px); //  從畫面內移動到270x
}
.open .aside{  
  -webkit-transform: translateX(0px);
  transform: translateX(0px); //  從畫面外移到畫面內
}
.aside .menu li {
  margin: 1em;
  background: #000;
  color: #fff;
}
.aside .menu li a{
  color:#fff;
  padding: 1em;
  display: block;
}
.aside .menu li a:hover{
  background: blue;
}

=========================================================
js:


$(document).ready(function() {
  // 打開左側選單
  $('.mobile-link').click(function(event) {
    $('body').addClass('open');
  });
  // 關閉左側選單
  $('.mobile-close').click(function(event) {
    $('body').removeClass('open');
  });
});




張貼者： 於 沒有留言:

2016年12月3日 星期六

漢堡選單的範例




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/all.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/all.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <div class="logo"></div>
      <ul class="menu">
          <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>
          <li><a href="#" target="_blank">選單六</a></li>
          <li><a href="#">選單七</a></li>
      </ul>
      <a href="#" class="showmenu">menu</a>
    </div>
    <div class="content">
    <p>
      其際出後心術者，風高動；自觀民發富面大年了夜使開懷布，福大會士是全：軍傷子頭新：已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想？片始現化主反過家你與；顯理所名角車下化當影城士有：展很進全色獨水久人，式著斷給，海希手林心立軍、運取早集在港家外隊平有青，們得打形心的了以城為不即小去型，力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般，一任標綠來起，制試安一國……視對與喜名度說，你的不這修配輕！
     
    </p>
     <p>
一笑馬臺動，一越曾間持青排的爭為但道性。住出子。了這等呢組羅我；更記好。價了望要最，文上老類電來近雄好是電帶也生理不，產在各器解是西小不理再統老以的；預操和來愛月企什較大其來來下了，對師同，在成程舉我？
     
     </p>
     <p>
望樣斯溫園長，體是確所。在白管，快樹員義油方係係？操那中還一。期之加個然少去說身會草，跑比向女孩情業王多，向以不音人不個向，想加山轉時：師小級觀？發過這重同書，跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。
     
     </p>




    </div>
  </div>
</body>
</html>

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

css :

.wrap{
  // 960 的寬度
  max-width: 960px;
  margin: 0 auto;
}
.header{
  //  總共81個px
  height: 80px;
  border-bottom: 1px solid #69CA62;
  position: relative;
}
.logo{
  float: left;
  width: 50px;
  height: 50px;
  background: #69CA62;
  border: 3px solid green;
}
.menu{
  float: right;
}
.menu li{
  float: left;
}
.menu li a{
  display: block;
  color: #69CA62;
  padding: 1em;
  text-decoration: none;
}
.content{
  padding: 1em;
  line-height: 1.8;
}
.content p{
  margin-bottom: 1em;
}
/*在PC上隱藏漢堡選單*/
.showmenu{
  display: none;
}
@media (max-width: 767px){
  //  當畫面的寬度小於767px就會成立
  .menu {
    /*隱藏選單開始*/
    max-height: 0px;
    overflow: hidden;
    /*隱藏選單結束*/
   設定動畫效果
    transition: max-height 2.3s;
    margin-top: 1px;
    /*絕對定位疊在網頁上*/
    position: absolute;
    z-index: 100;
    /*header 80px+1px boder 線條*/
    top: 81px; // 從  header 正下方開始
    left: 0;   //   這樣才會寬度滿版
    right: 0;  //   這樣才會寬度滿版
    background: #0F222B;
  }
  .menu li{
    float: none;
    border-bottom: 1px dashed #69CA62;
  }
  .menu li a{
    transition: all 0.3s;
  }
  .menu li a:hover{
    background: #69CA62;
    color: #fff;
  }
  .showmenu{
    display: block;
    float: right;
    margin: 1em;
  }
  /*jQ點擊後動態在 body 加上 class */
  .menu-show .menu{
    max-height: 500px
  }
}

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

js

$(document).ready(function() {
   $('.showmenu').on('click',  function(e){
      e.preventDefault();
      $('body').toggleClass('menu-show');
  });
});







pc  版型




手機版型





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







就是header 用固定  position : fixed,  width:100%,

然後content往下推擠81px



html 和js 都和上面一樣


css :

@media (max-width: 767px){
  .header{
    position: fixed;
    width: 100%;
    background: #0f222b;
  }

    .content{
    padding-top: 81px;
  }

  .menu {

    /*隱藏選單開始*/
    max-height: 0px;
    overflow: hidden;
    /*隱藏選單結束*/
    transition: max-height 2.3s;
    margin-top: 1px;
    /*絕對定位疊在網頁上*/
    position: absolute;
    z-index: 100;
    /*header 80px+1px boder 線條*/
    top: 81px;
    left: 0;
    right: 0;
    background: #0F222B;
  }
  .menu li{
    float: none;
    border-bottom: 1px dashed #69CA62;
  }
  .menu li a{
    transition: all 0.3s;
  }
  .menu li a:hover{
    background: #69CA62;
    color: #fff;
  }
  .showmenu{
    display: block;
    float: right;
    margin: 1em;
  }
  /*jQ點擊後動態在 body 加上 class */
  .menu-show .menu{
    max-height: 500px
  }

}






張貼者： 於 沒有留言:

2016年12月1日 星期四

RWD 的範例網站

Ref:  http://mediaqueri.es/
張貼者： 於 沒有留言:

bootstrap 的一些觀念



Ref :  http://www.slideshare.net/chihchengwang3/bootstrap4

一個重點是 row 的內層一定是 col-x-xx
col-x-xx 外層一定是 row
然後另一個是 他消除了 col-x-xx 的預設 padding
注意喔，col-x-xx 外層不會是其他 div，一定是 row
row 裡面全部的 class 一定是 col-xx-xx (只有少數例外，但是用到那程度已經相當熟悉 bootstrap 了)
張貼者： 於 沒有留言:

logo sample


html5


<body>
    <div class="logo"><a href="/">公司名稱</a></div>
</body>

文字是給search engine 看的



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


.logo a{
display: block;
background-image: url(../images/earth.png);  // 萬一遇到browser 不支援svg, 還可以吃png
background-image: url(../images/earth.svg);
width: 128px;
height: 128px;
background-size: contain;

    //  把文字內容隱藏起來,  只看search engine 看到
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}

張貼者： 於 沒有留言:
訂閱： 文章 (Atom)