Xin chào các bạn, trước có rất nhiều bạn hỏi về code đóng khung bài viết đẹp cho website. Hôm nay mình sẽ hướng dẫn các bạn cách đơn giản để tạo khung đẹp nổi bật cho bài viết Blogger, website... đây là một số khung viền cơ bản, các bạn cần khung viền đẹp hơn hãy ib cho mình nhé,.
 |
| Code khung Đẹp cho Website |
1.Dạng nét liền (solid)
<p></p><div style="border-radius: 25px; border: 2px solid rgb(255, 105, 180); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><p><span style="color: #2b00fe; font-size: large;"> Nội Dung </span></p></div>
2.Dạng nét đứt (dashed)
3.Dạng nét đôi (double)
4.Dạng đường rãnh (groove)
5.Dạng chóp (ridge)
6.Dạng đổ bóng bên trong (inset)
7.Dạng đổ bóng bên ngoài (outset)
8.Padding (khoảng cách giữa đường viền và nội dung)
9.Margin
10.Border Radius
11.Background color
12.Max Height
13.Kết hợp code
14.Background image, nền mờ
GIẢI THÍCH
- padding: 8px: khoảng cách nằm giữa đường viền và nội dung
- border: 2px: độ dày của đường viền
- solid: loại đường viền (phần chữ mầu xanh)
- #FF1493: màu đường viền (phần chữ mầu hồng)
- border-radius: 25px: bo góc đường viền
- max-height: 150px: chiều cao tối đa của khung viền
- rgba(255,255,255,0.7): màu sắc với độ mờ opacity 0.7
- word-wrap: break-word: tự động xuống dòng
- line-height: 20pt: khoảng cách giữa các dòng
- Có thể sử dụng các thẻ <div>, <p>, <span> thay thế thẻ <div> tuỳ trường hợp.
- padding, border, margin, border-radius đều có thể sử dụng dưới dạng:
+ padding: 10px : các lề trên, lề dưới, lề trái, và lề phải là 10px
+ padding: 10px 20px : lề trên và lề dưới là 10px, lề phải và lề trái là 20px
+ padding: 10px 20px 30px : lề trên là 10px, lề phải và trái là 20px, lề dưới là 30px
+ padding: 10px 20px 30px 40px: lề trên là 10px, lề phải 20px, lề dưới là 30px, lề trái là 40px
Trên đây mình đã hướng dẫn các bạn chèn code cho khung bài viết cho website. Manghanoi.com đang hỗ trợ lắp mạng FPT trên toàn quốc, bạn nào có nhu cầu lắp đặt hãy liên hệ Hotline để tư vấn trực tiếp nhé.
