老师请检查

老师请检查

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>ÎÞ±êÌâÎĵµ</title>

<!--根据效果图,写出代码,实现导航条在页面中无论是水平方向还是垂直方向都居中显示。样式要求:(1) 导航在左,导航项在右(2) 导航logo和导航项都有鼠标点击效果(3) 导航项水平和垂直方向都居中显示,每个导航项之间的距离一样。

-->

<style>

* {margin:0; padding:0;}

.nav {

width:1100px;

height:100px;

background:#333;

position:absolute;

top:50%;

margin-top:-50px;

left:50%;

margin-left:-550px;

}

.pic {

width:300px;

height:100px;

background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;

float:left;

/* clear:left;*/

}

.text ul {

float:right;

list-style:none;

color:#fff;

font: bold 18px 'Microsoft YaHei';

padding-right:20px;

}

.text ul li {

float:left;

height:100px;

line-height:100px;

margin:0 20px;

}

</style>

</head>


<body>

<div class="nav">

<div class="pic"></div>

<div class="text">

<ul>

<li>课程</li>

<li>职业路径</li>

<li>实战</li>

<li>原文</li>

<li>手记</li>

</ul>

</div>

</div>

</body>

</html>

顺便问下logo图片如果不用ps改变大小的话,用css样式可不可以把图片的左右黑色位置给消除

正在回答 回答被采纳积分+1

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

2回答
好帮手慕粉 2020-06-29 10:23:34

同学你好,老师这边测试是没有间隙的,同学是说的如下吗:

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

如果是的话,这是logo图片本身就有的,图片就是这样的哦。同学如果不想要的话,可以通过设置背景图片的位置,将图片向左移一下:

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

效果:

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

祝学习愉快~

好帮手慕粉 2020-06-27 14:02:51

同学你好,关于同学的问题回答如下:

1、代码实现的是正确的。

2、老师不太明白同学的意思呢:

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

同学可以再详细描述下呢。

祝学习愉快~

  • 提问者 慕村6371425 #1
    就是logo图片左侧有空隙,要用什么方法去除呢
    2020-06-28 19:06:25
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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