ĐÓNG KHUNG VÀ CHIA CỘT CHO BÀI VIẾT

BÀI VIẾT LIÊN QUAN

Code dùng trong các bài viết Tạo hình nền và chia cột cho bài viết

Chèn liên kết và hình ảnh vào trang web Code tạo chữ chạy

Bước 1:
Tạo bài viết mới bằng cách vào Dashboard - Posting - New Post, chọn thẻ Edit HTMLvà dán code sau vào:

<div style="border: 1px solid red; padding: 10px;">

Bài viết

</div>

Bước 2:
Chuyển sang thẻ Compose: sẽ thấy có 1 khung bao quanh "Bài viết", lúc này đơn giản chỉ cần đưa nội dung cần thiết vào.
Ngược lại, ta cũng có thể soạn thảo bên thẻ Compose trước sau đó chuyển qua Edit HTML: thêm thẻ mở <div> ở trên và thẻ đóng </div> ở dưới bài viết là được.

Tùy biến:

Chúng ta có thể tùy biến các thuộc tính của dòng code này:

<div style="border: 1px solid red; padding: 10px;">

chẳng hạn như sau:

Color: có thể sử dụng các màu chuẩn như: white, red, black, lime, yellow, orange, aqua (như bài viết này)... hoặc sử dụng mã màu hex code (lựa màu tùy thích ở đây)

Width: độ dày đường khung, thường 1px là vừa.

Style: thường dùng là 'Solid', ta có thể thay đổi bằng các thược tính sau: dotted, dashed, double, groove, ridge, inset và outset

Padding: cần thiết để nội dung khỏi tràn đụng vào khung, có thể thay đổi các giá trị từ 0 đến 10px

Ngoài ra, ta có thể tùy biến thêm bằng cách đưa vào một số thuộc tính định dạng văn bản trong khung như:

Background-color: màu nền
Color: màu chữ, VD: color: orange; hoặc color: #6acfff;

Text-align: canh lề bài viết, có thể: left, center hay right.

Margin: tùy ý

Ví dụ:

<div style="border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: center;">

Bài viết

</div>

Tùy biến code

<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;">NỘI_DUNG</div>

Code đóng 2 khung

<div style="border: 2px solid blue; padding: 4px;"><div style="border: 5px solid yellow; padding: 10px;">
Bài viết
</div>

Tùy biến code

<div style="border: 14px double yellow; padding: 4px;"><div style="border: 5px solid orange; padding: 10px;">
Bài viết
</div>

Đóng khung và chia cột

Code

<br /> <div style="border: 3px solid green; padding: 10px;"> <table border="1" style="width: 600px;"><tbody> <tr> <td style="text-align: left; width: 250px;" valign="top"><br /> Nội dung cột 1</td> <td style="text-align: left; width: 250px;" valign="top"><br /> Nội dung cột 2</td> </tr> </tbody></table> <br /> </div>

Hiển thị code

Nội dung cột 1

Nội dung cột 2

Code đóng khung chia 2 cột ẩn khung cột

<div style="border: 1px solid black; padding: 10px;"> <table border="0" style="width: 560px;"><tbody> <tr> <td style="text-align: left; width: 200px;" valign="top"><br /> <br /> Nội dung cột 1</td> <td style="text-align: left; width: 350px;" valign="top"><br /> <br /> Nội dung cột 2</td> </tr> </tbody></table> <br /> <br /> </div>