Live Demo

วันนี้เอาคลาส css ที่ผมใช้อยู่ประจำมาแจกครับ ไว้สำหรับแสดงข้อความให้โดดเด่น เห็นชัด ลองเอาไปประยุกต์ใช้ดูครับ ผลลัพธ์ของคลาสตัวนี้ ก็ตามภาพครับ

โค้ด

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.note, .success, .warning {
	padding:.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}
.note {
	background:#FFF6BF;
	color:#514721;
	border-color:#FFD324;
}
.success {
	background:#E6EFC2;
	color:#264409;
	border-color:#C6D880;
}
.warning {
	background:#FBE3E4;
	color:#8a1f11;
	border-color:#FBC2C4;
}
</style>
</head>
 
<body>
<p class="note">Class Note</p>
<p class="success">Class success</p>
<p class="warning">Class warning</p>
<p></p>
</body>
</html>
class CSS note
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ