HTML+CSS设计简单导航栏

最新推荐文章于 2024-05-17 08:40:11 发布

嗯嗯=

最新推荐文章于 2024-05-17 08:40:11 发布

阅读量166

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_64867440/article/details/134433302

版权

1 运行效果

2 资源图片

2.1 logo.png

2.2 nav_bg.png

2.3 nav_hover_bg.png

3 运行代码

3.1 HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="css/web.css" type="texts" rel="stylesheet"/>
		<title></title>
	</head>
	<body>
		<div class="nav">
			<div>
			<div class="nav_content">
				<img src="img/nav_bg.png" width="1600px" height="105px"/>
				<div class="nav_logo">
				<a href="#" title="返回网站首页">
				<!-- <span class="spanone">重工软件学院</span> -->
				<span><img src="img/logo.png" title="重工软件学院" width="408px" height="104px" alt="重工软件学院"/> </span>
				</a>
				<ul class="nav_ul">
					<li>
						<a href="#" title="网站首页">网站首页</a>
					<>
					<li>
						<a href="#" title="学院介绍">学院介绍</a>
					<>
					<li>
						<a href="#" title="院系展示">院系展示</a>
					<>
					<li>
						<a href="#" title="师生介绍">师生风采</a>
					<>
				</ul>
				</div>
				</div>
			</div>
		</div>
	</body>
<ml>

3.2 css代码

*{
	margin:0;
	padding:0;
}

.nav ul,li{
	list-style: none;
}

a{
	text-decoration: none;
}

a.clears{
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
body{
	font-family: Arial, Helvetica, sans-serif,Verdana, Geneva, Tahoma, sans-serif,"微软雅黑","宋体";
}

.nav{
	clear: both;
}
.nav_content{
	float: left;
}
	
/* 设置ul的主体样式 */

.nav_logo{
	position: absolute;
	top: 0%;
	left: 10%;
}

.nav_ul{
	float: right;
	}
	
.nav_ul>li{
	float: left;
}

/* 未点击的样式 */
.nav_ul>li>a{
	text-align: center;
	/* 字体居中 */
	color: #ffffff;
	/* 字体颜色 */
	font-size: 16px;
	/* 字体大小 */
	line-height: 104px;
	height: 104px;
	width: 151px; 
	display: inline-block;
	padding-left: 46px;
	padding-right:46px;
	transition: all 0.2s;
}

/* 点击之后的样式 */
.nav_ul>li>a:hover{
	background-image: url(../img/nav_hover_bg.png);
	background-position: 0px 0px;
}

@media screen and (max-width: 768px) {
  i, li {
    display: none;
  }
}