个人网页index页面div无法显示问题求助，求代码优化建议

一、div无法显示的核心原因及修复 #

你那些div看不到，是因为**color属性只管文本颜色，空div没内容，就算设了color也不会有任何显示**。另外你#div2里的.cuadros完全没加样式，自然也看不到。

修复后的CSS代码 #

.inicio {
height: 85vh;
width: 100%;
background-image: url("./imgs/PS2-Alfabetajuega.webp");
background-repeat: no-repeat;
background-size: cover;
opacity: 80%;
background-position: center;
/* 加相对定位，让内部div能基于它定位 */
position: relative;
}

#div1 {
height: 15px;
width: 15px;
/* 把color换成background-color，空div才能显示色块 */
background-color: #1eff00;
/* 定位到背景图上方的指定位置 */
position: absolute;
top: 20px;
left: 20px;
}

#div2 {
height: auto;
width: fit-content;
position: absolute;
top: 50px;
left: 20px;
/* flex布局让四个小div横向排列 */
display: flex;
gap: 10px;
}

.cuadros {
height: 30px;
width: 30px;
background-color: #333333;
}

简单说明：

• 给.inicio加position: relative，内部用absolute定位的div就不会乱跑，只会在背景图区域内移动
• 把color改成background-color，空div就能显示出你要的颜色块
• 给.cuadros补上宽高和背景色，四个小方块立刻就能看到
• 调整#div2的宽高，配合flex布局让小方块横向排列更整齐

二、新手友好的代码优化建议 #

HTML部分 #

1. 给header和nav的父div加个类名（比如.header-nav-wrap），后续统一调整布局更方便
2. 把nav里的链接改成列表结构，语义化更好，搜索引擎也更喜欢：

<nav>
  <ul class="nav-list">
    <li><a href="./prereq.html" class="links">Pre-requisitos</a></li>
    <li><a href="./descargas.html" class="links">Descargas</a></li>
    <li><a href="./freedvdbootcomp.html" class="links">Compatibilidad FreeDVDBoot</a></li>
    <li><a href="./juegos.html" class="links">Top 10 juegos PS2</a></li>
  </ul>
</nav>

CSS部分 #

1. 先加全局初始化样式，消除浏览器默认的边距、内边距差异：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

2. 给导航链接加hover效果，提升页面交互感：

.links {
text-decoration: none;
color: #333;
padding: 8px 16px;
transition: background-color 0.3s;
}

.links:hover {
background-color: #eee;
border-radius: 4px;
}

3. 调整标题和logo的布局，用flex让它们横向对齐更美观：

.cabecera {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
color: #333;
}

.logo {
height: 60px;
width: auto;
/* 避免logo太大撑乱布局 */
max-width: 120px;
}

内容的提问来源于stack exchange，提问作者user22035029