Đóng Khung Tiện Ích Hay Bài Viết Bởi Thẻ DIV

Không những thủ thuật này chỉ áp dụng cho bài viết mà còn có thể áp dụng cho việc đóng khung các tiện ích ở thanh bên(sidebar) trong trường hợp mẫu mặc định của blogger không có viền khung cho các tiện ích khi ta thêm vào blogspot.Để đóng khung cho các bài viết và các tiện ích sử dụng thẻ <div> ta sử dụng code bên dưới khi soạn thảo văn bản bên HTML.Còn đối với các tiện ích thì thay Bài viết là nội dung của tiện ích HTML/javascript.
Đóng Khung Tiện Ích Hay Bài Viết Bởi Thẻ DIV
Code:
<div style="border: 1px solid red; padding: 10px;">
Nội dung bài viết.
</div>
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;">
Trong đó:
border: Đường viền có 3 thông số lần lượt là:
1- Độ dầy đường viền.
2- Kiểu đường viền.
3- Màu đường viền.
- Độ dày đường viền: thường 1px là vừa.
- Kiểu đường viền: thường dùng là Solid(đường liền), ta có thể thay đổi bằng các thuộc tính sau: dotted, dashed, double, groove, ridge, inset và outset.
- Màu đường viền: có thể sử dụng các màu chuẩn như: white, red, black, lime, yellow, orange, aqua ... hoặc sử dụng mã màu hex code.
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.
Các thuộc tính cách nhau dấu Chấm Phẩy.
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 trong khung.
  • Color: Màu chữ trong khung, VD: color: orange; hoặc color: #6acfff;
  • Text-align: Canh lề bài viết, có thể: left, center hay right.
  • Margin:Căn vị trí của khung.
Ví dụ:
<div style="Background-color: #FFFFFF; border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: center;">
Nội dung bài viết.
</div>
Tham khảo thêm TẠI ĐÂY sẽ chi tiết hơn.
Chia sẻ trên Google Plus +1

About Unknown

    Blogger Comment

0 nhận xét :

Đăng nhận xét