html如何设置导航栏例子,纯css实现导航条（顶部菜单）

【实例简介】入门级示例源码

【实例截图】

【核心代码】

* {

margin: 0;

padding: 0;

}

.top {

/* 设置宽度高度背景颜色 */

height: auto;

width: 100%;

background: #178fe5;

position: fixed;

/*固定在顶部*/

top: 0;

/*离顶部的距离为0*/

text-align: center;

}

.top ul {

/* 清除ul标签的默认样式 */

list-style-type: none;

overflow: hidden;

display: inline-block;

}

.top li {

float: left;

/* 使li内容横向浮动，即横向排列 */

margin-right: 10px;

/* 两个li之间的距离*/

font-size: 16px;

line-height: 38px;

}

.top li a {

/* 设置链接内容显示的格式*/

display: block;

/* 把链接显示为块元素可使整个链接区域可点击 */

color: white;

padding: 9px 16px;

margin-left: 35px;

text-decoration: none;

/* 去除下划线 */

}

.top li a:hover {

/* 鼠标选中时背景色 */

background-color: #097ed1;

}

• 网址导航
• 小游戏首页
• 网页游戏
• 游戏直播
• 影视动漫
• 小游戏专题