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;
  }