练习做导航
程序员文章站
2022-03-13 15:36:30
...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}a{text-decoration: none;color: #333;}body{background-color: #eee;}li{list-style: none;}nav{background-color: #fff;/*height: 60px;*/}nav>ul{display: flex;height: 60px;justify-content: center;/*align-items: center;*//*overflow: hidden;*/}nav>ul>li:hover,nav>ul>li>ul>li:hover{/*padding: 15px 25px;*/background: #eaeaea;}nav>ul>li:hover>ul{display: block;}nav>ul>li:hover>a,nav>ul>li>ul>li:hover>a{color: red;}nav>ul>li>a, nav>ul>li>ul>li>a{padding: 15px 25px;display: block;}nav>ul>a>li>img{/*width: 100px;*//*overflow: hidden;*/height: 50px;}.logophp{background: url("https://www.php.cn/static/images/PHPlogo.png") no-repeat center center;display: block;height: 60px;width: 140px;overflow: hidden;background-size: 100%;white-space: nowrap;text-indent:100%;float: left;/*align-self:flex-start;*/}nav>ul>li:first-child>a{color: red;}nav>ul>li{position: relative;}nav>ul>li>ul{background: #fff;position: absolute;left: 0;top: 60px;display: none;}</style></head><body><nav><div class="logophp"></div><ul><!-- <a href=""><li><img src="https://www.php.cn/static/images/logos.png" alt=""></li></a>--><li><a href="">首页</a></li><li><a href="">视频教程</a><ul><li><a href="">视频课程</a></li><li><a href="">直翻课程</a></li></ul></li><li><a href="">学习路径</a><ul><li><a href="">入门教程</a></li><li><a href="">独孤九贱</a></li><li><a href="">玉女心经</a></li><li><a href="">天龙八部</a></li><li><a href="">趣味闯关</a></li></ul></li><li><a href="">技术文章</a><ul><li><a href="">头条</a></li><li><a href="">前端开发</a></li><li><a href="">后端开发</a></li><li><a href="">数据库</a></li><li><a href="">PHP框架</a></li><li><a href="">每日编程</a></li></ul></li><li><a href="">编程词典</a><ul><li><a href="">HTML/CSS</a></li><li><a href="">JavaCript</a></li><li><a href="">服务器</a></li><li><a href="">数据库</a></li><li><a href="">移动源</a></li><li><a href="">XML</a></li><li><a href="">ASP.NET</a></li><li><a href="">Web Services</a></li><li><a href="">开发工具</a></li><li><a href="">网站建设</a></li></ul></li><li><a href="">资料下载</a><ul><li><a href="">工具下载</a></li><li><a href="">在线工具</a></li><li><a href="">手册下载</a></li><li><a href="">电子课件</a></li><li><a href="">JS特效</a></li><li><a href="">网站源码</a></li><li><a href="">网站素材</a></li><li><a href="">类库下载</a></li></ul></li><li><a href="">社区</a><ul><li><a href="">问答</a></li><li><a href="">博客</a></li></ul></li></ul></nav></body></html>
上一篇： 用户注册表练习