css3 实现可以中英切换的导航条
css3 实现 可以 切换 导航条
2023-09-11 14:22:19 时间
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/test.css" /> </head> <body> <div class="nav"> <ul class="list"> <li> <a href="#"> <b>Home</b> <i>首页</i> </a> </li> <li> <a href="#"> <b>Study</b> <i>学习</i> </a> </li> <li> <a href="#"> <b>Coursr</b> <i>课程</i> </a> </li> <li> <a href="#"> <b>Bbs</b> <i>论坛</i> </a> </li> <li> <a href="#"> <b>About</b> <i>关于</i> </a> </li> </ul> </div> </body> </html>
css
*{padding:0; margin:0;} li{ list-style:none; } a{ text-decoration:none;} .nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;} .list{ width:1000px; height:40px; margin:0 auto;} .list li{ float:left;} .list li a{ display:block; transition:0.3s;} .list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;} .list b{ font-weight:100} .list i{ font-style:normal; background:#333; color:#fff;} .list a:hover{ margin-top:-40px;}
效果:
相关文章
- 《HTML5与CSS3基础教程(第8版)》
- iOS Web应用开发:运用HTML5、CSS3与JavaScript
- CSS3自定义滚动条样式 -webkit-scrollbar
- 图解css3:核心技术与案例实战. 1.1 什么是CSS3
- 图解css3:核心技术与案例实战. 2.5 目标伪类选择器
- HTML5与CSS3权威指南笔记案例1
- 《HTML5和CSS3快速参考》——第1章 走进HTML51.1 概述
- 《HTML5与CSS3实战指南》——1.7 实际应用
- CSS3如何实现div闪烁效果
- css3弹性盒模型flex快速入门与上手1
- CSS3魔法堂:认识@font-face和Font Icon
- 本周推荐7款CSS3实现的动态特效
- 通过CSS3,实现元素覆盖效果
- CSS3 结构性伪类选择器(2)