HTML+CSS实现导航条

HTML+CSS实现导航条

​​QQ群:722384575 ​​

1、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; }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。