Question

用户已删除此问题

Answer 1

以下是您希望它的外观链接：

https://jsfiddle.net/MasterDeep/rz0L4559/

Answer 2

如果您向导航div添加clear:both，它将会关闭，您应该移除.header的高度以适应内容。所以它只适合提供的图像。这是代码：

$(document).ready(function() {
  $("#slider").animate({
    "left": $(".item:first").position().left + "px",
    "width": $(".item:first").width() + "px"
  }, 0);

  $(".item").hover(function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $(this).position().left + "px",
      "width": $(this).width() + "px"
    }, 500);
  });

  $(".item").on("mouseout", function() {
    $("#slider").stop();
    $("#slider").animate({
      "left": $('#one').position().left + "px",
      "width": $('#one').width() + "px"
    }, 500);
  });
});

body{ /* Applies to the <body> tag */
	margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
	width:100%; /* This sets the width */
	height:100%; /* This sets the height */
	background-color:black; /* Sets the background colour */
}
.header{ /* The header class */
	width:100%;
	background-color:#323232;
	color:white; /* The sets the colour of the font */
}
.body{
	width:100%;
	height:495px;
	background-color:white;
	color:black;
}
.footer{
	width:100%;
	height:50px;
	background-color:#323232;
	color:white;
}
div{
    display: inline-block;
    float:left;
}
#one, #two, #three, #four{
    background-color:#323232;
    height:96px;
	color:white;
	text-align:center;
	font-size:25px;
	font-family:"Myriad Pro";
}
#slider{
    background-color:#ed1c24;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    bottom:0;
}
.inside{
	margin-left:30px;
	margin-right:30px;
	padding-top:7px;
	pointer-events:none;
	margin-top:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <!-- This is the container -->
	<div class="header"> <!-- This is the header -->
    	<div style="float:left"> <!-- This is the logo -->
        	<img src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" height="100px">
        </div>
        <div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
        <div style="float:right; clear:right"> <!-- This is the navigation menu -->
        	<div style="position:relative"> <!-- This is the container of the navigation menu -->
            	<div id="slider"></div> <!-- This is the slider bar -->
            	<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
    			<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
    			<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
    			<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
            </div>
        </div>
    </div>
    <div class="body"> <!-- This is the body -->
    </div>
    <div class="footer"> <!-- This is the footer -->
    </div>
</div>

Stackoverflow - 错误012984739276442x

2 个答案: