制作网站的副本
制作网站的副本
提问于 2017-09-06 16:03:30
我试着用html和css复制这个站点来练习https://www.raidhqgame.com/，但是我在menuArea div中使用填充时发现了一些问题。
<header>
<div class="head1">
<div class="logoArea">
<img id="logo" src="https://www.raidhqgame.com/images/RHQ_Logo_680x200.png" alt="RAID_HQ LOGO"/>
</div>
<div class="menuArea">
<a href="#">HOME</a>
<a href="#">FEATURES</a>
<a href="#">VIDEO & SCREENS</a>
<a href="#">REVIEWS</a>
<a href="#">DOWNLOAD</a>
<a href="#">HELP</a>
<a href="#">EPS</a>
</div>
</div>
<div class="background_img">
<img src="https://www.raidhqgame.com/images/RAID_Web_BG_01_1500x800.jpg" alt="" />
</div>
CSS
body{
margin:0;
padding:0;
}
.head1{
height:60px;
background:black;
}
.logoArea{
float:left;
width:40%
}
#logo{
height:40px;
padding:10px 0px 10px 110px;
}
.menuArea{
display:block;
float:right;
width:60%;
}
a:link{
text-decoration:none;
color: green;
font-family: "Poppins",sans-serif;
font-weight:bold;
font-size:12px;
letter-spacing: 1px;
}The problem：当我将填充添加到menuArea div时，menuArea会跳下去。此外，"head1“类和"background_img”类之间也存在差距。
我如何解决这两个问题？
回答 2
Stack Overflow用户
发布于 2017-09-06 16:13:23
我认为，通过将填充添加到head1 div而不是menuArea中，您可能会得到想要的效果。
以下是您更新的代码：https://jsfiddle.net/ntb7nt39/
CSS
.head1{
height:60px;
background:black;
padding: 20px; // You should change this value to whatever you want
}此外，"head1“类和"background_img”类之间也存在差距。我不能再创造那个缺口了。
更新
“我想要菜单部分的填充，而不是整个head1。”
我更新了代码：https://jsfiddle.net/ntb7nt39/1/
CSS
.head1{
height: 80px; // Increased height to make space for the navigation bar
background:black;
}
.menuArea{
display:block;
float:right;
width:60%;
padding: 20px 0; // Added padding at the top and bottom of the navigation bar, change these values according to your needs.
}Stack Overflow用户
发布于 2017-09-06 17:09:50
- 您只需从类width=60%中删除menuArea，就可以添加任何类型的填充或
- 只使用顶部和底部填充，不使用左右填充，因为通过设置40% 60%的设置覆盖了整个100%的宽度，并且当向其添加左填充时会增加导致此问题的宽度。
对于第二个问题，添加高度:100%的logoArea类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46079785
复制相关文章
相似问题
腾讯云开发者
