ในการสร้าง 'บันทึกย่อ' ด้วย CSS โค้ดจะเป็นดังนี้ -
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div { margin-bottom: 15px; padding: 4px 12px; font-size: 18px; } .danger { background-color: #ffdddd; border-left: 6px solid #f44336; } .success { background-color: #ddffdd; border-left: 6px solid #4CAF50; } .info { background-color: #e7f3fe; border-left: 6px solid #2196F3; } </style> </head> <body> <h1 style="text-align: center;">Notes Example</h1> <div class="danger"> <p><strong>Danger!</strong>Operation may damage your computer</p> </div> <div class="success"> <p><strong>Success!</strong> Operation has been performed successfully</p> </div> <div class="info"> <p><strong>Info!</strong> Need more resources to perform this operation</p> </div> </body> </html>
ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -