Code khung Đẹp cho Website

 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)

<div style="padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">NỘI DUNG</div>

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

<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;">NỘI DUNG</div>

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

<div style="padding: 8px; border: 6px double #FF69B4; word-wrap: break-word;">NỘI DUNG</div>

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

<div style="padding: 8px; border: 10px groove salmon; word-wrap: break-word;">NỘI DUNG</div>

5.Dạng chóp (ridge)

<div style="padding: 8px; border: 10px ridge salmon; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

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

<div style="padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

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

<div style="padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

8.Padding (khoảng cách giữa đường viền và nội dung)

<div style="padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

9.Margin

<div style="margin: 1px; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

10.Border Radius

<div style="border-radius: 25px; padding: 8px; border: 2px solid #FF69B4; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

11.Background color

NỘI DUNG

12.Max Height

<div style="text-align: left; color: #FFFFFF; background-color: #ff3fa6; border-radius: 25px; padding: 8px; border: 2px solid #FF69B4; word-wrap: break-word;">NỘI DUNG</div>

13.Kết hợp code

<div style="border-radius: 25px; border:5px outset #D1ECFE;"><div style="border-radius: 25px; border:5px groove #63C0FE;"><div style="border-radius: 25px; border:5px inset #94D4FE;padding:10px;">CHÈN NỘI DUNG VÀO ĐÂY</div></div></div>

14.Background image, nền mờ

<div style=" max-height: 150px; overflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">CHÈN NỘI DUNG VÀO ĐÂY</div>

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

• Tweet
• Share
• Share
• Share
• Share