【案例】米柚导航条实现

<!DOCTYPE html>

<head>

<title>米柚导航条</title>

<style>

margin: 0;

padding: 0;

}

li{

list-style: none;

}

text-decoration: none;

}

#container{

width: 100%;

height: 48px;

background: #FD6440;

margin-top:120px;

}

#container>#nav{

width: 980px;

height: 48px;

margin: 0 auto;

}

#container>#nav>ul>li{

float: left;

height: 48px;

line-height: 48px;

}

#container>#nav>ul>li:hover{

background: #f75733;

}

#container>#nav>ul>li.active{

background: #f75733;

}

#container>#nav>ul>li>a{

font-size: 14px;

height: 48px;

color: #fff;

display:block;

padding: 0 16px;

}

</style>

</head>

<body>

<li><a href="">MIUI专区</a></li>

<li><a href="">MIUI下载</a></li>

<li><a href="">论坛APP</a></li>

</ul>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/sherryStudy/p/miui_navbar.html

【案例】米柚导航条实现相关推荐

Bootstrap-综合案例-编写课程页面-导航条
第一步:导入bootstrap <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
CSS快速学习：几种导航条案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
前端案例 - 导航条菜单的制作
每个网站都包含导航条菜单,在此做一些 HTML 和 CSS 基础回顾. 本文主要跟随课程完成导航栏菜单的制作,课程来源 imooc导航条菜单的制作. 推荐学习前端的朋友可以看看,简简单单一个小课程,对 ...
[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
CSS导航条从入门到精通
1 css实现基本的横向导航条 html结构 <body><div id="top"><ul&g ...

【案例】米柚导航条实现

【案例】米柚导航条实现相关推荐

最新文章

热门文章