经典行布局练习题01实现代码，请老师帮忙审阅，有没有更好的方法实现？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>经典行布局练习001</title>
<style type="text/css" media="screen">
*{
margin: 0px;
padding: 0px;
}
.nav{
width: 1100px;
height: 100px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -550px;
}
.NavPic{
width: auto;
height: auto;
position: relative;
left: 0px;
top: 0px;
bottom: 0px;
cursor: pointer;
}
.NavText{
position: absolute;
top: 0px;
left: 450px;
width:auto;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 24px;
font-family: "黑体";
font-weight: bold;
}
.Text01,.Text02,.Text03,.Text04,.Text05{
display: inline-block;
margin: 0 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="nav">
<div class="NavPic">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="慕课网导航窗口">
</div>
<div class="NavText">
<span class="Text01">课程</span>
<span class="Text02">职业路径</span>
<span class="Text03">实战</span>
<span class="Text04">猿问</span>
<span class="Text05">手记</span>
</div>
</div>
</body>
</html>

慕斯卡3034742 2018-03-28

源自：CSS网页布局基础 2-5 经典的行布局（2）

11

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2018-03-28 10:28:01

测试了你的代码，效果是没有问题的，简便的方法可以使用浮动来实现，参考：

自己再测试下，祝学习愉快~~

慕斯卡3034742 提问者 #1

非常感谢！老师提供的这方法简单方便，看来我得多熟悉一下CSS3的各种样式

2018-03-30 00:00:30

相似问题

老师看代码经典继承不写 Student.prototype = new People()的话就不能用父类的方法，只能用属性，经典继承本身就是这样的吗

抽象类实现了接口方法，不需要写出来？？

LoginInterceptor类已经实现了接口的方法，还是报错

老师，我这个没实现，有好多问题

请教题目实现是否正确？

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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