gpt4 book ai didi

html - 为什么我的填充从我的 Logo 中删除了?

转载 作者:太空宇宙 更新时间:2023-11-04 02:48:57 25 4
gpt4 key购买 nike

为什么我的填充在我的 Logo div 上不起作用它在我添加额外的 div 之前它正在工作但我仍然看不出它不起作用的原因。请查看我的代码以确定是否可以帮助我:)

<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">

<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact@thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

</div>
</div>
</div>
</div>


</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;

}

header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;

}
.contact_info{
width:1200px;
margin:0 auto;


}
.contact_info p, img{

float:left;

}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;

}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}

.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;

}
.Social_Media li{
display:inline;

}
.Social_Media img{
padding-right:25px;

}
.Social_Media li:last-child img {
padding-right:0px
}
.language{

float:right;

}
.language p{
padding-right:0px;

}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;

}

.main_nav{
width:1200px;
margin:0 auto;
height:90px;



}

}

.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;


}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}

nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}

.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}

最佳答案

检查你的括号。额外的花括号可能会让你失望。如果没有尝试启动 JSFiddle。

.main_nav{
width:1200px;
margin:0 auto;
height:90px;



}

}

.logo{
clear:both;
float:left;
padding-top:15px;
}

关于html - 为什么我的填充从我的 Logo 中删除了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33357213/

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