h5+css 圆角菜单

- 日理万妓 2022-09-23 03:40 251阅读 0赞

圆角菜单

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>导航菜单</title>
  6. <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>
  8. </head>
  9. <body>
  11. <ul class="nav">
  12.     <li><a class="on" href="#">首　　页</a></li>
  13.     <li><a href="#">新闻快讯</a></li>
  14.     <li><a href="#">产品展示</a></li>
  15.     <li><a href="#">售后服务</a></li>
  16.     <li><a href="#">联系我们</a></li>
  17.   </ul>
  19. </body>
  20. </html>

效果图：
这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，251人围观）

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

相关阅读

    相关 H5——CSS

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

    怼烎@怼烎@/ 0 赞/ 219 阅读