使用默認代碼的HTML類

我在網頁上做了一些格式化，我想知道是否可以將一段html代碼保存爲一個類並重用它。使用默認代碼的HTML類

例如：

我想改變這一點 -

<div> 
    <hr> 
    <p>Item 1</p> 
    <a href="oh.jpg" /> 
    <hr> 
</div> 
<div> 
    <hr> 
    <p>Apple</p> 
    <hr> 
</div>

爲了這一點 -

<div class="section"> 
    <p>Item 1</p> 
    <a href="oh.jpg" /> 
</div> 
<div class="section"> 
    <p>Apple</p> 
</div>

隨着被包含在兩個水平線內相同的最終結果。

有沒有一種方法可以製作一個不僅僅是樣式而且包含HTML代碼的類？

來源

2016-01-17 Neon Wizard

如果不在客戶端使用腳本或更改服務器端的HTML輸出（取決於平臺輸出HTML代碼（如果其爲靜態文件，PHP或其他），則不可能）。 CSS的目標不是修改DOM，而是爲現有節點添加人體工程學屬性。插入新元素或通過腳本修改現有元素。眼睛無法區分HR元素和CSS。在你的例子中，達到理想結果的最簡單方法就是在拉菲的回答中提到的CSS。 – mch

最接近的東西你描述是CSS pseudo-elements :before and :after。您不能插入HTML，但可以插入文本或圖像，或使用content:"";display:block;的簡單矩形。有了一些創造力，你可以使用CSS來取消a lot of effects。

因此，儘管你不能插入實際<hr>與CSS，你可以僞元素繪製一個與任何款式請您：

.section:before { 
    content: ""; 
    display: block; 
    height: 2px; 
    border: 1px inset #000; 
    border-width:1px 1px 0 0; 
} 
.section:after { 
    content: ""; 
    display: block; 
    height: 2px; 
    border: 1px inset #000; 
    border-width:1px 1px 0 0; 
}

如果您確實需要添加HTML，您可以使用JavaScript找到類.section的所有元素並追加子元素。

來源

2016-01-17 09:27:25 Rafi

您可以使用CSS

.section{ 
    width : 100%; 
    border-bottom: 2px solid #ccc; 
    margin-top : 5px; 
}

來源

2016-01-17 05:12:42

我知道CSS做同樣的事情，但我希望能夠使用預設的HTML代碼。 –

使用默認代碼的HTML類

回答

相關問題