是我的HTML和CSS橫幅的最佳做法？

-1

你可以看看我的html和css代碼嗎？我認爲我的橫幅看起來很棒，並且我會在其他橫幅的模板中使用它。只是想確保我的代碼使用「最佳實踐」。讓我知道你是否會改變任何事情。是我的HTML和CSS橫幅的最佳做法？

這裏是我的jsfiddle：http://jsfiddle.net/huskydawgs/tKn9f/100/

<div class="box-promo-row"> 
     <h3> 
      Top 10 Wi-Fi Routers</h3> 
     <p> 
      A Wi-Fi router is at the center of most people's home networks, but not every router is a good one. It's been a while since we last looked at the best Wi-Fi routers on the market, this week we want to take a fresh look and build a better top five list.</p> 
    </div> 

#wrapper-industry,#wrapper-landing { 
width: 916px; 
margin: 0 auto 50px auto; 
padding: 0; 
} 

#wrapper-landing .box-promo-row p { 
color: #616161; 
font-size: 1.2em; 
margin: 0; 
padding: 0; 
font-family: Arial,sans-serif; 
} 

.box-promo-row { 
    position:relative; 
    width:873px; 
    margin: 0; 
    padding: 30px 20px 20px 20px; 
    border-left: 1px solid #e2e3e4; 
    border-right: 1px solid #e2e3e4; 
    border-bottom: 1px solid #e2e3e4; 
    background-color: #e2e3e4; 
} 

.box-promo-row:before { 
    position: absolute; 
    content: " "; 
    width: 100%; 
    height: 10px; 
    background: #f66511; 
    left: -1px; 
    top: 0; 
    z-index: 20px; 
    border: 1px solid #f66511; 
} 

    .box-promo-row h3 { 
    font-family:Arial; 
    font-size:1.3em; 
    color:#2251a4; 
    margin:0 0 2px 0; 
}

來源

2014-03-06 user3075987

我會讓確定我選擇的元素存在 – Cilan

這很好。但爲什麼使用僞元素來完成這個簡單的工作？我想這是你的[問題]（http://stackoverflow.com/questions/22234269/how-to-i--get-orange-bar-on-the-top-of-my-banner-instead-of-on -the-pag/22234417＃22234417）對不對？我確實建議你可以使用border-top來達到相同的結果。那有什麼問題嗎？ –

如果你沒有得到你想要的反饋，請嘗試[CodeReview]（http://codereview.stackexchange.com/）;這可能是一個更好的地方，因爲你沒有這個代碼的問題。 – admdrew

-5

很難說究竟是什麼「最佳實踐」，這一切都取決於你贏了已經在使用哪些資源。（twitter bootstrap等）。我的意思是，如果你有你已經使用的工具，最好不要重新發明輪子。

這就是說，我會說你對我看起來很好。如果它適用於你在做什麼，那麼它應該沒問題。

來源

2014-03-06 22:50:35 Snappawapa

我認爲這不是一個真正的答案，因爲它沒有提供任何具體的反饋。 – admdrew

以及有多少答案可以存在？「最佳實踐」實際上是一個模糊的話題，有很多方法可以做任何事情，每個人都有自己的觀點 – Snappawapa

同意，這就是爲什麼我在上面的評論中建議，這將更適合CodeReview。也就是說，把你的答案與其他人的答案進行對比;他們都提到了一些具體的東西，你的沒有。 – admdrew

.box-promo-row:before具有20像素的z索引。 Z索引決定了元素的分層優先級，而不是某種長度。例如，一個元素上的z-index爲1會導致它被分層到任何其他沒有設置z-index的元素之上，或者被設置爲0或負數。請記住，z-index僅適用於使用固定，相對或絕對位置的元素。

除此之外，它看起來很好。您可以考慮HTML5中使用的語義HTML標記，例如<section>和<header>，但由於您只提供了頁面的一小部分，所以我無法確定應該在哪裏使用這些標記，或者其他人作爲<nav>。儘管如此，<footer>是一個非常明顯的例子。

在this page上列出了幾個HTML5語義標記（以及之前存在的其他標記）。將它們用作導航輔助工具並協助抓取工具識別頁面的重要部分是個不錯的主意。

來源

2014-03-06 23:00:57 Hiigaran

沒有理由使用僞元素在元素上設置邊框，因爲簡單的邊框將與少量多餘的CSS完全相同。

此外，在像這樣的東西上準確設置像素寬度通常不是一個好主意，因爲設備尺寸可能會有很大差異，特別是如果您還支持在一臺設備上可能具有2種明顯不同尺寸的平板電腦和手機在方向上。使用百分比寬度通常優選在可能的情況，例如： width: -webkit-calc(95% - 40px); width:calc(95% - 40px); left: 2.5%;

This示出了非固定的寬度和沒有用於所述僞元件的額外CSS相同的總體外觀。

來源

2014-03-06 23:01:37 Trezoid

雖然邊框看起來很有趣 – user3075987

我的兩分錢：

我不會使用基於像素單位，或許EMS或百分比，因爲它們將意味着，如果你想要一個更大或更小的一個也仍然規模相同的基礎上的字體大小（ ems），這對小型設備也是有益的。

我沒有看到psuedo元素（：before和content：「」）的需要，因爲用11px的頂部邊框可以實現同樣的事情，假設您刪除了其他邊框，它們是相同的顏色作爲背景，所以個人看不到他們的需要。這也意味着你可以擺脫位置：相對，這意味着如果你想要菜單或類似的東西越過橫幅的頂部，你將不需要擔心z索引

來源

2014-03-06 23:06:12 OJay

如果我的其他邊框的顏色是不同的顏色，那麼它看起來很有趣。 – user3075987

是我的HTML和CSS橫幅的最佳做法？

回答

相關問題