时间戳

首页 > 解决方案 > 如何使用 HTML 和 CSS 在网站顶部制作此特定导航菜单？

html - 如何使用 HTML 和 CSS 在网站顶部制作此特定导航菜单？

问题描述

我正在学习如何使用 HTML 和 CSS。我想在页面顶部制作一个导航菜单。我附上了我希望它看起来像的参考。我有红色背景图片，但我想知道如何将 href 链接文本置于每张图片的中心。这是我希望菜单看起来的样子 这是我开始编写的代码。

    <ul class="navigation-bar">

                <li>
                    <div class="tabs">
                        <img src=". . ." alt="home"/>
                        <a class="link" href="#">Home</a>
                    </div>
                </li>
                <li>
                    <div class="tabs">
                        <img src=". . ." alt="support"/>
                        <a class="link" href="#">Support</a>
                    </div>
                </li>
                <li>
                    <div class="tabs">
                        <img src=". . ." alt="contact"/>
                        <a class="link" href="#">Contact</a>
                    </div>
                </li>
            </ul>

标签： htmlcss

解决方案

最好的方法是通过 CSS 将背景图像添加到 div 并从 div 中删除 img 标签。

 <div class="tabs" id="div1"> <! -- id to identify the div -->
        <a class="link" href="#">Home</a> <! -- make sure to add text align center -->
 </div>                 

#div1{
   background-image: url("your image here");
}

推荐阅读