h5+css 圆角菜单

- 日理万妓 2022-09-23 03:40 188阅读 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:20px;} .nav{ list-style:none;height:30px;border-bottom:10px solid #f60;padding-left:11px;margin-top:111px;} .nav li{ float:left;} .nav li a{ text-decoration:none;color:#333;display:block;height:30px;line-height:30px;width:120px;background:url(http://img.mukewang.com/53846438000168f901200060.jpg);margin-right:1px;text-align:center;} //这是一张高120宽60的图片； .nav > li >a.on,.nav li a:hover{ color:#f00;background-position:0-30px;} </style>
    
    </head>
    <body>
    
    <ul class="nav">
        <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>

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

[20160703115251050]: /images/20220721/e28b7303eacf419cb388f29c2c48bb27.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 142 阅读

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

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

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

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

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

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

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

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

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

相关 h5+css 圆角菜单

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

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

相关 h5+css 水平菜单制作

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

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

相关 h5+css 垂直导航菜单

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

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

相关 CSS圆角效果

上一篇博文中提到了css2.0的圆角效果，但是没有实现，今天闲着没事儿做了一个，想想还是css3来的痛快，用css2做一个圆角确实还是挺痛苦的，其他不说了，先截个图

淩亂°似流年/ 2022年06月13日 09:17/ 0 赞/ 274 阅读

相关 H5——CSS

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

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

相关竖向蓝色圆角经典的CSS菜单代码

代码简介：竖向圆角滑过变色的CSS菜单栏，同样来自老外网站哦，在IE6下好像有点问题，自己修正下。代码内容： <!DOCTYPE html PUBLIC "-//

╰+攻爆jí腚メ/ 2022年01月07日 04:29/ 0 赞/ 237 阅读