{"id":1099,"date":"2025-12-31T17:29:42","date_gmt":"2025-12-31T09:29:42","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=1099"},"modified":"2025-12-31T17:29:42","modified_gmt":"2025-12-31T09:29:42","slug":"%e7%bd%91%e7%ab%99banner","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/31\/%e7%bd%91%e7%ab%99banner\/","title":{"rendered":"\u7f51\u7ad9banner"},"content":{"rendered":"\n<p>\u4f60\u8bf4\u7684 <strong>\u201c\u7f51\u7ad9 banner\u201d<\/strong>\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u7f51\u7ad9\u9996\u9875\u6216\u9875\u9762\u9876\u90e8\u7684 <strong>\u6a2a\u5e45\u5e7f\u544a\u3001\u6a2a\u5411\u5ba3\u4f20\u56fe\u6216\u9876\u90e8\u5927\u56fe\u533a\u57df<\/strong>\u3002\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>banner \u7684\u5b9a\u4e49\u3001\u7c7b\u578b\u3001\u8bbe\u8ba1\u8981\u70b9\u548c\u524d\u7aef\u5b9e\u73b0\u65b9\u6cd5<\/strong>\uff0c\u65b9\u4fbf\u4f60\u76f4\u63a5\u505a\u7f51\u9875\u6216\u8005\u7ed9\u8bbe\u8ba1\u5e08\/\u524d\u7aef\u53c2\u8003\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u3001\u7f51\u7ad9 Banner \u5b9a\u4e49<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Banner<\/strong>\uff1a\u7f51\u9875\u9876\u90e8\u6216\u7279\u5b9a\u533a\u57df\u7684\u5927\u56fe\/\u5e7f\u544a\u4f4d<\/li>\n\n\n\n<li>\u4f5c\u7528\uff1a\n<ul class=\"wp-block-list\">\n<li>\u5c55\u793a\u7f51\u7ad9\u4e3b\u89c6\u89c9\u6216\u54c1\u724c<\/li>\n\n\n\n<li>\u5ba3\u4f20\u6d3b\u52a8\u3001\u4ea7\u54c1\u3001\u4f18\u60e0\u4fe1\u606f<\/li>\n\n\n\n<li>\u5438\u5f15\u7528\u6237\u70b9\u51fb\u3001\u63d0\u5347\u8f6c\u5316\u7387<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001\u5e38\u89c1\u7c7b\u578b<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u7c7b\u578b<\/th><th>\u7279\u70b9<\/th><th>\u4f7f\u7528\u573a\u666f<\/th><\/tr><\/thead><tbody><tr><td>\u9759\u6001 Banner<\/td><td>\u5355\u5f20\u56fe\u7247<\/td><td>\u9996\u9875\u4e3b\u56fe\u3001\u6d3b\u52a8\u5ba3\u4f20<\/td><\/tr><tr><td>\u8f6e\u64ad Banner<\/td><td>\u591a\u5f20\u56fe\u7247\u5faa\u73af\u5207\u6362<\/td><td>\u591a\u6d3b\u52a8\u5c55\u793a\u3001\u4ea7\u54c1\u63a8\u8350<\/td><\/tr><tr><td>\u89c6\u9891 Banner<\/td><td>\u80cc\u666f\u89c6\u9891 + \u6587\u6848<\/td><td>\u9ad8\u7aef\u54c1\u724c\u5c55\u793a\u3001\u5f71\u89c6\u7f51\u7ad9<\/td><\/tr><tr><td>\u52a8\u6001\u4ea4\u4e92 Banner<\/td><td>\u9f20\u6807\u60ac\u505c \/ \u6eda\u52a8\u52a8\u753b<\/td><td>\u6e38\u620f\u7f51\u7ad9\u3001\u521b\u610f\u8bbe\u8ba1\u7f51\u7ad9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001Banner \u8bbe\u8ba1\u8981\u70b9<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5c3a\u5bf8\u6bd4\u4f8b<\/strong>\n<ul class=\"wp-block-list\">\n<li>PC\uff1a\u5e38\u89c1 1920x600px \u6216 1200x400px<\/li>\n\n\n\n<li>\u79fb\u52a8\u7aef\uff1a\u5e38\u89c1 750x300px\uff08\u81ea\u9002\u5e94\u5c4f\u5e55\u5bbd\u5ea6\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u89c6\u89c9\u5c42\u6b21<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4e3b\u56fe \u2192 \u6807\u9898 \u2192 \u526f\u6807\u9898 \u2192 \u6309\u94ae CTA\uff08Call To Action\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6587\u5b57\u53ef\u8bfb\u6027<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u907f\u514d\u6587\u5b57\u4e0e\u80cc\u666f\u51b2\u7a81<\/li>\n\n\n\n<li>\u53ef\u52a0\u534a\u900f\u660e\u906e\u7f69\u6216\u6587\u5b57\u63cf\u8fb9<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u52a0\u8f7d\u901f\u5ea6<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u56fe\u7247\u538b\u7f29\uff08WebP \/ JPEG\uff09<\/li>\n\n\n\n<li>\u63a7\u5236\u5355\u5f20\u56fe\u7247\u5927\u5c0f \u2264 200KB<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 <code>max-width: 100%<\/code> \u6216 <code>object-fit: cover<\/code><\/li>\n\n\n\n<li>\u4fdd\u8bc1\u79fb\u52a8\u7aef\u53ef\u8bfb\u6027<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001\u524d\u7aef\u5b9e\u73b0\u793a\u4f8b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1\ufe0f\u20e3 \u9759\u6001 Banner<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;banner&quot;&gt;\n  &amp;lt;img src=&quot;banner.jpg&quot; alt=&quot;\u7f51\u7ad9\u6a2a\u5e45&quot;&gt;\n  &amp;lt;div class=&quot;banner-text&quot;&gt;\n    &amp;lt;h1&gt;\u6b22\u8fce\u8bbf\u95ee\u6211\u4eec\u7684\u7f51\u7ad9&amp;lt;\/h1&gt;\n    &amp;lt;p&gt;\u6700\u65b0\u6d3b\u52a8\u4f18\u60e0\uff0c\u7acb\u5373\u53c2\u4e0e\uff01&amp;lt;\/p&gt;\n    &amp;lt;a href=&quot;\/activity&quot; class=&quot;btn&quot;&gt;\u7acb\u5373\u67e5\u770b&amp;lt;\/a&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.banner {\n  position: relative;\n  width: 100%;\n  height: 400px;\n  overflow: hidden;\n}\n.banner img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.banner-text {\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translateY(-50%);\n  color: white;\n}\n.btn {\n  display: inline-block;\n  padding: 10px 20px;\n  background: #ff6600;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 4px;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2\ufe0f\u20e3 \u8f6e\u64ad Banner\uff08\u7b80\u6613 JS \u5b9e\u73b0\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;div class=&quot;carousel&quot;&gt;\n  &amp;lt;img src=&quot;banner1.jpg&quot; class=&quot;active&quot;&gt;\n  &amp;lt;img src=&quot;banner2.jpg&quot;&gt;\n  &amp;lt;img src=&quot;banner3.jpg&quot;&gt;\n&amp;lt;\/div&gt;\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.carousel img {\n  width: 100%;\n  display: none;\n}\n.carousel img.active {\n  display: block;\n}\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nlet index = 0;\nconst images = document.querySelectorAll(&#039;.carousel img&#039;);\n\nsetInterval(() =&gt; {\n  images&#x5B;index].classList.remove(&#039;active&#039;);\n  index = (index + 1) % images.length;\n  images&#x5B;index].classList.add(&#039;active&#039;);\n}, 3000);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3\ufe0f\u20e3 \u54cd\u5e94\u5f0f\u5efa\u8bae<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@media (max-width: 768px) {\n  .banner-text {\n    font-size: 14px;\n    left: 5%;\n  }\n  .banner {\n    height: 250px;\n  }\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u5de5\u5177\u63a8\u8350<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8bbe\u8ba1\u5de5\u5177<\/strong>\uff1aFigma \/ Photoshop \/ Illustrator<\/li>\n\n\n\n<li><strong>\u56fe\u7247\u538b\u7f29<\/strong>\uff1aTinyPNG \/ Squoosh<\/li>\n\n\n\n<li><strong>\u8f6e\u64ad\u63d2\u4ef6<\/strong>\uff1aSwiper.js \/ Slick.js<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u4e00\u53e5\u8bdd\u603b\u7ed3<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u7f51\u7ad9 Banner = \u7f51\u7ad9\u89c6\u89c9\u5165\u53e3\uff0c\u65e2\u8981\u7f8e\u89c2\uff0c\u4e5f\u8981\u517c\u987e\u54cd\u5e94\u5f0f\u4e0e\u52a0\u8f7d\u901f\u5ea6\uff0c\u53ef\u7528\u9759\u6001\u56fe\u3001\u8f6e\u64ad\u56fe\u6216\u89c6\u9891\u5f62\u5f0f\u5448\u73b0\u3002<\/strong><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u4f60\u8bf4\u7684 \u201c\u7f51\u7ad9 banner\u201d\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u7f51\u7ad9\u9996\u9875\u6216\u9875\u9762\u9876\u90e8\u7684 \u6a2a\u5e45\u5e7f\u544a\u3001\u6a2a\u5411\u5ba3&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/31\/%e7%bd%91%e7%ab%99banner\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1099","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1099\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1099\/revisions\/1100"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=1099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=1099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}