Một số đoạn mã HTML CSS tạo khung đẹp cho WordPress

Một số đoạn mã HTML CSS tạo khung đẹp cho WordPress, Việc sử dụng mã HTML CSS có sẵn sẽ giúp bạn giải quyết được vấn đề khi tạo một khung đơn giản trong bài viết hoặc ở một vị trí nào đó một cách nhanh chóng và đơn giản? bạn chỉ cần sao chép những đoạn mã HTML CSS và tùy biến thêm một chút theo ý thích của mình là bạn sẽ có ngay một khung text đẹp.

Tại sao phải dùng HTML CSS tạo khung có sẵn?

Việc sử dụng các đoạn mã HTML¹HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website CSS²CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… có sẵn sẽ giúp bạn tiết kiệm được thời gian đồng thời nó giúp bạn có thể dễ dàng tùy biến theo ý thích của mình? và bạn đang tìm kiếm một số mẫu HTML CSS khung viền cho WordPress? hãy tham khảo một số mẫu HTML CSS mà mình tổng hợp từ các nguồn khác nhau?

Mã HTML CSS tạo khung đẹp

Một số đoạn mã HTML CSS tạo khung đẹp dưới đây được sử dụng cho mã nguồn WordPress, tùy theo mã nguồn bạn cũng có thể tùy biến lại đoạn mã cho phù hợp với mục đích của bạn.

Mẫu HTML CSS 01

Đây là mẫu rất thích hợp để bạn có thể hiển thị các thông báo, chương trình, khuyến mãi…. chỉ cần bạn sao chép đoạn mã bên dưới và dán vào vị trí thích hợp là bạn sẽ có ngay một khung Text tuyệt đẹp.

<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;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ ... và kiếm tiền hay nhất, chi tiết nhất...</div>

Demo HTML CSS 01

Mẫu HTML CSS 02

Với mẫu này cũng tương tự mẫu trên, tuy nhiên mẫu này hơi màu mè hơn xíu… nó phù hợp cho những ai thích mơ mộng á nha.

<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;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ ... và kiếm tiền hay nhất, chi tiết nhất...</div>

Demo HTML CSS 02

Mẫu HTML CSS 03

Mẫu này dành cho những ai muốn tùy biến lại khung thông báo bình luận trên trang Web của mình.

<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;">Không dùng từ khóa đặt tên khi bình luận.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bình luận phải có dấu.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bình luận sai nội quy sẽ bị xóa.</li>
</ul>
</div>

Demo HTML CSS 03

Mẫu HTML CSS 04

Một mẫu tạo khung bình luận khác, với mẫu này khá thích hợp với phong cách cổ điển cùng sự đơn giản.

<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>

Demo HTML CSS 04

Có thể bạn sẽ thích?

• Đưa bài viết trong WordPress ở đầu tiên
• Tối ưu mã nguồn WordPress với WP-Optimize
• Tùy biến Widget bình luận WordPress

Mẫu HTML CSS 05

Đây là một mẫu khung viền khá bắt mắt, nó là sự kết hợp pha trộn giữa các màu sắc tạo nên sự độc đáo riêng biệt.

<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;">
Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ ... và kiếm tiền hay nhất, chi tiết nhất...</div>

Demo HTML CSS 05

Mẫu HTML CSS 06

Đây là một mẫu HTML CSS – Blockquote khung với thiết kế vô cùng đơn giản nhưng nó lại làm nổi bật được nội dung đáng để bạn lôi nó về vọc vạch.

<aside class="caution" 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;">&nbsp;Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ ... và kiếm tiền hay nhất, chi tiết nhất...</span></aside>

Demo HTML CSS 06

Mẫu HTML CSS 07

Một mẫu HTML CSS khung khá nhẹ nhàng và đẹp, bạn có thể sử dụng ở các vị trí trong bài viết khác nhau.

<div class="content-box-yellow" 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;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ ... và kiếm tiền hay nhất, chi tiết nhất...</span></div>

Demo HTML CSS 07

Một số khung viền HTML CSS đẹp khác

Dưới đây là code các loại đường viền cơ bản thường gặp, các bạn chỉ việc coppy về dùng và tuỳ chỉnh với một số thuộc tính trong code như: đổi kiểu đường viền, đổi màu nền,… và sử dụng.

Dạng nét liền (solid)

<div style="padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</div>

Demo dạng nét liền

Dạng nét liền (solid) có background

<p style="padding: 8px; border: 1px solid #5f9025; background: #ebf6e0; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo nét liền (solid) có background

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng nét liền (solid) có background, border trái đậm

<p style="padding: 8px; border-left: 4px solid #5f9025; border-right: 1px solid #5f9025; border-top: 1px solid #5f9025; border-bottom: 1px solid #5f9025; background: #fff; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo nét liền (solid) có background, border trái đậm

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng dấu chấm (dotted)

<p style="padding: 8px; border: 2px dotted #FF69B4; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo dấu chấm (dotted)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng nét đứt (dashed)

<p style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo nét đứt (dashed)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng nét đứt có shadow và radius

<p style="padding: 20px; border: 3px dashed; border-radius: 15px; word-wrap: break-word;box-shadow: 4px 3px 5px rgba(0,0,0,0.5), 0 0 10px rgba(46,46,46,0.4) inset;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo nét đứt có shadow và radius

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng nét đôi (double)

<p style="padding: 8px; border: 6px double #8A2BE2; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo nét đôi (double)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng đường rãnh (groove)

<p style="padding: 8px; border: 10px groove salmon; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo đường rãnh (groove)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng chóp (ridge)

<p style="padding: 8px; border: 10px ridge salmon; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo chóp (ridge)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng đổ bóng bên trong (inset)

<p style="padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo đổ bóng bên trong (inset)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Dạng đổ bóng bên ngoài (outset)

<p style="padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Demo đổ bóng bên ngoài (outset)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Ngoài ra các bạn có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ đoạn mã bên dưới.

<p style="border-radius: 25px; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…</p>

Kết quả như bên dưới.

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ đoan mã như sau.

<p style="max-height: 150px; overflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Mình là Nguyễn Hữu Thuần đã từng làm một số website nhỏ mang tính cá nhân (nhưng không đâu vào đâu cả) và tôi đã bỏ một thời gian khá dài – tuy nhiên sau một cú sốc khá nhẹ tôi lại lập ra blog thủ thuật (tháng 11/2014) mục đích chính để làm cho vơi đi những nỗi buồn và từ đó phát triển đến bây giờ (lúc đầu huuthuan.net có tên là it60s.org). Hiện tại blog đã có được “một chút” tàn dư trên Google nhưng mình cảm thấy rất hạnh phúc khi có những bài hướng dẫn được ngợi khen và đó cũng là động lực để mình có thể viết nhiều bài hơn và duy trì blog! Với phương châm là chia sẻ vì thế blog rất muốn được sự chia sẻ của cộng đồng để mình có thể hoàn thiện blog ngày càng đáp ứng nhu cầu tốt hơn và cũng rất cảm ơn sự quan tâm và ủng hộ của các độc giả!</p>

Kết quả như bên dưới.

Mình là Nguyễn Hữu Thuần đã từng làm một số website nhỏ mang tính cá nhân (nhưng không đâu vào đâu cả) và tôi đã bỏ một thời gian khá dài – tuy nhiên sau một cú sốc khá nhẹ tôi lại lập ra blog thủ thuật (tháng 11/2014) mục đích chính để làm cho vơi đi những nỗi buồn và từ đó phát triển đến bây giờ (lúc đầu huuthuan.net có tên là it60s.org). Hiện tại blog đã có được “một chút” tàn dư trên Google nhưng mình cảm thấy rất hạnh phúc khi có những bài hướng dẫn được ngợi khen và đó cũng là động lực để mình có thể viết nhiều bài hơn và duy trì blog! Với phương châm là chia sẻ vì thế blog rất muốn được sự chia sẻ của cộng đồng để mình có thể hoàn thiện blog ngày càng đáp ứng nhu cầu tốt hơn và cũng rất cảm ơn sự quan tâm và ủng hộ của các độc giả!

Nếu bạn muốn tiêu đề ở giữa kiểu một đoạn chú thích thì sử dụng đoạn code bên dưới.

<div style="box-sizing: border-box; line-height: 1.5; font-weight: 400; color: black; word-break: break-word; font-family: Arial;">
<div id="DUONG-VIEN" style="border: 2px solid #FF1493 ; border-radius: 5px;">
<div id="TIEU-DE" style="margin: 0 40px; font-size: 26px; margin-top: -25px; text-align: center;"><span style="display: inline-block; background: white; padding: 4px;">TIÊU ĐỀ</span></div>
<div style="text-align: justify; padding: 15px; font-size: 16px;"><span style="font-family: arial, helvetica, sans-serif;">Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…
</span></div>
</div>
</div>

Kết quả như bên dưới.

Ngoài ra, bạn có thể sử dụng Plugin SiteOrigin CSS để có thể tùy biến giao diện trang Web theo ý muốn một cách đơn giản hơn.

Kết luận

Với những đoạn Code HTML CSS khung viền bên trên hy vọng sẽ giúp ích cho bạn trong việc tạo khung cho trang Web của mình. Để sử dụng bạn chỉ cần Copy đoạn mã tương ứng rồi dán vào trang Web với trình HTML là bạn sẽ có ngay kết quả mong muốn.

Trong quá trình sử dụng bạn có thể thay đổi màu sắt theo mục đích cũng như nhu cầu của mình, hy vọng với những đoạn Code HTML CSS tạo khung viền bên trên bạn sẽ thích.