为什么设置了margin:25px auto后，我的logo就靠左不变了
来源：3-1 banner区制作
flywindywen
2019-07-16 15:15:55
.header{
margin:25px auto;
}
.content{
width: 1200px;
margin:25px auto;
}
3回答
-
好帮手慕查理
2019-07-16
您好，.header部分要设置与.content相同的宽度1200px。如果没有设置宽度时.header的宽度是100%，所以会占满整个浏览器的宽度。
可以为.header设置一个高度查看一下.header的具体范围。
祝学习愉快！
0h019-07-16 -
flywindywen
提问者
2019-07-16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>玉帝商城</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<!-- header -->
<div class="header">
<!-- logo -->
<div class="logo">
<img src="image/logo.png" alt="no-pic"/>
</div>
<!-- menu -->
<div class="menu" onmouseleave="show_menu1()">
<div class="menu_title" onclick="show_menu()">
<a href="#">内容分类</a>
</div>
<ul id="menu1">
<li>现实主义</li>
<li>抽象主义</li>
</ul>
</div>
<!-- 交互部分 -->
<div class="auth">
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<!-- 页眉完 -->
<div class="content">
<div class="banner">
<img class="banner-img" src="image/welcome.png" alt="none"/>
</div>
</div>
<div class="footer"></div>
</body>
</html>
*{
padding:0px;
margin:0px;
font-family: 微软雅黑;
}
.header{
margin:25px auto;
}
.header .menu ul{
display: none;
list-style: none;
}
.header .logo{
float: left;
position: relative;
}
.header .menu{
float: left;
position: relative;
margin-top: 14px;
margin-left:15px;
}
.header .menu ul li{
margin-top: 15px;
text-align: center;
}
.header .menu .menu_title{
border-bottom: 1px solid black;
padding-bottom: 13px;
width: 80px;
text-align: center;
}
.header .auth{
float: right;
}
.header .auth ul li{
float: left;
margin-right: 70px;
margin-top: 14px;
list-style: none;
}
/*banner*/
.content{
width: 1200px;
margin:25px auto;
}
var flag=true;// 全局变量,新建逻辑变量,使单击效果随单双数改变
function show_menu(){
var menu1=document.getElementById("menu1");// 把menu1的结果赋给menu1本身
// menu1的类型是display="block"-块状显示
//menu1.style.display="block";
// 判断js是否生效可以通过代码alert("弹窗");
//判断上面的flag,对应显示,显示后把值设置为false,完成后设置为true。
if (flag) {
menu1.style.display="block";
flag=false;
}else{
menu1.style.display="none";
flag=true;
}
}
function show_menu1(){
var menu1=document.getElementById("menu1");
menu1.style.display="none";
flag=true;
}
0 -
好帮手慕查理
2019-07-16
您好，同学要将HTML布局和CSS样式全部反馈一下哦~这样才能帮同学查找原因。祝学习愉快！
0h019-07-16
相似问题