標題右側(cè)“更多”的實現(xiàn)



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

譬如html代碼如下：

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

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

h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px 0 0 0;
height:20px;
}
其實只是利用了margin-top 的負數(shù)來實現(xiàn),因為默認的float會換行到h2標簽下面去，所以讓它自個跳上去。大致代碼就是如此了,是不是很簡單?我說很簡單嘛！由于很簡單,所以就不放出單獨的測試頁面了.

ps:我說咱們啥時候也得搞個和藍色理想一樣的編輯器吧…

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

以前部門的同事們，每個人都有一套書寫的規(guī)范，導(dǎo)致看對方的css代碼非常吃力，所以就推行了一套書寫標準 ，或許對您也有幫助。


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

/*盒模型*/
margin
padding
width
height

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

/*文字*/
color
font
content

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

最新評論