標(biāo)題右側(cè)“更多”的實(shí)現(xiàn)



曾經(jīng)做上圖所示的效果,會(huì)使用到position來(lái)相對(duì)定位到h2標(biāo)簽的右側(cè).這樣的做法,代碼確實(shí)會(huì)多好幾行. 其實(shí)可以用個(gè)笨一點(diǎn)的辦法來(lái)實(shí)現(xiàn)的：

譬如html代碼如下：

< h2>< a h ref="#" >標(biāo)題< /a> < span>更多…< /span> < /h2>
使用potsition的css差不多如下：

h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
這樣才能實(shí)現(xiàn)更多在右側(cè).其實(shí)真的還可以更簡(jiǎn)單:

h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實(shí)只是利用了margin-top 的負(fù)數(shù)來(lái)實(shí)現(xiàn),因?yàn)槟J(rèn)的float會(huì)換行到h2標(biāo)簽下面去，所以讓它自個(gè)跳上去。大致代碼就是如此了,是不是很簡(jiǎn)單?我說(shuō)很簡(jiǎn)單嘛！由于很簡(jiǎn)單,所以就不放出單獨(dú)的測(cè)試頁(yè)面了.

ps:我說(shuō)咱們啥時(shí)候也得搞個(gè)和藍(lán)色理想一樣的編輯器吧…

淘寶的css屬性順序書(shū)寫(xiě)規(guī)范

以前部門(mén)的同事們，每個(gè)人都有一套書(shū)寫(xiě)的規(guī)范，導(dǎo)致看對(duì)方的css代碼非常吃力，所以就推行了一套書(shū)寫(xiě)標(biāo)準(zhǔn) ，或許對(duì)您也有幫助。


*{
/*顯示屬性*/
display
position
float
clear
cursor
…

/*盒模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*邊框背景 為什么要把 boder和background放在最后的原因是修改的頻率會(huì)較之前的頻繁，放在最后查看起來(lái)方便，哈哈。*/
border
background
}
說(shuō)到底其實(shí)屬性的書(shū)寫(xiě)順序規(guī)范就是：神仙?妖怪? - 身材怎么樣！- 服裝類型(比基尼?棉襖?) - 服裝款式(黑色?白色?紐扣?拉鏈?) - 用了啥化妝品和發(fā)型.
這個(gè)書(shū)寫(xiě)標(biāo)準(zhǔn)小部分并不是瀏覽器廠商推行的書(shū)寫(xiě)規(guī)范，所以可能被廣大標(biāo)準(zhǔn)推廣者所不認(rèn)同 。但這些個(gè)都是弟兄幾個(gè)實(shí)踐出來(lái)認(rèn)為最符合現(xiàn)有淘寶環(huán)境的。

最新評(píng)論