Question

所以，我想制作一个这样的菜单：

http://i.stack.imgur.com/gfew2.png

BUT !!!!我做不到=（看看我的代码：

CSS：

 .abas {
background-color: rgba(100, 100, 100, 0.0);
height: 70px;
width: 1024px;
color: #616161;
font-size: 20px;
margin:0 auto;
text-align: center;
font-family: 'Roboto Slab Light', serif;
}

 .csq {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
} 

 a { color: inherit; }

HTML：

<div class="abas"><div class="csq">
<a href="loja.html">LOJA</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="catalogo.html">CATÁLOGO</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="revenda.html">REVENDA!</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="contato.html">CONTATO</a>
<img src="Barratopo_assets/Bolinha.png">
<a href="sobre.html">SOBRE NÓS</a>
</div></div>

然后它看起来像这样：

http://i.imgur.com/aCmpnhv.png

我猜我的代码很乱，但是......我是这个html / css / thing世界的新手，所以......你能帮助我吗？（我也是这个英国世界的新人，抱歉; - ;）

哦，我想把“Loja”项目作为一个下拉菜单，所以......如果你能帮助我，我也会非常感激c：

字典： Loja：商店--- Catálogo：目录--- Revenda！：转售！ --- 联系方式：联系方式--- Sobrenós：关于我们--- Bolinha.png：那个小红圈

Answer 1

检查此小提琴是否有链接和图片之间的间距：https://jsfiddle.net/ghysnxj7/1/，只需添加属性为img的课程margin: 0 56px;即可。

关于下拉列表，可以通过Javascript实现，但由于您不熟悉HTML / CSS，我强烈建议首先将这两者的基本内容放下来。

https://www.codecademy.com/es中有很多教程！

包含图片和菜单的菜单

1 个答案: