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. |
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.
» 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:
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...
