{"id":410,"date":"2025-08-10T10:06:50","date_gmt":"2025-08-10T10:06:50","guid":{"rendered":"https:\/\/hotro.org\/?p=410"},"modified":"2025-08-10T10:14:06","modified_gmt":"2025-08-10T10:14:06","slug":"banner-ngang-html-css-responsive","status":"publish","type":"post","link":"https:\/\/hotro.org\/?p=410","title":{"rendered":"T\u1ea1o banner ngang HTML CSS responsive"},"content":{"rendered":"\n<p>B\u00e0i vi\u1ebft n\u00e0y Hotro.org chia s\u1ebb \u0111\u1ebfn b\u1ea1n m\u1eabu <strong>banner ngang HTML CSS responsive<\/strong> \u0111\u1eb9p m\u1eaft tr\u00ean nhi\u1ec1u k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. B\u1ea1n n\u00e0o th\u1ea5y \u01b0ng th\u00ec copy v\u1ec1 m\u00e0 d\u00f9ng nh\u00e9 !<\/p>\n\n\n\n<p><strong>\u01afu \u0111i\u1ec3m m\u1eabu banner ngang v\u1edbi HTML CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t \u0111o\u1ea1n code HTML CSS duy nh\u1ea5t, b\u1ea1n ch\u1ec9 c\u1ea7n copy v\u00e0 ch\u00e8n\u00a0 v\u00e0o widget HTML CSS ho\u1eb7c khung qu\u1ea3ng c\u00e1o \u1edf \u0111\u1ea7u, gi\u1eefa, cu\u1ed1i b\u00e0i vi\u1ebft.<\/li>\n\n\n\n<li>Hi\u1ec3n th\u1ecb khoa h\u1ecdc tr\u00ean c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh, ti\u00eau bi\u1ec3u l\u00e0 tr\u00ean di \u0111\u1ed9ng v\u00e0 desktop. Khi tr\u00ean desk top banner s\u1ebd hi\u1ec3n th\u1ecb theo chi\u1ec1u ngang. C\u00f2n tr\u00ean di \u0111\u1ed9ng banner s\u1ebd hi\u1ec3n th\u1ecb theo chi\u1ec1u d\u1ecdc. \u0110i\u1ec1u n\u00e0y khi\u1ebfn cho\u00a0 d\u00f9 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh n\u00e0o th\u00ec th\u00f4ng \u0111i\u1ec7p qu\u1ea3ng c\u00e1o v\u1eabn hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"420\" src=\"https:\/\/hotro.org\/wp-content\/uploads\/2025\/08\/banner-ngang-html-css-responsive.png\" alt=\"\" class=\"wp-image-411\"\/><\/figure>\n\n\n\n<p>C\u00e1c nhu c\u1ea7u c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng banner n\u00e0y nh\u01b0: Ch\u00e8n qu\u1ea3ng c\u00e1o v\u00e0o header c\u1ee7a website, ch\u00e8n b\u00ean trong b\u00e0i vi\u1ebft b\u1eb1ng c\u00e1c plugin ch\u00e8n ads (\u0111\u1ea7u, gi\u1eefa, cu\u1ed1i b\u00e0i vi\u1ebft), ch\u00e8n v\u00e0o footer v\u1edbi wiidget HTML CSS r\u1ed9ng r\u00e3i.<\/p>\n\n\n\n<p><strong>S\u1eed d\u1ee5ng banner ngang HTML CSS<\/strong><\/p>\n\n\n\n<p><strong>Banner v\u1edbi h\u00ecnh \u1ea3nh<\/strong><\/p>\n\n\n\n<p>R\u1ea5t \u0111\u01a1n gi\u1ea3n, tr\u00ean WordPress b\u1ea1n t\u1ea1o m\u1edbi m\u1ed9t widget HTML CSS (c\u00f3 \u0111\u1ed9 r\u1ed9ng m\u00e0 b\u1ea1n th\u1ea5y l\u00e0 hi\u1ec3n th\u1ecb ngang oke), ti\u1ebfp theo copy d\u00e1n \u0111o\u1ea1n code b\u00ean d\u01b0\u1edbi v\u00e0o. Thay l\u1ea1i link \u1ea3nh v\u00e0 n\u1ed9i dung b\u00ean trong theo \u00fd b\u1ea1n n\u1eefa l\u00e0 \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"custom-banner\">\n&lt;div class=\"banner-image\">\n&lt;img src=\"https:\/\/template.canva.com\/EAGhnrUT1Io\/1\/0\/1600w-uxmbUNVs0jA.jpg\" alt=\"Banner Image\">\n&lt;\/div>\n&lt;div class=\"banner-text\">\n&lt;span class=\"banner-title\">Kh\u00e1m ph\u00e1 s\u1ea3n ph\u1ea9m m\u1edbi!&lt;\/span>\n&lt;p>\u01afu \u0111\u00e3i \u0111\u1eb7c bi\u1ec7t ch\u1ec9 trong h\u00f4m nay. Nhanh tay \u0111\u1eb7t h\u00e0ng \u0111\u1ec3 nh\u1eadn khuy\u1ebfn m\u00e3i h\u1ea5p d\u1eabn!&lt;\/p>\n&lt;a href=\"https:\/\/hocban.vn\/link-mua\">Mua ngay&lt;\/a>\n&lt;\/div>\n&lt;\/div>\n&lt;style>\ndiv.custom-banner {\ndisplay: flex;\nalign-items: center;\nmax-width: 1024px;\nheight: auto;\nbackground-color: #ffffff;\nborder: 1px solid #e0e0e0;\nbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\noverflow: hidden;\nmargin: 20px auto;\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\ntransition: transform 0.2s ease;\nz-index: 10;\n}\ndiv.custom-banner:hover {\ntransform: translateY(-2px);\n}\ndiv.custom-banner .banner-image {\nflex-shrink: 0;\nheight: 100%;\nwidth: 312px;\n}\ndiv.custom-banner .banner-image img {\nwidth: 100%;\nheight: auto;\nobject-fit: contain;\ndisplay: block;\nmargin: 0;\nmin-width: 312px;\n}\ndiv.custom-banner .banner-text {\nflex-grow: 1;\ndisplay: flex;\nflex-direction: column;\njustify-content: center;\npadding: 25px;\npadding-left: o;\n}\ndiv.custom-banner .banner-text .banner-title {\nfont-size: 130%;\nfont-weight: 600;\nline-height: 1.3;\nmargin: 0;\ncolor: #1a1a1a;\noverflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\ndisplay: block;\n}\ndiv.custom-banner .banner-text p {\nfont-size: 87%;\nfont-weight: normal;\nline-height: 1.4;\nmargin: 4px 0 0;\ncolor: #4a4a4a;\ndisplay: -webkit-box;\n-webkit-line-clamp: 2;\n-webkit-box-orient: vertical;\noverflow: hidden;\n}\ndiv.custom-banner .banner-text a {\ndisplay: inline-block;\nmargin-top: 8px;\npadding: 8px 16px;\nbackground-color: #004aad;\ncolor: #ffffff;\ntext-decoration: none;\nborder-radius: 8px;\nfont-size: 12px;\nfont-weight: 500;\ntransition: background-color 0.2s ease;\nalign-self: flex-start;\nbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\ndiv.custom-banner .banner-text a:hover {\nbackground-color: #003780;\n}\n@media (max-width: 500px) {\ndiv.custom-banner {\nflex-direction: column;\nheight: auto;\npadding: 0;\n}\ndiv.custom-banner .banner-image {\nwidth: 100%;\n}\ndiv.custom-banner .banner-image img {\nwidth: 100%;\nheight: auto; \/* 120px (mobile content height) + 20% *\/\nobject-fit: contain;\nmargin: 0;\nmin-width: 0;\n}\ndiv.custom-banner .banner-text {\npadding: 25px;\npadding-left: 25px;\ntext-align: left;\nalign-items: initial;\n}\ndiv.custom-banner .banner-text .banner-title {\nfont-size: 120%;\nwhite-space: normal;\n}\ndiv.custom-banner .banner-text p {\nfont-size: 80%;\n-webkit-line-clamp: 3;\n}\ndiv.custom-banner .banner-text a {\npadding: 8px 16px;\nalign-self: self-end;\n}\n}\n&lt;\/style><\/code><\/pre>\n\n\n\n<p><strong>Banner v\u1edbi video<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"custom-banner\">\n&lt;div class=\"banner-image\">\n&lt;video autoplay muted loop>\n&lt;source src=\"https:\/\/template.canva.com\/EAGJP2pziIk\/2\/0\/800w-uY3P7LYx4Vc.mp4\" type=\"video\/mp4\">\nTr\u00ecnh duy\u1ec7t c\u1ee7a b\u1ea1n kh\u00f4ng h\u1ed7 tr\u1ee3 video.\n&lt;\/video>\n&lt;\/div>\n&lt;div class=\"banner-text\">\n&lt;span class=\"banner-title\">Kh\u00e1m ph\u00e1 s\u1ea3n ph\u1ea9m m\u1edbi!&lt;\/span>\n&lt;p>\u01afu \u0111\u00e3i \u0111\u1eb7c bi\u1ec7t ch\u1ec9 trong h\u00f4m nay. Nhanh tay \u0111\u1eb7t h\u00e0ng \u0111\u1ec3 nh\u1eadn khuy\u1ebfn m\u00e3i h\u1ea5p d\u1eabn!&lt;\/p>\n&lt;a href=\"https:\/\/hocban.vn\/link-mua\">Mua ngay&lt;\/a>\n&lt;\/div>\n&lt;\/div>\n&lt;style>\ndiv.custom-banner {\ndisplay: flex;\nalign-items: center;\nmax-width: 1024px;\nheight: auto;\nbackground-color: #ffffff;\nborder: 1px solid #e0e0e0;\nbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\noverflow: hidden;\nmargin: 20px auto;\nfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\ntransition: transform 0.2s ease;\nz-index: 10;\n}\ndiv.custom-banner:hover {\ntransform: translateY(-2px);\n}\ndiv.custom-banner .banner-image {\nflex-shrink: 0;\nheight: 100%;\nwidth: 312px;\nmargin-right: 5%;\n}\ndiv.custom-banner .banner-image video {\nwidth: 100%;\nheight: auto;\nobject-fit: contain;\ndisplay: block;\nmargin: 0;\nmin-width: 312px;\n}\ndiv.custom-banner .banner-text {\nflex-grow: 1;\ndisplay: flex;\nflex-direction: column;\njustify-content: center;\npadding: 25px;\npadding-left: 0;\n}\ndiv.custom-banner .banner-text .banner-title {\nfont-size: 130%;\nfont-weight: 600;\nline-height: 1.3;\nmargin: 0;\ncolor: #1a1a1a;\noverflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\ndisplay: block;\n}\ndiv.custom-banner .banner-text p {\nfont-size: 87%;\nfont-weight: normal;\nline-height: 1.4;\nmargin: 4px 0 0;\ncolor: #4a4a4a;\ndisplay: -webkit-box;\n-webkit-line-clamp: 2;\n-webkit-box-orient: vertical;\noverflow: hidden;\n}\ndiv.custom-banner .banner-text a {\ndisplay: inline-block;\nmargin-top: 8px;\npadding: 8px 16px;\nbackground-color: #004aad;\ncolor: #ffffff;\ntext-decoration: none;\nborder-radius: 8px;\nfont-size: 12px;\nfont-weight: 500;\ntransition: background-color 0.2s ease;\nalign-self: flex-start;\nbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\ndiv.custom-banner .banner-text a:hover {\nbackground-color: #003780;\n}\n@media (max-width: 500px) {\ndiv.custom-banner {\nflex-direction: column;\nheight: auto;\npadding: 0;\n}\ndiv.custom-banner .banner-image {\nwidth: 100%;\n}\ndiv.custom-banner .banner-image video {\nwidth: 100%;\nheight: AUTO;\nobject-fit: contain;\nmargin: 0;\nmin-width: 0;\n}\ndiv.custom-banner .banner-text {\npadding: 25px;\npadding-left: 25px;\ntext-align: left;\nalign-items: left;\n}\ndiv.custom-banner .banner-text .banner-title {\nfont-size: 120%;\nwhite-space: normal;\n}\ndiv.custom-banner .banner-text p {\nfont-size: 80%;\n-webkit-line-clamp: 3;\n}\ndiv.custom-banner .banner-text a {\npadding: 8px 16px;\nalign-self: self-end;\n}\n}\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>B\u1ea1n n\u00e0o c\u00f3 nhu c\u1ea7u s\u1eed d\u1ee5ng banner d\u1ecdc (banner \u0111\u1ee9ng) th\u00ec tham kh\u1ea3o b\u00e0i vi\u1ebft tr\u01b0\u1edbc \u0111\u00f3 c\u1ee7a m\u00ecnh: <a href=\"https:\/\/hotro.org\/mau-banner-quang-cao-html-css-responsive-kieu-doc\/\">M\u1eabu banner qu\u1ea3ng c\u00e1o HTML CSS responsive (ki\u1ec3u d\u1ecdc)<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u00e0i vi\u1ebft n\u00e0y Hotro.org chia s\u1ebb \u0111\u1ebfn b\u1ea1n m\u1eabu banner ngang HTML CSS responsive \u0111\u1eb9p m\u1eaft tr\u00ean nhi\u1ec1u k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. B\u1ea1n n\u00e0o th\u1ea5y \u01b0ng th\u00ec copy v\u1ec1 m\u00e0 d\u00f9ng nh\u00e9 ! \u01afu \u0111i\u1ec3m m\u1eabu banner ngang v\u1edbi HTML CSS C\u00e1c nhu c\u1ea7u c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng banner n\u00e0y nh\u01b0: Ch\u00e8n qu\u1ea3ng c\u00e1o v\u00e0o header c\u1ee7a website, ch\u00e8n b\u00ean trong b\u00e0i vi\u1ebft b\u1eb1ng c\u00e1c plugin ch\u00e8n ads (\u0111\u1ea7u, gi\u1eefa, cu\u1ed1i b\u00e0i vi\u1ebft), ch\u00e8n v\u00e0o footer v\u1edbi wiidget HTML CSS r\u1ed9ng r\u00e3i. S\u1eed d\u1ee5ng banner ngang HTML CSS Banner v\u1edbi h\u00ecnh \u1ea3nh R\u1ea5t \u0111\u01a1n gi\u1ea3n, tr\u00ean WordPress b\u1ea1n t\u1ea1o m\u1edbi <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[26,23],"tags":[],"class_list":["post-410","post","type-post","status-publish","format-standard","hentry","category-mien-phi","category-tai-nguyen"],"_links":{"self":[{"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/posts\/410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hotro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=410"}],"version-history":[{"count":2,"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions"}],"predecessor-version":[{"id":414,"href":"https:\/\/hotro.org\/index.php?rest_route=\/wp\/v2\/posts\/410\/revisions\/414"}],"wp:attachment":[{"href":"https:\/\/hotro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hotro.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hotro.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}