HTML+CSS实现导航条

HTML+CSS实现导航条：

点我进群一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)

QQ群:722384575

1、HTML部分源代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>编译遇见未来</title><link rel="stylesheet"  href="css/style.css" ></head><body><ul><li><a href="#">首页</a></li><li><a href="#">文章</a></li><li><a href="#">历史回归</a></li><li><a href="#">收藏</a></li>       </ul></body>
</html>

2、CSS部分如下：

*{padding: 0;margin: 0;
}
body {background: #000;display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;
}ul{width: 60vw;display: flex;justify-content: space-between;align-items: center;}
li{list-style: none;}
a {position: relative;color: #FFF;text-decoration: none;padding: 6px 18px;background-color: #3ce745;transition: background-color 0.8s;}
a:hover{background-color: #E74C3C
}
a:before{position: absolute;center:"";width: 20px;height: 20px;border:2xp solid #E74C3C;border-width: 0 0 2px 2px;top:0;right: 0;transition: 0.8s;}
a:before{position: absolute;center:"";width: 20px;height: 20px;border:2xp solid #E74C3C;top:0;right: 0;opacity: 0;transition: 0.2s;}
a:hover::before {left:-12px;bottom:-12px;opacity: 1;}
a:::after before {top:-12px;right: -12px;}

HTML+CSS实现导航条相关推荐

[CSS]30种时尚的CSS网站导航条
[原文地址]:http://coolshell.cn/?p=562 我想,大家在上网的时候一定见过很多很多种各式各样的网站导航条的设计.这些导航条基本上来说都是用CSS来做的.这里,我们将向你介绍几种 ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
css修改导航条样式
css修改导航条样式近期由于工作需要要修改table表格导航条样式. 本人特整理出相关代码,以及最后效果,供各位小伙伴参考. 具体代码如下: .xp-table-content ::-webkit- ...
css+div导航条样式
用双竖线做的效果 <head> <meta http-equiv="Content-Type" content="text/html; charset= ...
1.angular html+css+js导航条点击样式修改，加跳转页面
1.html页面代码如下: <div class="main-menu" id="L1" (click)="Tab(1)" style ...
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
2019独角兽企业重金招聘Python工程师标准>>> CSS+DIV固定底部的漂浮导航条(多浏览器兼容) 博客分类: div css 在项目中.为了解决多浏览器兼容的问题..ie6 ...
CSS导航条菜单：带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单. 拿菜鸟教程首页导航做个例子首先写一个大的div_nav,而"首页""菜鸟笔记""菜鸟工具 ...

HTML+CSS实现导航条

HTML+CSS实现导航条相关推荐

最新文章

热门文章