h5+css 伸缩菜单---改变高度

亦凉 2022-09-23 03:42 196阅读 0赞

## 伸缩菜单—改变高度 ##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导航菜单</title>
    <style type="text/css"> *{ margin:0; padding:0; font-size:14px;} a{ color:#333;text-decoration:none} ul{ list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;} ul li{ float:left; margin-top:20px;} a{ display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;} a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px; margin-top:-10px;} </style>
    </head>
    <body>
    <ul>
        <li><a class="on" href="#">首　　页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </body>
    </html>

效果图：  
![这里写图片描述][20160703120237741]

[20160703120237741]: /images/20220721/ffd029cf9b424ec5b7223c8134d4f221.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 js改变div高度

用bootsrap响应式布局的时候，遇到个很恶心的问题：左边栏很短很难看！！ ![1078922-20170122224248832-694241994.png][] 于是

野性酷女/ 2023年06月02日 05:21/ 0 赞/ 60 阅读

相关 php h5 css,【嘉兴东臣php】h5+css3

充实的一周过去了，这一周我们学习了h5+css3，感觉满满的酷炫，原来我们以前玩的一些游戏就是用这个做的，感觉挺神奇的。虽然知道怎么完成这个工作的，但实际操作就比较难了，就我现

た入场券/ 2023年01月15日 10:26/ 0 赞/ 146 阅读

相关 H5图片高度根据宽度自适应

每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。下面看看实现代码：下面是uniapp的条件编译，如果是小程序场景就使用 mode

女爷i/ 2023年01月03日 14:18/ 0 赞/ 391 阅读

相关 h5+css 菜单导航---改变宽度

菜单导航—改变宽度 1、使用javascript脚本实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

Dear 丶/ 2022年09月23日 03:42/ 0 赞/ 190 阅读

相关 h5+css 伸缩菜单---改变高度

伸缩菜单—改变高度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

亦凉/ 2022年09月23日 03:42/ 0 赞/ 197 阅读

相关 h5+css 圆角菜单

圆角菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

- 日理万妓/ 2022年09月23日 03:40/ 0 赞/ 190 阅读

相关 h5+css 水平菜单制作

水平菜单制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

雨点打透心脏的1/2处/ 2022年09月23日 03:40/ 0 赞/ 240 阅读

相关 h5+css 垂直导航菜单

垂直导航菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

矫情吗；*/ 2022年09月23日 03:39/ 0 赞/ 217 阅读

相关伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2022年07月14日 11:20/ 0 赞/ 155 阅读

相关 H5——CSS

> CSS 即层叠样式表，主要用于对页面的装饰。 > 使HTML专注于网页的内容，CSS专注于网页的表现 > 提供了丰富的格式化功能 > 可以针对各种可视化浏

怼烎@/ 2022年05月08日 02:04/ 0 赞/ 150 阅读