导航条案例练习

最新推荐文章于 2022-03-20 16:26:45 发布

昨夜太平长安888

最新推荐文章于 2022-03-20 16:26:45 发布

阅读量254

点赞数 1

本文链接：https://blog.csdn.net/HelloWord176/article/details/80283352

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条案例练习</title>
	<base href="#" target="blank"> <!-- 设置将页面中所有的a标签都在新的页面打开 -->
	<style>
		.nav {
			height: 60px;
			width: 1200px;
			background-color: #C6F1E7; 
			text-align: center; /*设置div中字体水平居中*/
			margin: auto; /*设置div水平垂直居中*/
		}
		a {
			display: inline-block; /*经a标签转换为行内块元素*/
			width: 100px;
			height: 60px;
			line-height: 60px;
	/*设置文字垂直居中，a标签的文字垂直居中很简单，只需要设置
	line-height属性即可，将像素值设置的和高度一致就是垂直居中了。*/
			text-decoration: none; /*取消超链接下划线*/
			color: #404B69;
			font-weight: 700; 
			
		}
		a:hover {
			background-color: green;
			color: yellow;
			text-decoration: underline; /*设置超链接下划线*/
			
		}

	</style>
</head>
<body>
	<div class="nav">
			<a href="http://www.iqiyi.com/">爱奇艺</a>
			<a href="https://www.baidu.com/">百度</a>
			<a href="http://www.kugou.com/">酷狗音乐</a>
			<a href="http://aaqqy.com/">影视大全</a>
			<a href="https://www.taobao.com/">淘宝网</a>
			<a href="https://www.autohome.com.cn">汽车之家</a>
			<a href="https://www.tmall.com">天猫</a>
			<a href="http://www.cnki.net/">中国知网</a>
	</div>
</body>
</html>

昨夜太平长安888

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
导航条案例练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航条案例练习&lt;/title&gt; &lt;base href="#" target="blank"&gt
复制链接

扫一扫