我想在我的网页中制作一个html
/css
菜单,其中包含四个链接(水平位于页面顶部中心)。
我希望将鼠标悬停在 ( a:hover
) 上时增加菜单链接字体大小。
但我遇到的问题是,当字体大小增加(inIE 8
和Chrome
链接
我尝试做 atable
而不是 the ,inline-block
但它造成了更大的混乱。
我也试过玩,margin
但padding
也没有用。
我是 html/css 的新手,所以对 html/css 中的任何内容的任何建议都将不胜感激,并原谅我的英语不好。
这是我的代码:
<html>
<head>
<title>Home page</title>
<style type="text/css">
body {
font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
font-size: 13px;
color: #000060;
background-color: #005070;
background-repeat:repeat-x;
text-align:center;
}
.menu
{
height:64px;
width:100%;
background-image:url(img/bglb2.png);
background-repeat:repeat-x;
text-align:center;
}
.menuLink, .menuLink:visited
{
color:#FFFFFF;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:132px;
height: 32px;
padding: 10px;
display:inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-image:url(img/bto.png);
font-size: 26px;
}
</style>
</head>
<body>
<div class="menu">
<a class="menuLink" href="index.html">Home</a>
<a class="menuLink" href="page1.html">Page1</a>
<a class="menuLink" href="page2.html">Page2</a>
<a class="menuLink" href="page3.html">Page3</a>
</div>
</body>
</html>