第一次使用 HTML 區塊作為自訂標頭，它看起來不太好，請幫忙！

已發表: 2023-08-09

你好！

我正在為這個網站使用自訂標題，因為 Astra 的主題工具沒有我想要的那麼好。我仍在學習為 Web 開發編寫程式碼，並且 HTML 上的這個自訂標頭是我迄今為止的主要專案。

我使用 Visual Studio Code 和 Google Chrome 來視覺化標題。我認為完美的計劃是將 HTML 程式碼放入 Astra 主題自訂的標頭產生器中的「HTML 區塊」中。沒想到寬度會受到塊的限制。

**我的標題只有 HTML 程式碼：**

https://preview.redd.it/utzxl0x72zgb1.jpg?width=1280&format=pjpg&auto=webp&s=b94fa14910bcc4ff18efa230f0d37566477a78f5

**我在網站上的標頭位於標頭建構器的 HTML 區塊內：**

https://preview.redd.it/9t43ltau2zgb1.jpg?width=1280&format=pjpg&auto=webp&s=81e6f66097e0a81c0caa4a4ed8019c10b0348c3d

經過一些研究後，我發現了一些 CSS 程式碼來「解決」這個問題，但它根本沒有解決這個問題。它給我帶來了更多的問題。我使用了下一個程式碼：

.ast-builder-html-element
寬度：100vw；

**現在標題看起來像這樣：**

https://preview.redd.it/9g39m78m3zgb1.jpg?width=1280&format=pjpg&auto=webp&s=353e40e49bea0532f8c962f5d4b73e660ae59e1e

右側的元素消失了，「CONTACTO」方塊稍微移動到底部。

編輯：我解決了“CONTACTO”移動到底部的問題，它是由 <br> 標籤引起的。我用CSS刪除了它們，這樣問題就解決了！

所以為什麼？

我不知道我的 HTML 程式碼是否有問題，或者是使用 HTML 區塊出現的問題，我應該以其他方式執行此操作。我完全迷路了。

我將非常感謝任何幫助！

**我分享我的標題 HTML 程式碼：**

<html>
<頭>
<script src=”https://kit.fontawesome.com/4d7716fb70.js” crossorigin=”anonymous”></script>
<風格>
.cabecera-navbar-principal
溢出：隱藏；
背景顏色：#fff；
字體系列：蒙特塞拉特；

.cabecera-navbar-校長
向左飄浮;
字體大小：16px；
字體粗細：600；
顏色：#424242；
文字對齊：居中；
內邊距：15px 15px；
文字裝飾：無；

.cabecera-下拉式選單
向左飄浮;
溢出：隱藏；

.cabecera-dropdown .cabecera-dropbtn
邊框：無；
概要：無；
顏色：#424242；
內邊距：14 像素 16 像素；
背景顏色：繼承；
字體：繼承；
保證金：0；
字體粗細：600；

.cabecera-navbar-principal a:hover, .cabecera-dropdown:hover .cabecera-dropbtn
顏色：#003398；

.cabecera-下拉內容
顯示：無；
位置：絕對；
背景顏色：#fff；
寬度：100%；
左：0；
頂部邊框：2px 實線#0080ff；
框陰影：0px 8px 16px 0px rgba(0,0,0,0.2);
z 索引：1；

.cabecera-dropdown:懸停 .cabecera-dropdown-content
顯示：塊；

.cabecera-column
向左飄浮;
寬度：19%；
左內邊距：10px；
背景顏色：#fff；
高度：450 像素；

.cabecera-a 列
浮動：無；
顏色：#424242；
文字裝飾：無；
顯示：塊；
文字對齊：左對齊；

.columnas-marcas
向左飄浮;
寬度：100%；
左內邊距：20px；
右內邊距：20px；
頂部內邊距：20px；
底部填充：0px；
背景顏色：#fff；
高度：450 像素；
行高：0.1；
列：4；

.columnas-marcas a
浮動：無；
顏色：#424242；
文字裝飾：無；
顯示：塊；
文字對齊：左對齊；

.cabecera-row：之後
內容： ””;
顯示：表；
明確：兩者；

.cabecera-categoria-padre
字體大小：1.17em！重要；
字體粗細：粗體！重要；
上邊距：0.3em；
邊框底部：1px實心#E3E3E3；

</風格>
<正文>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn” onclick=”window.location.href='/productos'”>產品 <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242; ”></i></按鈕>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>音頻</a>
<a href=”/categoria-producto/audio/accesorios-audio”>配件</a>
<a href=”/categoria-producto/audio/audifonos”>AUDIFONOS</a>
<a href=”/categoria-producto/audio/barras-de-sonido”>BARRAS DE SONIDO</a>
<a href=”/categoria-producto/audio/bocinas”>BOCINAS</a>
<a href=”/categoria-producto/audio/sistemas-de-audio”>音響系統</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/Electronica”>電子</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>配件</a>
<a href=”/categoria-producto/Electronica/consolas”>CONSOLAS</a>
<a href=”/categoria-producto/Electronica/drones”>無人機</a>
<a href=”/categoria-producto/Electronica/tablets”>平板電腦</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>HOGAR</a>
<a href=”/categoria-producto/hogar/calentadores”>CALENTADORES</a>
<a href=”/categoria-producto/hogar/colchones”>COLCHONES</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / ASPIRADORAS</a>
<a href=”/categoria-producto/hogar/ventiladores”>VENTILADORES</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA BLANCA</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>咖啡館</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>CONGELADORES</a>
<a href=”/categoria-producto/linea-blanca/freidoras-hornos”>FREIDORAS / HORNOS</a>
<a href=”/categoria-producto/linea-blanca/licuadoras”>LICUADORAS</a>
<a href=”/categoria-producto/linea-blanca/parrillas”>PARRILLAS</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>PROCESADOR DE ALIMENTOS / OLLAS</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>TOSTADORAS</a>
</div>
<div class=”cabecera-column”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>影片</a>
<a href=”/categoria-producto/video/accesorios-video”>配件</a>
<a href=”/categoria-producto/video/pantallas”>PANTALLAS</a>
<a href=”/categoria-producto/video/reproductores-dvd”>REPRODUCTORES DVD</a>
</div>
</div>
</div>
</div>
<div class=”cabecera-dropdown”>
<button class=”cabecera-dropbtn”>馬卡斯 <i class=”fa-sharp fa-solid fa-chevron-down” style=”color: #424242;”></i></button>
<div class=”cabecera-dropdown-content”>
<div class=”cabecera-row”>
<div class=”columnas-marcas”>
<a href=”/categoria-producto/marca/aiwa”>AIWA</a>
<a href=”/categoria-producto/marca/altec-lansing”>ALTEC LANSING</a>
<a href=”/categoria-producto/marca/alux”>ALUX</a>
<a href=”/categoria-producto/marca/arctic-king”>北極王</a>
<a href=”/categoria-producto/marca/aroma”>芳香</a>
<a href=”/categoria-producto/marca/atvio”>ATVIO</a>
<a href=”/categoria-producto/marca/backyard-grill”>後院燒烤</a>
<a href=”/categoria-producto/marca/beautyrest”>BEAUTYREST</a>
<a href=”/categoria-producto/marca/black-n-decker”>BLACK & DECKER</a>
<a href=”/categoria-producto/marca/blackweb”>BLACKWEB</a>
<a href=”/categoria-producto/marca/element”>ELEMENT</a>
<a href=”/categoria-producto/marca/elite”>精英</a>
<a href=”/categoria-producto/marca/emeril-lagasse”>EMERIL LAGASSE</a>
<a href=”/categoria-producto/marca/farberware”>FARBERWARE</a>
<a href=”/categoria-producto/marca/ge”>GE</a>
<a href=”/categoria-producto/marca/generico”>GENERICO</a>
<a href=”/categoria-producto/marca/hamilton-beach”>漢密爾頓海灘</a>
<a href=”/categoria-producto/marca/hisense”>海信</a>
<a href=”/categoria-producto/marca/hunterspider”>HUNTERSPIDER</a>
<a href=”/categoria-producto/marca/innovative-technology”>創新技術</a>
<a href=”/categoria-producto/marca/instant-vortex”>即時渦流</a>
<a href=”/categoria-producto/marca/jungletac”>JUNGLETAC</a>
<a href=”/categoria-producto/marca/kvision”>K-VISION</a>
<a href=”/categoria-producto/marca/kempler-n-strauss”>肯普勒和施特勞斯</a>
<a href=”/categoria-producto/marca/lg”>LG</a>
<a href=”/categoria-producto/marca/majority”>多數</a>
<a href=”/categoria-producto/marca/maximatic”>MAXIMATIC</a>
<a href=”/categoria-producto/marca/microsoft”>微軟</a>
<a href=”/categoria-producto/marca/momentum”>動量</a>
<a href=”/categoria-producto/marca/ninja”>忍者</a>
<a href=”/categoria-producto/marca/nutribullet”>NUTRIBULLET</a>
<a href=”/categoria-producto/marca/onn”>ONN</a>
<a href=”/categoria-producto/marca/pelonis”>PELONIS</a>
<a href=”/categoria-producto/marca/powerxl”>POWERXL</a>
<a href=”/categoria-producto/marca/rca”>RCA</a>
<a href=”/categoria-producto/marca/ridgeway”>RIDGEWAY</a>
<a href=”/categoria-producto/marca/rival”>RIVAL</a>
<a href=”/categoria-producto/marca/samsung”>三星</a>
<a href=”/categoria-producto/marca/shark”>SHARK</a>
<a href=”/categoria-producto/marca/sony”>Sony</a>
<a href=”/categoria-producto/marca/speedy-cook”>快速烹飪</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>TCL</a>
<a href=”/categoria-producto/marca/venturer”>冒險家</a>
<a href=”/categoria-producto/marca/vissani”>VISSANI</a>
<a href=”/categoria-producto/marca/vivitar”>VIVITAR</a>
<a href=”/categoria-producto/marca/vizio”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>西屋</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>AYUDA</a>
<a href=”/contacto”>聯絡方式</a>
</div>
</正文>
</頭>
</html>