欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

文档流定位

程序员文章站 2022-04-25 11:37:15
...

display:none 隐藏
display:block 块级
display:inline 内联
display:inline-block 内联-块级

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin:0;
	}	
	#nav{
		margin: 0 auto;
		width: 300px;
		font-size: 0;
	}
	a{  				
		display: inline-block;
		width: 80px;
		height: 30px;
		border-bottom: 1px solid #ccc;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		text-decoration: none;
	}
	a:hover{
		color: white;
		background-color: #ccc;
		border: 1px solid;
		border-left-color: orange;
		border-top-color: orange;
		border-right-color: orange;
	}
	</style>
</head>
<body>
<div id="nav">
	<a href="https://www.baidu.com">百度</a>
	<a href="https://www.huke88.com">虎课网</a>
	<a href="https://www.imooc.com">慕课网</a>
</div>
</body>
</html>
相关标签: 文档流定位

上一篇: CSS Position

下一篇: shell相关内容