老师,检查我的代码哪里出错误了?是不是右边定位的问题?定位了但是没效果!

老师,检查我的代码哪里出错误了?是不是右边定位的问题?定位了但是没效果!

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

*{

margin: 0;

padding:0;

}

/*此处写代码*/

.header{

   width:100%;

   height:100px;

   background-color:#FFF;

   border:1px solid #C0C0C0;

}

.header img{

   width:200px;

   height:100px;

   position:absolute;

   left:50px;

   float:left;

}

.header ul{

   float:right;

   padding-right:50px;

}

.header ul li{

   list-style-type:none;

   float:left;

   font-size:15px;

   font-weight:bold;

   width:100px;

   height:100px;

   line-height:100px;

}

</style>

</head>

<body>

<!-- 此处写代码 -->

<div class="header">

   <div>

       <img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png">

   </div>

   <div>

       <ul>

           <li>前端</li>

           <li>后端</li>

           <li>移动端</li>

           <li>数据库</li>

       </ul>

   </div>

</div>

</body>

</html>


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

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

2回答
小丸子爱吃菜 2018-03-22 18:58:58

建议你将有问题的代码发过来,这样能够重现问题所在~你所说的重影,猜测应该是都设置了定位,那么字体会重合,可以通过设置left'属性来将它们定位到不同的位置,以拉开距离。

题目要求是:http://img1.sycdn.imooc.com//climg/5ab389280001b74304730177.jpg

使用浮动去实现这样的效果就可以~代码是很灵活的,能够实现效果就可以~

这个要求的效果使用浮动实现是最合适的。而且你现在提交的代码是没有问题的。

把logo的定位去了就行

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

小丸子爱吃菜 2018-03-22 18:27:28

测试了你的代码,效果没问题

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

只是在写这个练习时,logo左侧浮动,导航项右侧浮动就可以,当然你也可以使用定位去写~
不知道你说的问题是哪方面的问题,可以详细告知下。

祝学习愉快!

  • 提问者 慕设计9545917 #1
    不好意思,老师,我语言表达没有表达清楚,是这样的,我定位右侧导航,但是输入了position:absolute;后,文字重叠了,叠在一块了,就像重影了,不知道这是怎么回事,是给这部分.header ul li这块设置定位。 我这样讲,您能看懂吗?
    2018-03-22 18:39:30
  • 提问者 慕设计9545917 #2
    给了.header ul li这块后,字体叠在一块了。是字体。因为的要求是定位右边的导航。所以我我是按任务要求来做的!
    2018-03-22 18:40:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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