CSS导航栏水平导航栏出炉

越往后面这速度就降低下来了，前面的简单可以快速过去。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平导航栏</title><style>/* 固定导航栏 */body {margin: 0;}/* 固定导航栏 */ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;/* 5 灰色水平导航条 背景颜色，主要修改这里改变颜色。改变想要的颜色 */background-color: #f3f3f3;/* 固定导航栏 */position: fixed;top: 0;width: 100%;/* 固定导航栏 */}li {float: left;}li a {display: block;color: #666;text-align: center;padding: 14px 16px;text-decoration: none;}/* 鼠标悬停后变颜色.不能有空格，有空格不管用哦 *//* li a:hover {background-color: rgb(204, 20, 20);} *//* 激活选中 */.active1 {background-color: #4cafaa;}.active {background-color: #4CAF50;}li a:hover:not(.active) {background-color: rgb(207, 29, 29);}</style>
</head><body><p>1 创建一个水平导航条，在鼠标移动到选项后修改背景颜色。</p><p>2 激活/当前导航条实例</p><P>3 链接右对齐</P><p>4 固定导航条</p><p>5 灰色水平导航条</p><ul><li><a class="active1" href="#home">2 主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li style="float: right;"><a href="#about">3 about</a></li></ul><h1>Fixed Top Navigation Bar</h1><h2>Scroll this page to see the effect</h2><h2>The navigation bar will stay at the top of the page while scrolling</h2><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p><p>Some text some text some text some text..</p>
</body></html>

效果

CSS导航栏水平导航栏出炉相关推荐

CSS实现垂直/水平导航栏
文章目录一级基本导航栏怎么显示?导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么?in ...
WEB前端学习笔记01利用纯CSS书写二级水平导航菜单
先放效果图: 将鼠标放置在对应一级导航处,即显示二级导航栏 HTML部分代码: <!DOCTYPE html> <html><head><meta chars ...
中专技校计算机等级考试时间,中职学业水平考试时间表出炉！
(一)成绩评定 1.合格性考试.公共基础知识综合卷I满分值200分,其中德育40分.语文60分.数学60分.英语40分:公共基础知识(计算机应用基础)满分值100分.专业基础知识卷I满分值150分.专 ...
CSS学习笔记（十二）CSS 水平导航栏
CSS 水平导航栏水平导航栏有两种创建水平导航栏的方法:使用行内或浮动列表项. 行内列表项构建水平导航栏的一种方法是,除了上一章中的"标准"代码外,还要将 <li> ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
使用 CSS 构建自定义粘性导航栏
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式. 人们通常将导航栏放在页面的最顶部,但如果它与您的设计相得益彰,您也可以在网页的任一侧放置导航栏.导航栏可以是导航项目的水平列表,也可以是小屏幕 ...
水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签实现目的: 制作导航栏菜单代码分析: 基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰分步实 ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...

CSS导航栏水平导航栏出炉

CSS导航栏水平导航栏出炉相关推荐

最新文章

热门文章

CSS导航栏 水平导航栏出炉

CSS导航栏 水平导航栏出炉相关推荐

最新文章

热门文章

CSS导航栏水平导航栏出炉

CSS导航栏水平导航栏出炉相关推荐