<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用inline-block盒设计导航栏</title>
<style type="text/css">
body > div/*第一个body下的所有div元素*/
{
text-align:center;
margin:auto;
}
div > div
{
display:inline-block;
border:1px solid black;}
a
{
text-decoration:none;
/*设置为block类型,允许设置高度、宽度*/
display:block;/*至关重要,会占满整个父容器*/
width:120px;
padding:10px;
background-color:#eee;}
a:hover
{
background-color:#f60;
font-weight:bold;}
</style>
</head>
<div>
<div><a href="http://www.baidu.com" >学校首页</a></div>
<div><a href="http://www.baidu.com" >学校介绍</a></div>
<div><a href="http://www.baidu.com" >校园风光</a></div>
<div>
<body>
</body>
</html>
25、实例 使用inline-block盒设计导航栏
最新推荐文章于 2023-04-12 21:33:45 发布