移动端常用布局（一）

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