[ Goghepthanh.com :
Quý khách...Cần Mua Thớt Gỗ, Ván Ghép Giá Tốt, Cần Tìm Xưởng Xẻ Sấy, Bán Nguyên Liệu Gỗ Tràm... Uy Tín, Chất Lượng...
Click NGAY ĐI. ]
Phần mở bài:
Trong thiết kế web hiện đại, việc giữ cho nội dung không chỉ rõ ràng mà còn hấp dẫn luôn là một thách thức đối với các nhà phát triển. Làm thế nào để tạo ra một trang web không chỉ cung cấp thông tin mà còn thu hút người xem ở lại lâu hơn? Câu trả lời có thể nằm ngay ở những chi tiết nhỏ như thẻ phân chia nội dung (divider). Với CSS, bạn có thể biến những đường phân cách đơn giản thành các điểm nhấn độc đáo, làm cho website của bạn trở nên sinh động, trực quan hơn và để lại ấn tượng mạnh mẽ với người dùng. Hãy cùng khám phá cách tạo ra những thẻ phân chia nội dung không chỉ đẹp mắt mà còn tăng sức hút cho website của bạn ngay trong bài viết này!
Đây là đoạn văn bản với đường gạch ngang cách điệu đẹp mắt.
CODE :
<p style="border-top: 3px solid #2c3e50; padding-top: 15px; font-size: 18px; color: #34495e; text-align: center; font-family: 'Arial', sans-serif; line-height: 1.6; letter-spacing: 1px; position: relative; margin: 20px 0;"> <span style="background-color: #ecf0f1; padding: 0 10px; position: relative; top: -12px;">Đây là đoạn văn bản với đường gạch ngang cách điệu đẹp mắt. </span></p>
Đây là đoạn văn bản với đường gạch ngang màu xanh phía trên.
CODE :
<p style="border-top: 3px solid #3498db; padding-top: 15px; font-size: 18px; color: #2c3e50; text-align: center; font-family: 'Arial', sans-serif; margin: 20px 0; position: relative;">
Đây là đoạn văn bản với đường gạch ngang cách điệu bên trên, không có khung.
CODE :
<p style="border-top: 4px double #3498db; padding-top: 10px; font-size: 18px; color: #2c3e50; text-align: center; font-family: 'Verdana', sans-serif; line-height: 1.6; margin: 20px 0;">
Đây là đoạn văn bản với đường gạch ngang cách điệu bên trên, không có khung.
</p>
Đây là đoạn văn bản với đường gạch ngang mang phong cách ngành gỗ.
CODE
<p style="border-top: 4px solid #8b4513; padding-top: 20px; font-size: 18px; color: #4b3621; text-align: center; font-family: 'Georgia', serif; margin: 30px 0; background: #f5f5dc; background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); background-size: cover;">
<span style="background-color: #f5f5dc; padding: 0 10px; position: relative; top: -15px;">
Sống xanh, sống bền vững – bảo vệ môi trường và tương lai.
CODE :
<p style="border-top: 4px solid #27ae60; padding-top: 15px; font-size: 18px; color: #2e7d32; text-align: center; font-family: 'Verdana', sans-serif; margin: 25px 0; background-color: #e8f5e9; position: relative;">
<span style="background-color: #e8f5e9; padding: 0 15px; position: relative; top: -12px; color: #1b5e20;">
Sống xanh, sống bền vững – bảo vệ môi trường và tương lai.
</span>
</p>
🌿 Sống xanh mỗi ngày 🌱 – Hành động nhỏ, thay đổi lớn 🌍
CODE :
<p style="border-top: 3px dashed #28a745; padding-top: 20px; font-size: 18px; color: #155724; text-align: center; font-family: 'Arial', sans-serif; margin: 30px 0; background-color: #e9f5e9; position: relative;">
<span style="background-color: #e9f5e9; padding: 0 15px; position: relative; top: -12px;">
🌿 Sống xanh mỗi ngày 🌱 – Hành động nhỏ, thay đổi lớn 🌍
</span>
</p>
🍳 Nấu ăn ngon mỗi ngày – Hương vị yêu thương từ gian bếp 🥘
CODE :
<p style="border-top: 3px dashed #ff6347; padding-top: 15px; font-size: 18px; color: #d35400; text-align: center; font-family: 'Comic Sans MS', cursive; margin: 20px 0; background-color: #fff5e1; position: relative;">
<span style="background-color: #fff5e1; padding: 0 10px; position: relative; top: -12px;">
🍳 Nấu ăn ngon mỗi ngày – Hương vị yêu thương từ gian bếp 🥘
</span>
</p>
🪵 Thớt gỗ tự nhiên – Sự lựa chọn hoàn hảo cho căn bếp của bạn 🍽️
CODE :
<p style="border-top: 4px solid #8b4513; padding-top: 20px; font-size: 18px; color: #5a3e2b; text-align: center; font-family: 'Georgia', serif; margin: 30px 0; background-color: #f4e7d3; position: relative;">
<span style="background-color: #f4e7d3; padding: 0 15px; position: relative; top: -15px; font-weight: bold;">
🪵 Thớt gỗ tự nhiên – Sự lựa chọn hoàn hảo cho căn bếp của bạn 🍽️
</span>
</p>
🍚 Nồi cơm điện thông minh – Tiết kiệm thời gian, nấu cơm ngon mỗi ngày 🍲
CODE :
<p style="border-top: 4px solid #ffcc00; padding-top: 20px; font-size: 18px; color: #34495e; text-align: center; font-family: 'Trebuchet MS', sans-serif; margin: 30px 0; background: linear-gradient(to right, #f0f8ff, #f5f5dc); position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
<span style="background-color: #f0f8ff; padding: 0 20px; position: relative; top: -15px; font-weight: bold; border-radius: 5px; color: #e67e22;">
🍚 Nồi cơm điện thông minh – Tiết kiệm thời gian, nấu cơm ngon mỗi ngày 🍲
</span>
</p>
🥕 Máy ép chậm - Ép kiệt dưỡng chất, giữ trọn vị tươi ngon 🍏
CODE :
<p style="border-top: 5px double #00b894; padding-top: 20px; font-size: 18px; color: #2d3436; text-align: center; font-family: 'Verdana', sans-serif; margin: 30px 0; background: linear-gradient(to right, #dff9fb, #c8e6c9); position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-radius: 10px;">
<span style="background-color: #ffffff; padding: 0 20px; position: relative; top: -15px; font-weight: bold; border-radius: 5px; color: #27ae60;">
🥕 Máy ép chậm - Ép kiệt dưỡng chất, giữ trọn vị tươi ngon 🍏
</span>
</p>
🥕 Máy ép chậm – Giữ trọn dưỡng chất, tươi mát mỗi ngày 🍏
CODE :
<p style="border-top: 5px dotted #27ae60; padding-top: 20px; font-size: 18px; color: #2c3e50; text-align: center; font-family: 'Arial', sans-serif; margin: 30px 0; background: radial-gradient(circle, #e0f7fa, #ffffff); position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);">
<span style="background-color: #ffffff; padding: 0 20px; position: relative; top: -15px; font-weight: bold; border-radius: 5px; color: #16a085;">
🥕 Máy ép chậm – Giữ trọn dưỡng chất, tươi mát mỗi ngày 🍏
</span>
</p>
🔥 Nồi áp suất điện tử – Giải pháp nấu ăn nhanh gọn, an toàn và tiện lợi 🍲
CODE :
<p style="border-top: 5px double #e74c3c; padding-top: 25px; font-size: 18px; color: #c0392b; text-align: center; font-family: 'Roboto', sans-serif; margin: 30px 0; background: linear-gradient(to right, #fff3f0, #fdecec); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);">
<span style="background-color: #fff3f0; padding: 5px 20px; position: relative; top: -18px; font-weight: bold; border-radius: 10px; color: #e74c3c;">
🔥 Nồi áp suất điện tử – Giải pháp nấu ăn nhanh gọn, an toàn và tiện lợi 🍲
</span>
</p>
🎧 Tai nghe không dây – Âm thanh sống động, tự do di chuyển 🔊
CODE :
<p style="border-top: 5px solid #8e44ad; padding-top: 25px; font-size: 18px; color: #2c3e50; text-align: center; font-family: 'Helvetica', sans-serif; margin: 30px 0; background: linear-gradient(to right, #f0e7ff, #e0d4f7); position: relative; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);">
<span style="background-color: #f0e7ff; padding: 5px 20px; position: relative; top: -18px; font-weight: bold; border-radius: 12px; color: #8e44ad;">
🎧 Tai nghe không dây – Âm thanh sống động, tự do di chuyển 🔊
</span>
</p>
🎮 Điện thoại Gaming – Hiệu suất đỉnh cao, trải nghiệm không giới hạn 🔥
CODE :
<p style="border-top: 5px solid #27ae60; padding-top: 25px; font-size: 18px; color: #1abc9c; text-align: center; font-family: 'Verdana', sans-serif; margin: 30px 0; background: radial-gradient(circle, #141e30, #243b55); position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); text-transform: uppercase;">
<span style="background-color: #1e272e; padding: 5px 20px; position: relative; top: -18px; font-weight: bold; border-radius: 15px; color: #27ae60; letter-spacing: 2px;">
🎮 Điện thoại Gaming – Hiệu suất đỉnh cao, trải nghiệm không giới hạn 🔥
</span>
</p>
🔋 Pin sạc dự phòng – Năng lượng bền bỉ, đồng hành mọi lúc mọi nơi ⚡
CODE :
<p style="border-top: 3px double #f39c12; padding-top: 20px; font-size: 18px; color: #e67e22; text-align: center; font-family: 'Arial', sans-serif; margin: 30px 0; background: linear-gradient(to right, #f7f1e3, #ffeaa7); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px;">
<span style="background-color: #ffeaa7; padding: 5px 20px; position: relative; top: -15px; font-weight: bold; border-radius: 12px; color: #d35400;">
🔋 Pin sạc dự phòng – Năng lượng bền bỉ, đồng hành mọi lúc mọi nơi ⚡
</span>
</p>
🔊 Loa Bluetooth – Âm thanh sống động, mang âm nhạc đến mọi nơi 🎵
CODE :
<p style="border-top: 3px double #3498db; padding-top: 25px; font-size: 18px; color: #2980b9; text-align: center; font-family: 'Tahoma', sans-serif; margin: 30px 0; background: linear-gradient(to right, #e0f7fa, #b2ebf2); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px;">
<span style="background-color: #b2ebf2; padding: 5px 25px; position: relative; top: -18px; font-weight: bold; border-radius: 15px; color: #1e90ff;">
🔊 Loa Bluetooth – Âm thanh sống động, mang âm nhạc đến mọi nơi 🎵
</span>
</p>
🚗 Xe điện – Công nghệ xanh, bảo vệ môi trường, di chuyển bền vững 🌱
CODE :
<p style="border-top: 3px double #27ae60; padding-top: 25px; font-size: 18px; color: #2ecc71; text-align: center; font-family: 'Verdana', sans-serif; margin: 30px 0; background: linear-gradient(to right, #e8f5e9, #d0f8ce); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 12px;">
<span style="background-color: #d0f8ce; padding: 5px 25px; position: relative; top: -18px; font-weight: bold; border-radius: 12px; color: #1e8449;">
🚗 Xe điện – Công nghệ xanh, bảo vệ môi trường, di chuyển bền vững 🌱
</span>
</p>
💚 Chăm sóc sức khỏe – Tận hưởng cuộc sống khỏe mạnh và hạnh phúc 🌿
CODE :
<p style="border-top: 3px solid #2ecc71; padding-top: 20px; font-size: 18px; color: #27ae60; text-align: center; font-family: 'Georgia', serif; margin: 30px 0; background: linear-gradient(to right, #eafaf1, #d4efdf); position: relative; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); border-radius: 12px;">
<span style="background-color: #eafaf1; padding: 5px 20px; position: relative; top: -15px; font-weight: bold; border-radius: 12px; color: #1e8449;">
💚 Chăm sóc sức khỏe – Tận hưởng cuộc sống khỏe mạnh và hạnh phúc 🌿
</span>
</p>
🌞 Du lịch - Tái tạo năng lượng, khám phá cuộc sống đầy niềm vui 🌍
🌴🌊 ✨ Relax ✨ 🌞🍹
CODE :
<p style="border-top: 3px solid #f39c12; padding-top: 25px; font-size: 18px; color: #e67e22; text-align: center; font-family: 'Arial', sans-serif; margin: 30px 0; background: linear-gradient(to right, #fff5e1, #ffeaa7); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);">
<span style="background-color: #ffeaa7; padding: 5px 20px; position: relative; top: -18px; font-weight: bold; border-radius: 12px; color: #d35400;">
🌞 Du lịch - Tái tạo năng lượng, khám phá cuộc sống đầy niềm vui 🌍
</span>
</p>
<div style="position: relative; top: -10px; display: flex; justify-content: center;">
<span style="background-color: #f39c12; color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 20px; font-weight: bold;">🌴🌊 ✨ Relax ✨ 🌞🍹</span>
</div>
📚 Sách Hay Nên Đọc – Khám phá thế giới tri thức và truyền cảm hứng ✨
📖 Read & Grow 🌟
CODE :
<p style="border-top: 3px solid #8e44ad; padding-top: 20px; font-size: 18px; color: #34495e; text-align: center; font-family: 'Georgia', serif; margin: 30px 0; background: linear-gradient(to right, #f3e5f5, #e8daef); position: relative; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px;">
<span style="background-color: #e8daef; padding: 5px 20px; position: relative; top: -15px; font-weight: bold; border-radius: 12px; color: #8e44ad;">
📚 Sách Hay Nên Đọc – Khám phá thế giới tri thức và truyền cảm hứng ✨
</span>
</p>
<div style="text-align: center; margin-top: -10px;">
<span style="background-color: #8e44ad; color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 20px; font-weight: bold;">📖 Read & Grow 🌟</span>
</div>
Văn phòng phẩm giá rẻ – Giải pháp tiết kiệm chi phí, nâng cao hiệu quả công việc
CODE :
<p style="border-top: 2px solid #2ecc71; padding-top: 15px; font-size: 18px; color: #34495e; text-align: center; font-family: 'Arial', sans-serif; margin: 20px 0; background-color: #f9f9f9; position: relative; border-radius: 8px;">
Văn phòng phẩm giá rẻ – Giải pháp tiết kiệm chi phí, nâng cao hiệu quả công việc
</p>
💻 Kiếm Tiền Online – Cơ Hội Lớn, Hành Động Ngay, Tối Đa Thu Nhập! 💰
🚀 Bắt Đầu Ngay 🔥
CODE :
<p style="border-top: 4px solid #e67e22; padding-top: 20px; font-size: 20px; color: #34495e; text-align: center; font-family: 'Arial', sans-serif; margin: 25px 0; background: linear-gradient(to right, #fdf5e6, #fbe9d7); position: relative; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); border-radius: 12px;">
<span style="background-color: #fbe9d7; padding: 10px 25px; position: relative; top: -15px; font-weight: bold; border-radius: 12px; color: #d35400;">
💻 Kiếm Tiền Online – Cơ Hội Lớn, Hành Động Ngay, Tối Đa Thu Nhập! 💰
</span>
</p>
<div style="text-align: center; margin-top: -10px;">
<span style="background-color: #e67e22; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 18px; font-weight: bold;">🚀 Bắt Đầu Ngay 🔥</span>
</div>
✍️ Viết Blog Kiếm Tiền – Biến Đam Mê Thành Thu Nhập! 💼💸
🚀 Bắt Đầu Hành Trình Blog Của Bạn Ngay Hôm Nay 🔥
CODE :
<p style="border-top: 4px solid #27ae60; padding-top: 20px; font-size: 20px; color: #2c3e50; text-align: center; font-family: 'Verdana', sans-serif; margin: 25px 0; background: linear-gradient(to right, #e9f7ef, #d4efdf); position: relative; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); border-radius: 12px;">
<span style="background-color: #d4efdf; padding: 10px 25px; position: relative; top: -15px; font-weight: bold; border-radius: 12px; color: #27ae60;">
✍️ Viết Blog Kiếm Tiền – Biến Đam Mê Thành Thu Nhập! 💼💸
</span>
</p>
<div style="text-align: center; margin-top: -10px;">
<span style="background-color: #27ae60; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 18px; font-weight: bold;">🚀 Bắt Đầu Hành Trình Blog Của Bạn Ngay Hôm Nay 🔥</span>
</div>
