为了账号安全,请及时绑定邮箱和手机立即绑定

菜单为什么被默认为圆角

菜单为什么被默认为圆角

正在回答

4 回答

因为在.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;}中设置了背景图片,背景图片没有指定位置时,默认是从左上角0,0开始展示出来的。在该案例中,背景图片就是带有圆角的矩形。

0 回复 有任何疑惑可以回复我~

你也可以选择用border-radius属性对边框进行圆角化处理!

0 回复 有任何疑惑可以回复我~

带圆角的图片是用PS事先做好的,background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); ,你没发现这张图片是用url导入的吗

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}

.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

.nav li{float:left}

.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;}

.nav li a.on, .nav li a:hover{background-position:0 -30px;color:#fff;}

</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>


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

菜单为什么被默认为圆角

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信