如何用最简洁的css代码写一个导航栏

如何用最简洁的css代码写一个导航栏

首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容。
注：标签主要是用于设置超链接。

<div>
		<img src="logo.png">
		<a href="#">首页</a>
		<a href="#">游戏中心</a>
		<a href="#">游戏社区</a>
		<a href="#">游戏动态</a>
</div>

这里是最初没有经过CSS 语句修饰的网页效果

现在通过CSS标签进行修饰

（1）首先，我们先给最外层的

标签进行设置，让导航栏的原始外框展示出来。

div {
			width: 1500px;
			height: 84px;
			background-color: #323235;
		}

(2)其次我们需要修改的就是标签的CSS属性：

a {
			width: 150px;
			height: 84px;
			color: #fff;
			font-size: 24px;
			/*文字水平居中*/
			text-align: center;
			/*设定行高等于盒子高度，垂直居中*/
			line-height: 84px;
			/*行内元素转换为块级元素*/
			display: inline-block;
			/*去除超链接文本的下划线*/
			text-decoration: none;
		}

标签中的后几个元素的设置也是导航栏的关键部分，同时给
标签也进行设置

img {
			width: 200px;
			height: 84px;
			margin-top: 10px;
			margin-left: 150px; 
			float: left；
		}

此时简单的导航栏也出来了：

（3）最后，设置一个鼠标的点击效果就好了：

a:hover {
		color: yellow;
}

大学生it技术交流QQ群