项目实战-PC端固定布局【1】之完成导航

最新推荐文章于 2023-11-04 18:34:30 发布

fxy流年无悔

最新推荐文章于 2023-11-04 18:34:30 发布

阅读量1.7k

点赞数

分类专栏： web 文章标签： css3 导航布局

本文链接：https://blog.csdn.net/a716121/article/details/52180036

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

完成导航效果：

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>项目实战-PC端固定布局（1）</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<nav id="nav">
	<section class="center">
		<h1 class="logo">星月旅行社</h1>
			<ul class="link">
				<li class="active"><a href="###">首页</a></li>
				<li><a href="###">旅游资讯</a></li>
				<li><a href="###">机票订购</a></li>
				<li><a href="###">风景欣赏</a></li>
				<li><a href="###">公司简介</a></li>
			</ul>
	</section>
</nav>

<header>header</header>

<section>section</section>

<footer >footer</footer>
</body>
</html>

style.css:

@charset "utf-8";
/*内外边距都是0*/
body,h1,ul{
	margin: 0;
	padding: 0;
}
/*将ul前面的点去掉*/
ul{
	list-style: outside none none;
}
/*将链接的下划线去掉*/
a{
	text-decoration: none;
}
/*#333是黑色*/
#nav{
	width: 100%;
	height: 70px;
	background-color: #333;
}
#nav .center{
	width: 1263px;
	height: 70px;
	margin: 0 auto;

}
/*将文本移走用到text-indent并插入logo*/
#nav .logo{
	width: 240px;
	height: 70px;
	background-image: url(../img/4.png);
	text-indent: -9999px;
	float:left;
}
/*#eee是灰色  line-height设置垂直居中*/
#nav .link{
	width: 650px;
	color:#eee;
	float: right;
	height: 70px;
	line-height: 70px;
}
/*水平居中*/
#nav .link li{
	float: left;
	width:120px;
	text-align: center;

}
/*将a由内联设置成块*/
#nav .link a{
	color:#eee;
	display: block;
}
/*鼠标效果*/
#nav .link a:hover,
#nav .active a{
background-color: #aaa;
}