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

课程

/前端开发

/HTML/CSS

/导航条菜单的制作

求解 在线等

<title>圆角菜单的制作</title>

<style type="text/css">

*{margin:0;padding:0;}

ul{list-style:none;border-bottom:5px solid #F30;height:50px;padding-left:400px;}

li{float:left;margin-top:10px;}

a{font-size:18px;display:block;line-height:1px;width:120px;text-align:center;text-decoration:none;

background:#6CF;line-height:40px;margin-bottom:2px;background:url(../dreamweaver%E7%AB%99%E7%82%B9%E7%AE%A1%E7%90%86/20110704101348-1793874523.jpg)}

.on,a:hover{background-color:#F90;}

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

这段代码运行界面是这样的

http://img1.sycdn.imooc.com//5745109b000150cd10930067.jpg

请问问题出在哪里？？？求赐教

新火试新茶

2016-05-25

源自：导航条菜单的制作  3-1

关注问题 我要回答
1014
操作
收起

正在回答

3 回答

慕妹5696418
2016-05-25

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>导航菜单</title>

<style>

*{

margin: 0;

padding: 0;

font-size: 14px;


}

ul{

list-style: none;

height: 50px;

padding-left: 30px;

border-bottom: 5px solid #F60;

}

li{

float: left;

margin-top: 20px;

}

.off{

height: 30px;

line-height: 30px;

width: 120px;

background-color: #ccc;

margin-bottom: 1px;

text-align: center;

text-decoration: none;

display: block;

color: black;

margin-left: 1px;

border-radius: 15px 15px 0 0 ;


}

.off:hover{

background: #F60;

color: #fff;

}

.on{

height: 30px;

line-height: 30px;

width: 120px;

background-color: #F60;

margin-bottom: 1px;

text-align: center;

text-decoration: none;

display: block;

color: white;

border-radius: 15px 15px 0 0 ;

}

</style>

</head>

<body>

<ul>

<li><a class="on" href="#">首   页</a></li>

<li><a class="off" href="#">新闻快讯</a></li>

<li><a class="off" href="#">产品展示</a></li>

<li><a class="off" href="#">售后服务</a></li>

<li><a class="off" href="#">联系我们</a></li>

</ul>

</body>

</html>

刚修改了下，更加清晰点

0 回复 有任何疑惑可以回复我~
收起回答
慕妹5696418
2016-05-25

<ul>

<li><a class="on" href="#">首   页</a></li>

<li><a class="off" href="#">新闻快讯</a></li>

<li><a class="off" href="#">产品展示</a></li>

<li><a class="off" href="#">售后服务</a></li>

<li><a class="off" href="#">联系我们</a></li>

</ul>

记得加class

0 回复 有任何疑惑可以回复我~
收起回答
慕妹5696418
2016-05-25

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>导航菜单</title>

<style>

*{

margin: 0;

padding: 0;

font-size: 14px;


}

ul{

list-style: none;

height: 50px;

padding-left: 30px;

border-bottom: 5px solid #F60;

}

li{

float: left;

margin-top: 20px;

}

a,.off{

height: 30px;

line-height: 30px;

width: 120px;

background-color: #ccc;

margin-bottom: 1px;

text-align: center;

text-decoration: none;

display: block;

color: black;

margin-left: 1px;

border-radius: 15px 15px 0 0 ;


}

.on,a:hover{

background: #F60;

color: #fff;

}

a .on{

height: 30px;

line-height: 30px;

width: 120px;

background-color: #F60;

margin-bottom: 1px;

text-align: center;

text-decoration: none;

display: block;

color: white;

border-radius: 15px 15px 0 0 ;

}

</style>

</head>

<body>

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

</body>

</html>


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

举报

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

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

进入课程

求解 在线等

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