25、实例使用inline-block盒设计导航栏

最新推荐文章于 2023-04-12 21:33:45 发布

xuxianmei

最新推荐文章于 2023-04-12 21:33:45 发布

阅读量1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tlxxm/article/details/36929055

版权

CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuxianmei

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
25、实例使用inline-block盒设计导航栏

使用inline-block盒设计导航栏body > div/*第一个body下的所有div元素*/{ text-align:center; margin:auto; }div > div { display:inline-block; border:1px solid black;}a{ text-decoration:none; /*设置为block类型，允许设置高
复制链接

扫一扫