Question

我想修复我的代码，但我似乎失败了。我希望任何人都可以帮助我，因为我想解决它！

我希望徽标位于右上方，菜单位于左上方。此外，当你滚动它可能不会像现在一样移动！

＆＃13;

body {
  background: url(background.jpg);
  margin: 0px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 1.5em;
  width: 100%;
}
.box {
  border-style: solid;
  margin-bottom: 200px
}
#logo img{
  width:140px;
  height: auto;
  float: right;
  position: absolute;
  right: 0;
  margin-top: 5px;
  margin-right: 5px;
}
#menu {
  margin-top: 5px;
  margin-left: 5px;
  left: 0;
  position: fixed;
  border-radius: 5px;
  border-style: inset;
  border-color: #DCA970;
  box-shadow: 7px 7px 7px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
} 
li  {
  margin: 10px;
}
.hello {
  margin-top: 1000px;
}

＆＃13;

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Monster Dung</title>
  </head>
  <body>
    <div class="box">
      <div id="logo">
        <img src="logo.png">
        <div id="menu">
          <ul>
            <li>Home</li>
            <li>Shop</li>
            <li>Contact</li>
            <li>Forum</li>
          </ul> 
        </div>
      </div>
    </div>
    <div class="content">
      <p> Hey there<p>
    </div>
  </body>
</html>

＆＃13;

Answer 1

你想修这样的标题吗？

＆＃13;

body {
  background: url(background.jpg);
  margin: 0px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 1.5em;
  width: 100%;
}
.box {
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  border-style: solid;
  background-color: #fff;
}
#logo img{
  position: absolute;
  right: 5px;
  top: 5px;
  width:140px;
  height: auto;
}
#menu {
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 5px;
  border-style: inset;
  border-color: #DCA970;
  box-shadow: 7px 7px 7px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
} 
li  {
  margin: 10px;
}
.hello {
  margin-top: 1000px;
}
.content {
  height: 1000px;
  margin-top: 200px;
  background: pink;
}

＆＃13;

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Monster Dung</title>
  </head>
  <body>
    <div class="box">
      <div id="logo">
        <img src="logo.png">
        <div id="menu">
          <ul>
            <li>Home</li>
            <li>Shop</li>
            <li>Contact</li>
            <li>Forum</li>
          </ul> 
        </div>
      </div>
    </div>
    <div class="content">
      <p> Hey there<p>
    </div>
  </body>
</html>

＆＃13;

Answer 2

这就是你想要的。我为你写了一段代码。我想这会对你有所帮助。只需要替换你的形象。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>



  
<style type="text/css">
 body{
 	margin: 0;
 	padding: 0;
 	width: 100%;
 	height: 800px;
 }
 div.main{
 	position: fixed;
 }

 div.navigation{
 	border:1px solid black;
 	box-shadow: 1px 2px 1px black;
 	height: auto;
 	width: 100px;
 	
 	position: absolute;
 	white-space: nowrap;
 }
 
 div.navigation ul li{
 	list-style-type: none;
 	margin-left: -25px;
 }
 div.navigation ul li a{
 	text-decoration: none;
 	font-size: 25px;

 }

 div.logoimage{
 	width: 100px;
 	height: 100px;
 	box-shadow: 1px 2px 1px orange;
 	position: fixed;
 	right: 10px;



 }

 div.logoimage img{
 	width: 100%;
 	height: 100%;

 }

</style>


<body>

 <div class="main">
    <div class="navigation">
    	<ul>
    		<li><a href="">Home</a></li>
    		<li><a href="">Shop</a></li>
    		<li><a href="">Contact</a></li>
    		<li><a href="">Forum</a></li>
    	</ul>
    </div> 	
    <div class="logoimage">
    	<img src="yourlogo.png"/>
    </div>
 </div>
  

</body>
</html>

CSS divs彼此浮动

2 个答案: