通栏式导航

最新推荐文章于 2024-06-21 18:13:12 发布

_xixi_nn

最新推荐文章于 2024-06-21 18:13:12 发布

阅读量309

点赞数 1

分类专栏： html css js 文章标签： html css

本文链接：https://blog.csdn.net/weixin_56674431/article/details/121590243

版权

html css js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一个简单的导航，先看看效果图：

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style_nav.css">
	</head>
	<body>
		<div class="pageNav">
			<nav class="pageNav_section">
				<ul class="catalogue">
					<li class="catalogue_sy"><a href="#" target="_blank"><span>首页</span></a></li>
				    <li><a href="#" target="_blank"><span>公司介绍</span></a></li>
				    <li><a href="#" target="_blank"><span>产品信息</span></a></li>
				    <li><a href="#" target="_blank"><span>联系我们</span></a></li>
				    <li><a href="#" target="_blank"><span>合作加盟</span></a></li>
				    <li><a href="#" target="_blank"><span>资料下载</span></a></li>
				</ul>
				<div class="clear"></div>
			</nav>
		</div>
	</body>
</html>

1.写超链接，去掉下划线，写公用样式：

a{
text-decoration: none;
}

2.导航，都会有浮动，要清除浮动

3.target=" "打开页面的方式：_blank : 新窗口打开、_self : 原窗口打开页面。

CSS：

.pageNav{
	width: 100%;
	min-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.pageNav_section{
	width: 1200px;
	height: 400px;
}
.catalogue{
	float: left;
	width: 1920px;
	height: 70px;
	background: #106aa9;
}
.catalogue_sy{
	margin-left: 360px;
}
.catalogue>li{
	width: 105px;
	float: left;
}
.catalogue>li>a{
	padding-top: 25px;
	overflow: hidden;
	text-align: center;
	display: block;     //增加可点范围
	height: 90px;
	font-size: 18px;
	color: #fff;
	transform: all 0.5s;
}
.catalogue>li>a:hover{
	height: 45px;
	background: #f15725;
}

1.添加hover、transform效果，使导航看起来更加美观

2.文字的居中，用内边距 padding-top

3.字体颜色更改，写在超链接里

_xixi_nn

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通栏式导航

一个简单的导航，先看看效果图：HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/public.css"> <link rel="stylesheet" href="css/style_nav.css"> <...
复制链接

扫一扫