Chuyển tới nội dung

Tổng hợp một số đoạn code tạo khung text mẫu HTML CSS đẹp

  • bởi
code tao khung

code đóng khung văn bản giúp đoạn văn nổi bật đẹp mắt hơn các bạn có thể sử dụng vào mục đích khác nhau như, Ghi chú, thông báo,.. bài viết này mình sẽ tổng hợp các code tạo khung do mình sưu tầm được từ các website khác nhau, các bạn có thể láy về và sử dụng

Các mẫu code tạo khung text mẫu HTML CSS đẹp

mẫu 1:

dùng cho thông báo các trương trình khuyển mãi, quà tặng khá đẹp

Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.
Để sử dụng các bạn copy đoạn code dưới đây vào trình soạn thảo ở chế độ Text. Nhớ dán trong chế độ soạn thảo HTML nhé
<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;">Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</div>

Mẫu 2:

thường sử dụng trong các thông báo đẹp

Thông báo : Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.
<div style="background: #ffe9e9; border-radius: 2px; border: 1px solid #fbc4c4; 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;"><strong>Thông báo : </strong><em>Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</em></div>
Mẫu 3:
dùng làm khung lưu ý trong các bài viết

Lưu ý:

  • Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.
  • Tối đa mỗi khuyến mại tên miền có thể đăng ký 20 domain/account/giao dịch.
  • Khuyến mại kết thúc vào 11h59 ngày 3/12/2019 theo giờ Việt Nam.
<div class="symple-box yellow center " 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 style="background: transparent; border: 0px; box-sizing: initial; margin: 0px 0px 20px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tối đa mỗi khuyến mại tên miền có thể đăng ký 20 domain/account/giao dịch.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Khuyến mại kết thúc vào 11h59 ngày 3/12/2019 theo giờ Việt Nam.</li>
</ul>
</div>

Mẫu 4:

các bạn có thể tùy biến lại nội dung nhé.

 Lưu ý:
» Địa chỉ email của bạn được bảo mật.
» Mục không có dấu sao (*) là không bắt buộc.
» Bình luận bằng tiếng Việt có dấu nếu có thể.
<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;">
<span style="box-sizing: inherit; font-weight: 700; line-height: 2.0em;"><span style="color: black;">&nbsp;Lưu ý:</span></span><br />
<span style="color: #222222;">» Địa chỉ email của bạn được bảo mật.</span><br />
<span style="color: #222222;">» Mục không có dấu sao (*) là không bắt buộc.</span><br />
<span style="color: #222222;">» Bình luận bằng tiếng Việt có dấu nếu có thể.</span></div>

Mẫu 5:

Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.
<div style="background: linear-gradient(40deg,#4caf5014,#ffeb3b17); border-radius: 3px; 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;">Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</div>

Mẫu 6 :

Note:Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

<blockquote style="-webkit-text-stroke-width: 0px; background: #e8f9f4; border: 1px solid #8ee3c8; box-sizing: border-box; clear: right; color: #181818; font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; margin: 1.5em 0px; orphans: 2; padding: 1.6em; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><strong style="box-sizing: border-box; font-weight: 500;">Note:</strong><em>Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO</em><strong style="box-sizing: border-box; font-weight: 500;">.</strong></blockquote>

Mẫu 7: 

Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.
<div class="content-box-yellow" style="background-color: #fef5c4; border: 1px solid #fadf98; box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;">Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</div>

Mẫu 8:

Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.
<div class="box_luuy" style="background: #66689c; box-shadow: rgba(0, 0, 0, 0.1) 3px 4px 4px; clear: both; line-height: 1.7; color: white; font-family: Roboto; letter-spacing: -0.75px; margin: 5px 0px; padding: 20px 25px; transition: 0.5s;">Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</div>

Mẫu 9:

<aside class="caution" style="background: #fff3e0; 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><em>Kiến thức thú vị là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.</em></aside>

trên đây là một số đoạn code tạo khung text mẫu HTML CSS đẹp các bạn hãy lấy về và sử dụng sáng tạo cho blog của bạn thêm đẹp hơn nhé.



Đánh Giá Bài Viết

Trả lời

Email của bạn sẽ không được hiển thị công khai.