readthedocs.org中的特殊「注」框是如何製作的？

我在想如何製作readthedocs.org中的特殊文本框。readthedocs.org中的特殊「注」框是如何製作的？

比如在：

我覺得還有比扭捏css文件得多了，我真的想創建一個我自己。

在此先感謝！

編輯：我知道總體框來自note指令。但是，我的問題是：他們怎麼做這個「！」標記？我無法找到css文件中的線索。

來源

2016-04-13 zack

這是爲什麼標籤的Python？ – SiHa

@SiHa，渲染引擎是用python編寫的。我認爲這可能與渲染引擎有關，你可以在這裏瞭解更多關於它的信息（http://www.sphinx-doc.org/en/stable/） – zack

你知道它是用獅身人面像製作的文檔工具，你可以看到[github上的那個頁面的源代碼]（https://github.com/divio/django-filer/blob/1.0.0/docs/index.rst）？它只是用'note'指令'.. note :: ... from ...'升級而成的。正如在頁腳中提到的，他們也有一個定製的CSS。 –

這是一個FontAwesome icon

div { 
 
    background-color: skyblue; 
 
    padding: 3px 10px; 
 
} 
 
.fa-exclamation-circle { 
 
    color: white; 
 
} 
 
span { 
 
    color: white; 
 
    margin-left: 6px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div> 
 
    <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 
 
    <span>Note</span> 
 
</div>

來源

2016-04-13 08:24:29 Pugazh

似乎他們也實現'：before：'指令，每次使用'note'指令時，感嘆號都可以放在文本的前面？但是，我不確定這是否屬實。或者它可以在純粹的CSS中實現？謝謝！ – zack

readthedocs.org中的特殊「注」框是如何製作的？

回答

相關問題