gpt4 book ai didi

jquery - 如何将列表与图像对齐,以及 jquery 问题

转载 作者:太空宇宙 更新时间:2023-11-04 12:35:01 24 4
gpt4 key购买 nike

所以,我在代码中遇到了两个问题:

  1. 我不知道如何在我的 Logo 后面对齐我的菜单。我试着用

    显示:内联;

但是没有效果。

  1. 我希望我的菜单元素在悬停时获得更粗的边框,但我似乎无法让它工作。

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
</head>

<body>

<div class="navigation">

<a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo" width="20%" height="20%"></a>

<div class="menu">
<ul>
<li class="menu-item"><a href="#home" class="menu-item">Home</a></li>
<li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a></li>
<li class="menu-item"><a href="#about" class="menu-item">About Me</a></li>
<li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a></li>
</ul>
</div>

</div>



<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.menu-item').hover(function(){
$(this).addClass("active-menu");
},function(){
$(this).removeClass("active-menu");
});

})

</script>
</body>
</html>

CSS:

@charset:"UTF-8";

body {
background-image: url(../images/background.png);
}

.menu ul {
list-style-type: none;
}

.menu li {
font-family: 'Open Sans', sans-serif;
display: inline;
}

.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
margin: 5px;
border-bottom: 1px solid #0A0F2D;
}

.active-menu {
border-bottom: 5px;
}

.logo {
margin-left: 20px;
}

JSFIDDLE

最佳答案

进行这些更改,查看下面的输出

$(document).ready(function () {

$('.menu-item').hover(function () {
$(this).addClass("active-menu");
}, function () {
$(this).removeClass("active-menu");
});

});
@charset:"UTF-8";
body {
background-image: url(../images/background.png);
}
.menu ul {
list-style-type: none;
}
.menu li {
font-family:'Open Sans', sans-serif;
display: inline;
}
.menu a {
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
font-size: 25px;
margin: 5px;
border-bottom: 1px solid #0A0F2D;
}
.active-menu {
border-bottom: 5px;
}
.logo {
margin-left: 20px;
}
.navigation img{
float:left;
}
.menu a:hover{
border-bottom: 3px solid #0A0F2D;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="navigation"> <a href="index.html" class="a_logo"><img src="../images/logo_webpage_ellefsen.png" class="logo" width="20%" height="20%"></a>

<div class="menu">
<ul>
<li class="menu-item"><a href="#home" class="menu-item">Home</a>

</li>
<li class="menu-item"><a href="#portfolio" class="menu-item">Portfolio</a>

</li>
<li class="menu-item"><a href="#about" class="menu-item">About Me</a>

</li>
<li class="menu-item"><a href="#contact" class="menu-item">Contact Me</a>

</li>
</ul>
</div>
</div>
</body>

关于jquery - 如何将列表与图像对齐,以及 jquery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27347029/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com