css作品集

回到頂部實現

   <!--5-->
  <div id="topAnchor"></div>
  <a href="#topAnchor">錨點回到頂部</a>

 var test = document.getElementById('test');
  test.onclick = function(){
    target.scrollIntoView(); //  1
    scrollTo(0,0); // 2
    var top = document.body.scrollTop || document.documentElement.scrollTop
    scrollBy(0,-top); // 3
    document.body.scrollTop = document.documentElement.scrollTop = 0; // 4
  }

垂直和居中

 /*絕對定位的左右居中*/
  boxCenter3{
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
  }

  /*浮動元素的上下左右居中*/
  .boxCenter2{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    float: left;
    margin: -50px 0 0 -100px;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  /*如何居中一個浮動元素？*/
  .boxCenter1{
    border: 1px solid red;
    height: 50px;
    width: 80px;
    margin: 0 auto;
  }

  /*用純CSS創建一個三角形icon的原理*/
  .sjx{
    width:0;
    height:0;
    border-top: 4px solid transparent;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #ff0000;
  }

浮動佈局

 /*一個滿屏品字佈局如何設計考點：浮動佈局*/
  *{
    margin: 0;
    padding: 0;
  }

  html,body{
    height: 100%;/*此設置非常關鍵，因爲默認的body，HTML高度爲0，所以後面設置的div的高度無法用百分比顯示*/
  }

  .header{
    height:50%; /*此步結合html,body高度爲100%，解決元素相對窗口的定位問題*/
    width: 50%;
    background: #ccc;
    margin:0 auto;
  }

  .main{
    width: 100%;
    height: 50%;
    background: #ddd;
  }
  .main .left,.main .right{
    float: left;/*採用float方式，對元素進行左右定位*/
    width:50%;/*此步解決元素相對窗口的定位問題*/
    height:100%;/*此步解決元素相對窗口的定位問題*/
    background: yellow;
  }
  .main .right{
    background: green;
  }