1. 輸入框placeholder樣式 (提示文字可單獨設定字型樣式和大小)

   /* WebKit browsers */
   .login-inp::-webkit-input-placeholder {

 color: #9e9d9d;

   }
   /* Mozilla Firefox 4 to 18 */

   .login-inp:-moz-placeholder {

color: #9e9d9d;

   }
   /* Mozilla Firefox 19+ */
   .login-inp::-moz-placeholder {

color: #9e9d9d;

   }
   /* Internet Explorer 10+ */

   .login-inp:-ms-input-placeholder {

color: #9e9d9d;

   }

2.頭部樣式

 
  1).<header class="top-bar">

<a href="#" class="arrow-l"></a>
<span>xxxxx釋出會</span>
<a href="#" class="arrow-r-2"></a>

     </header>
     樣式：
     .top-bar{

width: 100%; height: 45px; background: url(../images/top-bar.jpg) no-repeat; background-size: cover; text-align: center; /*z-index: 10;*/

     }
     .top-bar .arrow-l{ 

display: inline-block; 
height: 45px; 
width: 34px; 
position: absolute; 
left: 0; 
top: 0; 
background: url(../images/arrow-l.png) no-repeat center center; 
background-size: 25px; 

      }
      .top-bar .arrow-r-2{ 

display: inline-block; 
height: 45px; 
width: 40px; 
position: absolute; 
right: 0; 
top: 0; 
background: url(../images/arrow-r-2.png) center 50% no-repeat; 
background-size: 16px; 

      }
  2).<header class="top-bar">

<a href="#" class="arrow-l"></a>
<span class="p-txt">Funny</span>
<span class="link-ico">
  <a href="#" class="ico-1"></a>
  <a href="#" class="ico-2"></a>
  <a href="#" class="ico-3"></a>
</span>

     </header>
     樣式：
     .top-bar .link-ico {

position: absolute;
top:0;
right: 0;
height: 45px;
width: auto;

     }
     .link-ico a:last-child {

margin-right: 8px;
background: url(../images/g4-my.png) no-repeat;
background-size: 20px;

     }
     .top-bar .link-ico a {

display: inline-block;
width: 34px;
height: 45px;

     }
     .link-ico a.ico-1{

background: url(../images/ping-ico.png) center center no-repeat;
background-size: 20px;

     }
     .link-ico a.ico-2{

background: url(../images/cart-ico-2.png) center center no-repeat;
background-size: 34px;

     }
     .link-ico a.ico-3{

background: url(../images/share-ico.png) center center no-repeat;
background-size: 34px;

     }

3.底部選單

    <footer class="ft-index">

<ul class="ui-titled">

<li><a href="#"><span>主題</span></a></li>

<li class="on"><a href="#"><span>品牌</span></a></li>

<li><a href=""><span>DIY</span></a></li>

<li><a href=""><span>七家群</span></a></li>

<li><a href=""><span>搭配</span></a></li>

              </ul>
    </footer>

    樣式：
    .ft-index{

position: fixed;
bottom: -1px;
left: 0;
width: 100%;
z-index: 100;

    }
    .ui-titled{

position: relative;
display: -webkit-box;
background: rgba(0,0,0,0.6);
box-shadow: 0 -3px 7px rgba(148, 141, 141, 0.6);

    }
    .ui-titled li {

-webkit-box-flex: 1;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;

    }
    .ui-titled li a{

display: block;
position: relative;
color: #fff;
font-size: 1.6rem;
padding: 8px 0 9px;

    }
    .ui-titled li.on a:after{

z-index: 100;
position: absolute;
top: -16px;
left: 50%;
margin-left: -11px;
display: block;
content: '';
width: 22px;
height: 20px;
background: url(../images/bottom-icon.png) no-repeat;
background-size: 22px;

    }
    .ui-titled li span{

display: inline-block;
width: 100%;
line-height: 18px;
border-right: 1px solid #868686;

    }
    .ui-titled li:last-child span{

border-right: none;

    }

4.橫向滑動分類

    <div class="classify txt-center">

  <a href="" class="on"><span>床品</span></a>
  <a href=""><span>抱枕</span></a>
  <a href=""><span>窗簾</span></a>
  <a href=""><span>抱枕</span></a>
  <a href=""><span>窗簾</span></a>

    </div>


  樣式：
  .classify {

width: 100%;
overflow-x: auto;
background: #eb603c;
white-space: nowrap;
margin-bottom: 6px;

  }
  .txt-center{

text-align: center;

  }
  .classify a {

display: inline-block;
padding: 11px 0px;
line-height: 17px;
font-size: 1.5rem;
color: #fff;

  }
  .classify a span{

position: relative;
display: inline-block;
padding: 0 15px;
border-right: 1px solid #ff7e5b;
z-index: 100;
zoom: 1;

  }
  .classify a:last-child span{

 border-right: none;

  }
  .classify.txt-center a,.classify.txt-left a{

position: relative;

  }
  .classify.txt-center a.on:before,.classify.txt-left a.on:before{

position: absolute;
width: 74%;
left: 50%;
top: 7px;
margin-left: -37%;
display: block;
content: '';
height: 26px;
background: #c93d18;
border-radius: 4px; 
z-index: 0; 

  }