菜单按钮中间的主页 [英] Menu button middle of home page
本文介绍了菜单按钮中间的主页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< ！DOCTYPE html >
< span class =code-keyword>< title > Thierra Walker
< h1 id = title > Thierra Walker。< / h1 >
< div class = menu >
MENU
< div id = myDropdown class = menu-content >
< a href = mission.html > 使命< / a >
< a href = ＃ > MUSIC / PERFORMANCES < / a >
< a href = ＃ > 动机< / a >
< a href = contactform.html > CONTACT < / a >
< / div >
< / div >
< br > < br >
< < span class =code-leadattribute> h3 id = mnm > 动员| M usic < / h3 > < h3 >
< div class = 按钮 >
SoundCloud
Youtube
Instagram
< / div >
box-shadow-menu {
position ： relative;
padding-left ： 2em;
padding-bottom ： 1em;
padding-top ： 1em;
background -color ： rgb（219,175,31）;
font-family ： Century gothic;
}
。 box-shadow-menu：之前 {
content ： ;
position ： 绝对;
lef t ： 0;
顶部 ： 0;
宽度 ： 1em;
高度 ： 0.15em;
背景 ： 黑色;
box-shadow ：
0 0.25em 0 0 black，
0 0.5 em 0 0 black;
font-size ： 22px
}
＃button1，＃button2，＃button3，＃button4 {
background -color ： rgb（239,101,138）;
border ： none;
color ： white;
padding ： 12px;
text-align ： center;
text -decoration ： none;
display ： inline-block;
font-size ： 10px;
border-radius ： 4px;
font-family ： 世纪gothic;
cursor ： 指针;
}
＃ title {
font ： 400 100px / 1.5'Pacifico'，Helvetica，sans-serif;
颜色 ： white;
text-shadow ： 3px 3px 0px rgba（0 ，0,0,0.1），7px 7px 0px rgba（0,0,0,0.05）;
font-size < span class =code-keyword>： 60px;
text-align ： center;
}
h3 {
text-align ： center;
font-family ： < span class =code-keyword> Century gothic;
color ： white;
font-weight ： 更轻;
font-size ： 12px;
font-stretch ： extra-expanded;
}
body {
background-color ： rgb（219,175 ，31）;
background-repeat ： 不重复;
}
数字 {
< span class =code-attribute> display ： inline-block;
}
p {
text-align ： center;
font-family ： Trebuchet MS，Helvetica，sans-serif;
font-size ： 14px;
}
img {
padding ： 1px;
border ： 1px solid＃021a40;
}
。 menubtn {
background-color ： rgb（250,238,160）;
颜色 ： white;
padding ： 16px;
border ： none;
cursor ： 指针;
border-radius ： none;
font-family ： Trebuchet MS，Helvetica，sans-serif;
font-size ： 14px;
}
。 menubtn：hover ，。 menubtn：focus {
background-color ： ;
}
。 menu {
position ： center;
display ： inline-flex;
color ： black;
}
。 menu-content {
display ： none;
position ： 绝对值;
background-color ： black;
min-width ： 160px;
box-shadow ： 0 px 8px 16px 0px rgba（0,0,0,0.2）;
z-index ： 1;
font-family ： Trebuchet MS，Helvetica，sans-serif;
}
。 menu-content a {
color ： white;
padding ： 12px 16px;
text-装饰 ： 无;
显示 ： block;
font-family ： Trebuchet MS，Helvetica，sans-serif;
}
。 menu-content a：hover {
background-color ： black;
}
。 show {
display ： block;
}
我尝试了什么：
试图使用位置：相对，我也试过使用不同的布局令我沮丧的是，这是我的第一个网站。
解决方案
使用margin-left属性菜单div
。 menu
{
margin-left ： 45％;
}
<!DOCTYPE html>
<title> Thierra Walker
<h1 id="title"> Thierra Walker.</h1>
<div class="menu">
MENU
<div id="myDropdown" class="menu-content">
<a href="mission.html">MISSION</a>
<a href="#"> MUSIC/PERFORMANCES</a>
<a href="#"> MOTIVATION</a>
<a href="contactform.html">CONTACT</a>
</div>
</div>
<br><br>
<h3 id="mnm">M o t i v a t i o n | M u s i c</h3><h3>
<div class="buttons">
SoundCloud
Youtube
Instagram
</div>
box-shadow-menu {
position: relative;
padding-left: 2em;
padding-bottom: 1em;
padding-top: 1em;
background-color: rgb(219,175,31);
font-family: century gothic;
}
.box-shadow-menu:before {
content: "";
position: absolute;
left: 0;
top:0;
width: 1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
font-size:22px
}
#button1,#button2,#button3,#button4 {
background-color: rgb(239,101,138);
border:none;
color: white;
padding: 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
border-radius: 4px;
font-family: century gothic;
cursor: pointer;
}
#title{
font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;
color: white;
text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
font-size: 60px;
text-align: center;
}
h3{
text-align: center;
font-family: century gothic;
color:white;
font-weight: lighter;
font-size: 12px;
font-stretch: extra-expanded;
}
body{
background-color: rgb(219,175,31);
background-repeat: no-repeat;
}
figure{
display: inline-block;
}
p{
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
}
img {
padding:1px;
border:1px solid #021a40;
}
.menubtn{
background-color:rgb(250,238,160);
color: white;
padding: 16px;
border:none;
cursor: pointer;
border-radius:none;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 14px;
}
.menubtn:hover, .menubtn:focus{
background-color: ;
}
.menu{
position:center;
display: inline-flex;
color: black;
}
.menu-content{
display: none;
position: absolute;
background-color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.menu-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.menu-content a:hover {
background-color: black;
}
.show{
display: block;
}
What I have tried:
tried to use the position:relative , I also tried using a different layout and to my dismay nothing worked but this is my first website.
解决方案
use margin-left property for menu div
.menu { margin-left:45%; }
这篇关于菜单按钮中间的主页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
