W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { margin-bottom: 15px; padding: 4px 12px; } .danger { background-color: #ffffcc; border-left: 6px solid #ffeb3b; } .success { background-color: #ddffdd; border-left: 6px solid #04AA6D; } .info { background-color: #e7f3fe; border-left: 6px solid #2196F3; } .warning { background-color: #ffdddd; border-left: 6px solid #f44336; } </style> </head> <body> <h1>便签</h1> <div class="danger"> <p><strong>危险！</strong>一些文本...</p> </div> <div class="success"> <p><strong>成功！</strong>一些文本...</p> </div> <div class="info"> <p><strong>信息！</strong>一些文本...</p> </div> <div class="warning"> <p><strong>警告！</strong>一些文本...</p> </div> </body> </html>