Tạo khung ghi chú trong bài viết

bùi sang thọ | 15.3.15 | Blog |

Bạn muốn nhấn mạnh một ý nào đó trong bài viết của mình, cách tốt nhất đó là bạn hãy tạo ra những ghi chú được làm nổi bật nhằm thu hút sự chú ý của người đọc. Một thủ thuật đơn giản sẽ giúp bạn có một khung ghi chú mỹ miều như hình vẽ. Bài viết tham khảo tại đây.

Trong bài viết của mình bạn muốn chèn khung ghi chú tại chỗ nào thì chuyển sang chế độ HTML chen đoạn CODE sau vào vị trí đó.

<style type="text/css">
.note{background:#FFEA97 url(http://goo.gl/w4a2f) repeat-x 0 0;color:#796100;width:83%;
font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;
border:1px solid #E1B500;-moz-border-radius:6px;-webkit-border-radius:6px;
border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);
box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(http://goo.gl/6kexs) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(http://goo.gl/6kexs) no-repeat 100% 0;width:50px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<br />
<div class="note">
<h5>
Luu y!</h5>
Noi dung...<br />
<ul>
<li>Noi dung...</li>
<li>Noi dung...</li>
<li>Noi dung...</li>
</ul>
</div>

Kết quả bạn được như sau:

Luu y!

Noi dung

• Noi dung....
• Noi dung....
• Noi dung....