.note .success .warning css class

June 2009 | By platoosom | CSS | Tags : | อ่าน : 287

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>

บทความน่าสนใจ

  1. สร้าง mouse over image caption ด้วย CSS ล้วนๆ
  2. สร้าง listbox มีปุ่ม radio อยู่ข้างในด้วยมือคุณเอง
  3. CSS IE Bugs แมลงร้ายในไออี 6
  4. ตกแต่งฟอร์มล้อกอินสวยๆ ด้วย CSS ง่ายๆแต่ได้สาระ
  5. ไฮไลท์แถวในตารางด้วย jQuery
Tags:

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

เว็บไซต์ :http://www.select2web.com

งานเล็กๆก็ยิ่งใหญ่ได้ ถ้าอยู่ในที่ๆเหมาะสม

แสดงความเห็น

ชื่อ *
Email *
Website
ความคิดเห็น