Một số Code mẫu HTML đóng khung văn bản tiện dùng

Anh Trai Nắng
0
Shortcodes mẫu HTML đóng khung văn bản tiện dùng khi viết bài giúp gửi một thông điệp chú ý đến đọc giả khi cần thiết.

Dưới đây là một số đoạn code tạo khung Text mẫu dạng HTML CSS (đóng khung text văn bản trong HTML hoặc code tạo khung HTML) để anh em chèn vào bài viết khi cần dùng.

Một số Code mẫu HTML đóng khung văn bản tiện dùng
Một số Code mẫu HTML đóng khung văn bản tiện dùng.

Thật ra cái này để cần vào copy cái HTML cái cho nó tiện dùng để khỏi phải tự code css cho mất thời gian thôi. Bài này chủ yếu mình viết cũng để cần thì mở lên dùng cho nhanh.

Khung xanh lá

Để sử dụng các bạn copy đoạn code dưới đây vào trình soạn thảo ở Chế độ xem HTML.

<div style="background: #ebf6e0; border-radius: 2px; border: 1px solid #b3dc82; box-sizing: border-box; float: none; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline; color: #5f9025; font-family: arial, sans-serif; font-size: 15px;">Nội dung văn bản các bạn ghi ở đây. Ghi dài dài xíu cho nó đẹp kk !</div>

Demo:

Nội dung văn bản các bạn ghi ở đây. Ghi dài dài xíu cho nó đẹp kk !

Khung đỏ thông báo

Code:

<div style="background: rgb(255, 233, 233); border-radius: 2px; border: 1px solid rgb(251, 196, 196); box-sizing: border-box; color: #de5959; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">Nội dung văn bản các bạn ghi ở đây. Ghi dài dài xíu cho nó đẹp kk !</div>

Demo:

Nội dung văn bản các bạn ghi ở đây. Ghi dài dài xíu cho nó đẹp kk !

Khung cam tùy biến

Code:

<div style="background: #fffdf3; border-radius: 2px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;"><strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lưu ý</strong>:
<ul>
<li>Nội dung văn bản 1</li>
<li>Nội dung văn bản 2</li>
<li>Nội dung văn bản 3</li>
</ul>
</div>

Demo:

Lưu ý:
  • Nội dung văn bản 1
  • Nội dung văn bản 2
  • Nội dung văn bản 3

Khung Box Shadow

Code:

<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 20px; box-sizing: inherit; line-height: 1.6em; padding: 15px;border-radius: 4px;">
<span style="box-sizing: inherit; font-weight: 700; line-height: 2.0em;"><span style="color: black;"> Lưu ý:</span></span><br />
<span style="color: #222222;">» Nội dung văn bản 1.</span><br />
<span style="color: #222222;">» Nội dung văn bản 2.</span><br />
<span style="color: #222222;">» Nội dung văn bản 3.</span></div>

Demo:

Lưu ý:
» Nội dung văn bản 1.
» Nội dung văn bản 2.
» Nội dung văn bản 3.

Khung màu linear-gradient

Code:

<div style="background: linear-gradient(40deg,#4caf5014,#ffeb3b17);border-radius: 4px;border: 3px solid #d5d5d500;color: #333333;border-image-source: linear-gradient(to right, #4caf5080, #9c27b0a8, #03a9f4a6);border-image-slice: 1;font-family: inherit;font-size: inherit;font-stretch: inherit;font-style: inherit;font-variant: inherit;font-weight: inherit;line-height: inherit;margin: 0px;padding: 1em;vertical-align: baseline;">Nội dung văn bản: Anh Trai Nắng là Blogger chia sẻ Thủ thuật Công Nghệ, Thủ thuật blogspot, Quản trị mạng, Facebook, Tips, Template Blogspot, Font thiết kế, Review...</div>

Demo:

Nội dung văn bản: Anh Trai Nắng là Blogger chia sẻ Thủ thuật Công Nghệ, Thủ thuật blogspot, Quản trị mạng, Facebook, Tips, Template Blogspot, Font thiết kế, Review...

Text Box giống WP căn bản

Code:

<div style="background-color: #fef5c4; border: 1px solid rgb(250, 223, 152); box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;"><span style="color: #222222; font-family: sans-serif;">Nội dung văn bản: Anh Trai Nắng là Blogger chia sẻ Thủ thuật Công Nghệ, Thủ thuật blogspot, Quản trị mạng, Facebook, Tips, Template Blogspot, Font thiết kế, Review...</span></div>

Demo:

Nội dung văn bản: Anh Trai Nắng là Blogger chia sẻ Thủ thuật Công Nghệ, Thủ thuật blogspot, Quản trị mạng, Facebook, Tips, Template Blogspot, Font thiết kế, Review...

Khung Lưu ý của Google Help

Code:

<div style="background: rgb(255, 243, 224); box-sizing: inherit; color: #dd2c00; font-family: Roboto, sans-serif; font-size: 14px; margin: 16px 0px; padding: 12px 24px 12px 20px;"><strong style="box-sizing: inherit; margin-top: 0px;">Caution:</strong><span style="box-sizing: inherit; margin-bottom: 0px;"> This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.</span></div>

Demo:

Caution: This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.

Tiếp tục cập nhật...

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu