以上文字 - 我的代碼夠好嗎？

-1

我的代碼是否足夠顯示圖片上方的文字？它看起來類似於stackoverflow的橙色按鈕「Ask Question」，但不是一個按鈕，而不是一個鏈接。它只是一個文字，它周圍是橙色。它工作正常，但我很高興，如果代碼看起來不錯，不愚蠢。以上文字 - 我的代碼夠好嗎？

//css 
    .date 
    { 
     float : left; 
     width : 100px; 
    } 
//html 
<div class="date"> 
    <img src="orange.png"> 
    <div style="margin-top:-18px; margin-left:6px; color:#fff;">22.11.2012 
    </div> 
</div>

因此，文本正好在圖像的上方（在中心）。

來源

2012-07-10 Haradzieniec

orange.png是什麼樣的 - 爲什麼你要使用圖像而不是背景顏色。另外這對於Stackoverflow並不合適。 – prodigitalson 2012-07-10 13:43:52

好吧，除了你的'img'標籤上缺少'alt'，'width'和'height'屬性，以及你可以在你的第二個div中使用'margin'屬性的事實（'margin：-18px 0 0 6px'），它看起來在語法上是正確的......除非我忽略了某些東西。 – SenorAmor 2012-07-10 13:44:25

'background-image'似乎對我來說更合適 – 2012-07-10 13:44:48

鑑於你關心的是代碼的美感，我建議這樣做：

// css 
.date 
{ 
    float: left; 
    width: 100px; 
} 
.date div 
{ 
    margin-top: -18px; 
    margin-left: 6px; 
    color: #fff; 
} 

// html 
<div class="date"> 
    <img src="orange.png"> 
    <div>22.11.2012</div> 
</div>

如果您可以在該處工作line-height:，則可能不需要負頂部邊距，但我認爲這可能看起來更專業。內聯CSS從來就不是好事。

希望這會有幫助

來源

2012-07-10 13:50:39 Ortund

類似的東西會更好：

CSS：

.date { 
    padding: 5px; 
    background-color: orange; 
    color: #fff; 
}

HTML：

<span class="date"> 
    22.11.2012 
</span>

無論如何，你應該閱讀一些關於CSS基礎知識。例如，我做了一個快速搜索，並且可以是一個好的開始。

來源

2012-07-10 13:48:12 scumah

IMO代碼看起來相當擁擠。您可以輕鬆地做了一個錨，風格類似像這樣的按鈕：

a{ 

padding: 7px; 
background-color: orange; 
text-decoration: none; 
color: black; 
font-family: helvetica; 
} 

a:hover{ 

background: grey; 

}

Example

來源

2012-07-10 13:48:57 menislici

以上文字 - 我的代碼夠好嗎？

回答

相關問題