5-2顶部右侧导航的问题

5-2顶部右侧导航的问题

如下图所示,当鼠标滑过导航项时每个导航项位置有明显的左右移动,这是为什么?

http://img1.sycdn.imooc.com//climg/5a4614d10001978212110037.jpg

http://img1.sycdn.imooc.com//climg/5a4614d100014b8f03070620.jpg

http://img1.sycdn.imooc.com//climg/5a4614d100018a4104420628.jpg

http://img1.sycdn.imooc.com//climg/5a4614d200012cc802790412.jpg


正在回答

登陆购买课程后可参与讨论,去登陆

4回答

你好,这里是由于鼠标移入的时候,添加了一个边框,宽高都发生了改变,所以建议:可以给原有的(就是没有hover的)也添加一个边框,颜色可与背景颜色相同,不过这里因为你设置的宽高超出了背景颜色,所以可以设置为透明,或者把边框调整下。例:

http://img1.sycdn.imooc.com//climg/5a461f1f00016f4a05020202.jpg

祝学习愉快~

提问者 慕先生3498686 2017-12-29 18:35:36

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery大作业</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="main">

<!-- 顶部 -->

<div class="header">

<!-- 登录信息 -->

<div class="loginMsg">

<a href=""><span id="login">亲,请登录</span></a>

<a href=""><span id="rege">免费注册</span></a>

<a href=""><span>手机逛慕淘</span></a>

</div>

<!-- 导航条 -->

<div class="nav">

<div class="nav-li lis">

<span>我的慕淘</span><img src="素材/icon/21.png">

<ul>

<li>已买到的宝贝</li>

<li>我的足迹</li>

</ul>

</div>

<div class="nav-li lis">

<span>收藏夹</span><img src="素材/icon/21.png">

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</div>

<div class="nav-li">

<span>商品分类</span>

</div>

<div class="nav-li lis">

<span>卖家中心</span><img src="素材/icon/21.png">

<ul>

<li>免费开店</li>

<li>已卖出的宝贝</li>

<li>出售中的宝贝</li>

<li>卖家服务市场</li>

<li>卖家培训中心</li>

<li>体验中心</li>

</ul>

</div>

<div class="nav-li lis">

<span>联系客服</span><img src="素材/icon/21.png">

<ul>

<li>消费者客服</li>

<li>卖家客服</li>

</ul>

</div>

</div>


</div>

<div class="logo"></div>

<div class="nav"></div>

<div class="banner"></div>

<div class="floor"></div>

<div class="link"></div>

<div class="footer"></div>

</div>

</body>

</html>


提问者 慕先生3498686 2017-12-29 18:34:52

/*全局*/

*{

margin: 0;

padding: 0;

}

a:link,a:visited{

text-decoration: none;

color: #000;

}

ul{

list-style: none;

}


.main{

width: 1200px;

height: auto;

margin: 0 auto;

}



/*顶部*/


.header{

width: 1200px;

height: 30px;

line-height: 32px;

font-size: 12px;

border-bottom: 1px solid #cecfd3;

background: #f3f5f7;

}

.loginMsg{

float: left;

margin-left: 20px;

}

.header span{

margin-right: 5px;

}

.header span:hover{

color: red;

cursor: pointer;

}

.nav{

float: right;

margin-right: 20px;

}

.nav-li{

float: left;

padding:0 10px;

}


.header img{

vertical-align: text-bottom;

}

.header ul{

display: none;

line-height: 2.5em;

}

.lis:hover ul{

display: block;

}

.lis:hover{

border: 1px solid #ddd;

background: #fff;

cursor: pointer;

}

.header li:hover{

color: #cdd0d4;

}


好帮手慕糖 2017-12-29 18:27:17

你好,只有图片无法确定问题,建议:可把该部分的全部代码粘贴过来,便于大家测试与解决问题。

祝学习愉快~

  • 提问者 慕先生3498686 #1
    目前只写了顶部的结构和样式
    2017-12-29 18:37:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师