ครั้งแรกที่ใช้บล็อก HTML สำหรับส่วนหัวที่กำหนดเองแต่มันดูไม่ดี ช่วยด้วย!
เผยแพร่แล้ว: 2023-08-09สวัสดี!
ฉันกำลังทำงานกับส่วนหัวที่กำหนดเองสำหรับไซต์นี้เนื่องจากเครื่องมือธีมของ Astra ไม่ดีเท่าที่ฉันต้องการ ฉันยังคงเรียนรู้การเขียนโค้ดสำหรับการพัฒนาเว็บและส่วนหัวที่กำหนดเองบน HTML นี้เป็นโครงการหลักของฉันจนถึงตอนนี้
ฉันทำงานกับ Visual Studio Code และ Google Chrome เพื่อแสดงภาพส่วนหัว ฉันคิดว่าแผนที่สมบูรณ์แบบคือนำโค้ด HTML นั้นไปไว้ใน “บล็อก HTML” ใน Header Builder ของการปรับแต่งธีมของ Astra ฉันไม่ได้คาดหวังว่าความกว้างจะถูกจำกัดด้วยบล็อก
**ส่วนหัวของฉันมีเฉพาะโค้ด 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-องค์ประกอบ
ความกว้าง: 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=”ไม่ระบุชื่อ”></script>
<สไตล์>
.cabecera-navbar-อาจารย์ใหญ่
ล้น: ซ่อนเร้น;
สีพื้นหลัง: #fff;
ตระกูลแบบอักษร: มอนต์เซอร์รัต;
.cabecera-navbar-อาจารย์ใหญ่
ลอย: ซ้าย;
ขนาดตัวอักษร: 16px;
น้ำหนักตัวอักษร: 600;
สี: #424242;
การจัดแนวข้อความ: กึ่งกลาง;
การขยาย: 15px 15px;
การตกแต่งข้อความ: ไม่มี;
.cabecera-ดรอปดาวน์
ลอย: ซ้าย;
ล้น: ซ่อนเร้น;
.cabecera-ดรอปดาวน์
เส้นขอบ: ไม่มี;
โครงร่าง: ไม่มี;
สี: #424242;
การขยาย: 14px 16px;
สีพื้นหลัง: สืบทอด;
แบบอักษร: สืบทอด;
ระยะขอบ: 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-เนื้อหา
จอแสดงผล: บล็อก;
.cabecera-คอลัมน์
ลอย: ซ้าย;
ความกว้าง: 19%;
ช่องว่างภายในซ้าย: 10px;
สีพื้นหลัง: #fff;
ความสูง: 450px;
.cabecera-คอลัมน์
ลอย: ไม่มี;
สี: #424242;
การตกแต่งข้อความ: ไม่มี;
จอแสดงผล: บล็อก;
การจัดแนวข้อความ: ซ้าย;
.columnas-marcas
ลอย: ซ้าย;
ความกว้าง: 100%;
ช่องว่างภายในซ้าย: 20px;
ช่องว่างภายในขวา: 20px;
ช่องว่างด้านบน: 20px;
ช่องว่างด้านล่าง: 0px;
สีพื้นหลัง: #fff;
ความสูง: 450px;
ความสูงของเส้น: 0.1;
คอลัมน์: 4;
.columnas-marcas เอ
ลอย: ไม่มี;
สี: #424242;
การตกแต่งข้อความ: ไม่มี;
จอแสดงผล: บล็อก;
การจัดแนวข้อความ: ซ้าย;
.cabecera-row:หลัง
เนื้อหา: "";
จอแสดงผล: ตาราง;
ชัดเจน: ทั้งสอง;
.cabecera-categoria-padre
ขนาดตัวอักษร: 1.17em !สำคัญ;
น้ำหนักตัวอักษร: ตัวหนา !สำคัญ;
ขอบบน: 0.3em;
ขอบล่าง: 1px ทึบ #E3E3E3;
</สไตล์>
<ร่างกาย>
<div class=”cabecera-navbar-principal”>
<div class=”cabecera-ดรอปดาวน์”>
<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-คอลัมน์”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/audio”>เสียง</a>
<a href=”/categoria-producto/audio/accesorios-audio”>ACCESORIOS</a>
<a href=”/categoria-producto/audio/audifonos”>AUDIFONOS</a>
<a href=”/categoria-producto/audio/barras-de-sonido”>บาร์รัส เดอ โซนิโด</a>
<a href=”/categoria-producto/audio/bocinas”>โบซินาส</a>
<a href=”/categoria-producto/audio/sistemas-de-audio”>ระบบเสียง</a>
</div>
<div class=”cabecera-คอลัมน์”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/electronica”>อิเล็กทรอนิกส์</a>
<a href=”/categoria-producto/electronica/accesorios-electronica”>ACCESORIOS</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-คอลัมน์”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/hogar”>โฮการ์</a>
<a href=”/categoria-producto/hogar/calentadores”>CALENTADORES</a>
<a href=”/categoria-producto/hogar/colchones”>โคลโชเนส</a>
<a href=”/categoria-producto/hogar/planchas-vapor-aspiradoras”>PLANCHAS DE VAPOR / แอสพิราโดราส</a>
<a href=”/categoria-producto/hogar/ventiladores”>เวนติลาโดเรส</a>
</div>
<div class=”cabecera-คอลัมน์”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/linea-blanca”>LINEA บลังก้า</a>
<a href=”/categoria-producto/linea-blanca/cafeteras”>ร้านกาแฟ</a>
<a href=”/categoria-producto/linea-blanca/congeladores”>คอนเจลลาโดเรส</a>
<a href=”/categoria-producto/linea-blanca/freidoras-hornos”>ฟรีโดราส / ฮอร์นอส</a>
<a href=”/categoria-producto/linea-blanca/licuadoras”>LICUADORAS</a>
<a href=”/categoria-producto/linea-blanca/parrillas”>พาร์ริลลาส</a>
<a href=”/categoria-producto/linea-blanca/procesador-alimentos-ollas”>ตัวประมวลผลเดลิเมนโตส / โอลลาส</a>
<a href=”/categoria-producto/linea-blanca/tostadoras”>ทอสตาโดรัส</a>
</div>
<div class=”cabecera-คอลัมน์”>
<a class=”cabecera-categoria-padre” href=”/categoria-producto/video”>วิดีโอ</a>
<a href=”/categoria-producto/video/accesorios-video”>อุปกรณ์เสริม</a>
<a href=”/categoria-producto/video/pantallas”>กางเกงใน</a>
<a href=”/categoria-producto/video/reproductores-dvd”>สร้างดีวีดี</a>
</div>
</div>
</div>
</div>
<div class=”cabecera-ดรอปดาวน์”>
<button class=”cabecera-dropbtn”>MARCAS <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 แลนซิง</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”>บิวตี้เรสต์</a>
<a href=”/categoria-producto/marca/black-n-decker”>แบล็คแอนด์เด็คเกอร์</a>
<a href=”/categoria-producto/marca/blackweb”>แบล็คเว็บ</a>
<a href=”/categoria-producto/marca/element”>องค์ประกอบ</a>
<a href=”/categoria-producto/marca/elite”>ELITE</a>
<a href=”/categoria-producto/marca/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”>HISENSE</a>
<a href=”/categoria-producto/marca/hunterspider”>ฮันเตอร์สไปเดอร์</a>
<a href=”/categoria-producto/marca/innovative-technology”>เทคโนโลยีที่เป็นนวัตกรรม</a>
<a href=”/categoria-producto/marca/instant-vortex”>กระแสน้ำวนทันที</a>
<a href=”/categoria-producto/marca/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”>แอลจี</a>
<a href=”/categoria-producto/marca/majority”>ส่วนใหญ่</a>
<a href=”/categoria-producto/marca/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”>นิวทริบุลเล็ต</a>
<a href=”/categoria-producto/marca/onn”>ONN</a>
<a href=”/categoria-producto/marca/pelonis”>เปโลนิส</a>
<a href=”/categoria-producto/marca/powerxl”>POWERXL</a>
<a href=”/categoria-producto/marca/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”>ฉลาม</a>
<a href=”/categoria-producto/marca/sony”>โซนี่</a>
<a href=”/categoria-producto/marca/speedy-cook”>ทำอาหารเร็ว</a>
<a href=”/categoria-producto/marca/steelpro”>STEELPRO</a>
<a href=”/categoria-producto/marca/tcl”>ทีซีแอล</a>
<a href=”/categoria-producto/marca/venturer”>เวนเจอร์</a>
<a href=”/categoria-producto/marca/vissani”>วิสซานี</a>
<a href=”/categoria-producto/marca/vivitar”>วิวิทาร์</a>
<a href=”/categoria-producto/marca/vizio”>VIZIO</a>
<a href=”/categoria-producto/marca/westinghouse”>เวสติ้งเฮาส์</a>
</div>
</div>
</div>
</div>
<a href=”/ayuda”>อยุดะ</a>
<a href=”/contacto”>ติดต่อ</a>
</div>
</ร่างกาย>
</หัว>
</html>
