Html 添加到徽标的链接将添加到整个导航栏的链接_Html_Css

Html 添加到徽标的链接将添加到整个导航栏的链接

html css

Html 添加到徽标的链接将添加到整个导航栏的链接,html,css,Html,Css,我在导航栏上添加了一个指向徽标（图像）的链接，但是当我转到页面时，除了链接之外，整个导航栏都变成了链接。如何使其仅适用于图像根据评论，我已经用CSS和JS更新了代码。我对web开发非常陌生，这可能解释了我缺乏知识和过度使用CSS的原因形象函数navHamburger（）{ var x=document.getElementById（“导航链接”）；如果（x.style.display==“块”）{ x、 style.display=“无”； }否则{ x、 style.display=

我在导航栏上添加了一个指向徽标（图像）的链接，但是当我转到页面时，除了链接之外，整个导航栏都变成了链接。如何使其仅适用于图像

根据评论，我已经用CSS和JS更新了代码。我对web开发非常陌生，这可能解释了我缺乏知识和过度使用CSS的原因

形象

函数navHamburger（）{
var x=document.getElementById（“导航链接”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

nav{
背景色：#fff；
}
.导航行{
/*保证金：0*/
溢出：隐藏；
位置：相对位置；
填充：10px；
}
.导航行#导航链接{
显示：无；
}
.导航a排{
颜色：#0075b2；
文字装饰：无；
字号：500；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
文本对齐：居中；
文本转换：大写；
填充：20px；
}
.导航行a.图标{
字体大小：200%；
显示：块；
位置：绝对位置；
右：0；
排名：0；
边缘顶部：0.1米；
右边距：25px；
}
.导航a行：悬停{
颜色：19afff；
}
.主导航{
文字装饰：无；
列表样式：无；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
}
.手机菜单{
文字装饰：无；
列表样式：无；
}
.主导航李a：链接，
.主导航李a：已访问{
颜色：#0075b2；
文字装饰：无；
文本转换：大写；
字体大小：150%；
字号：500；
填充：4px；
}
主导航李a：悬停，
.主导航李a：激活{
边框顶部：2个实心#b36500；
边框底部：2个实心#b36500；
-webkit转换：边框底部0.2s；
-o型过渡：边界底部0.2s；
过渡：边界底部0.2s；
}
@介质（最小宽度：601px）{
.手机菜单{
显示：无；
}
}
.桌面菜单{
显示：无；
右：0；
排名：0；
}
@介质（最小宽度：601px）{
.桌面菜单{
显示：块；
位置：绝对位置；
边缘顶部：30px；
右边距：10px；
}
.导航行{
右边距：20px；
}
.导航a排{
左边距：20px；
}
}
@介质（最小宽度：901px）{
.桌面菜单{
边缘顶部：50px；
右边距：10px；
}
}
@介质（最小宽度：1290px）{
.桌面菜单{
利润上限：70像素；
右边距：10px；
}
}

只需在锚定标记内插入旅游图像标记，如下所示：

Text

只需在锚定标记内插入旅游图像标记，如下所示：

Text

您正在对主

nav

类使用

flex

，该类采用完整的内联值：

嬉戏

nav{
背景色：#fff；
}
.导航行{
/*保证金：0*/
溢出：隐藏；
位置：相对位置；
填充：10px；
}
.导航行#导航链接{
显示：无；
}
img{
高度：100px；
宽度：100px；
}
.导航a排{
颜色：#0075b2；
文字装饰：无；
字号：500；
文本对齐：居中；
文本转换：大写；
填充：20px；
}
.导航行a.图标{
字体大小：200%；
显示：块；
位置：绝对位置；
右：0；
排名：0；
边缘顶部：0.1米；
右边距：25px；
}
.导航a行：悬停{
颜色：19afff；
}
.主导航{
文字装饰：无；
列表样式：无；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
}
.手机菜单{
文字装饰：无；
列表样式：无；
}
.主导航李a：链接，
.主导航李a：已访问{
颜色：#0075b2；
文字装饰：无；
文本转换：大写；
字体大小：150%；
字号：500；
填充：4px；
}
主导航李a：悬停，
.主导航李a：激活{
边框顶部：2个实心#b36500；
边框底部：2个实心#b36500；
-webkit转换：边框底部0.2s；
-o型过渡：边界底部0.2s；
过渡：边界底部0.2s；
}
@介质（最小宽度：601px）{
.手机菜单{
显示：无；
}
}
.桌面菜单{
显示：无；
右：0；
排名：0；
}
@介质（最小宽度：601px）{
.桌面菜单{
显示：块；
位置：绝对位置；
边缘顶部：30px；
右边距：10px；
}
.导航行{
右边距：20px；
}
.导航a排{
左边距：20px；
}
}
@介质（最小宽度：901px）{
.桌面菜单{
边缘顶部：50px；
右边距：10px；
}
}
@介质（最小宽度：1290px）{
.桌面菜单{
利润上限：70像素；
右边距：10px；
}
}

您正在对主

nav

类使用

flex

，该类采用完整的内联值：

嬉戏

nav{
背景色：#fff；
}
.导航行{
/*保证金：0*/
溢出：隐藏；
位置：相对位置；
填充：10px；
}
.导航行#导航链接{
显示：无；
}
img{
高度：100px；
宽度：100px；
}
.导航a排{
颜色：#0075b2；
文字装饰：无；
字号：500；
文本对齐：居中；
文本转换：大写；
填充：20px；
}
.导航行a.图标{
字体大小：200%；
显示：块；
位置：绝对位置；
右：0；
排名：0；
边缘顶部：0.1米；
右边距：25px；
}
.导航a行：悬停{
颜色：19afff；
}
.主导航{
文字装饰：无；
列表样式：无；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
-ms柔性方向：行；
弯曲方向：行；
}
.手机菜单{
文本
<!DOCTYPE html>
<html>

<head>
    <style>
        .logo-link {
            display: flex;
            cursor: pointer
        }

        .logo-link img {
            max-height: 200px;
        }
    </style>
</head>

<body>
    <nav>
        <a class="logo-link" href=""><img
                src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
        <div>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
            </ul>
        </div>
    </nav>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <style>
        nav {
            width: 100%;
            height: 100px;
            background-color: bisque;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        nav .align-left {
            margin-left: 10px;
            margin-right: auto;
            height: 90%;
        }

        nav .align-right {
            margin-left: auto;
            margin-right: 10px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            width: 11%;
            height: 20%;

        }

        nav .logo-link>img {
            height: 100%;
        }
    </style>
</head>

<body>
    <nav>
        <div class="align-left">
            <a class="logo-link" href=""><img
                    src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
        </div>
        <div class="align-right">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div>
    </nav>
</body>

</html>