gpt4 book ai didi

html - 居中菜单 html/css

转载 作者:行者123 更新时间:2023-11-28 12:54:56 25 4
gpt4 key购买 nike

<分区>

我想将用 html/css 制作的菜单居中,但我不知道该怎么做,我搜索过但似乎找不到答案我给你看菜单和想要的菜单:

http://i.imgur.com/S2tLj8Q.jpg -> http://i.imgur.com/VFyHet8.jpg

这是我的 html 和 css 代码:

<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family: Corbel;
}
#cssmenu {
width: auto;
height: 59px;
padding-bottom: 4px;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right ul li {
float: right;
margin-right: 0;
margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
position: absolute;
bottom: 0;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
height: 10px;
background: #0f71ba;
}
#cssmenu #bg-two {
height: 59px;
z-index: 2;
background: url('imgs/menuBG.png');
}
#cssmenu #bg-three {
bottom: 4px;
height: 55px;
z-index: 3;
background: #222222;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
background: -o-linear-gradient(top, #555555 0%, #222222 100%);
background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
bottom: 4px;
height: 55px;
z-index: 4;
background: url('imgs/menuBG.png');
}
#cssmenu ul {
height: 59px;
}
#cssmenu ul li {
float: left;
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
#cssmenu ul li a {
padding: 24px 30px 20px 30px;
margin-bottom: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #eeeeee;
font-size: 15px;
text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
background: #0f71ba;
background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
font-weight: bold;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
background: url('images/bg.png');
color: #ffffff;
}

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