在目前互聯(lián)網(wǎng)的大環(huán)境下,有那么點(diǎn)“全民前端”的意識(shí)印蔬,iOS最終走向了低谷(對(duì)難求一面的我來(lái)說(shuō)),所以我這里記錄一些這周學(xué)的理解了的一些技巧來(lái)讓以后的前端開(kāi)發(fā)更有體會(huì)
1.“版心”設(shè)置脱衙。如果有一個(gè)樣式要居中(水平居中)展示的話
<div class="home">
<div class="inner_c">
</div>
</div>
.inner_c{
margin:0 auto;
}
如果是垂直居中侥猬,那么可以設(shè)置一下Line-height為該“盒子”的height
2.“隔墻”操作,是針對(duì)如果上述“盒子”有進(jìn)行浮動(dòng)操作捐韩,而后面的模塊不想受到其影響的設(shè)置
<div class="cl">
</div>
.cl{
clear:both;
}
3.在CSS樣式里展示背景圖陵究,有時(shí)候出于內(nèi)存考慮,還有其他優(yōu)化方便的考慮的一種做法,方法如下:
<div class="title">
<h3>專場(chǎng)招聘</h3>
<a href="#" class="more">
MORE
</a>
</div>
這里MORE就是要設(shè)置圖片的,參考CSS的設(shè)置如下:
.more{
/*特殊方法設(shè)置圖片*/
background: url(../img/more2.png);
/*依賴縮進(jìn)去掉文字*/
text-indent: 9999em;
}
如果尺寸過(guò)大的話奥帘,可以設(shè)置一下background的no-repeat哦铜邮,不然會(huì)一直重復(fù)設(shè)置該圖片的
4.“子絕父相“定位設(shè)置,是面對(duì)如圖的情況
我把more+這個(gè)圖片放在專場(chǎng)招聘的右邊,怎么做到的呢?
.content .inner_c .info .boyajobs .title{
position: relative;
}
.content .inner_c .info .boyajobs .title .more{
/*設(shè)置定位*/
position: absolute;
top: 39px;
left: 218px;
}
這里只放置了主要代碼寨蹋,目的就是讓這個(gè)按鈕相對(duì)父控件絕對(duì)定位松蒜,然后父控件相對(duì)定位,top和left,就相當(dāng)于是向下和向右移動(dòng)已旧,達(dá)到預(yù)期的效果秸苗,順帶一說(shuō),定位設(shè)置运褪,無(wú)視父控件的padding效果