老师麻烦帮我看看代码还有没有需要修改的地方

老师麻烦帮我看看代码还有没有需要修改的地方

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-12编程练习</title>
<style type="text/css">
/* 基础样式 */
*{margin:0;padding:0}
li{list-style:none;}
a{
text-decoration: none;
font-size:20px;
color:white;
}
.container{
width:100%;
}
/* 页头 */
.header{
width:100%;
height:110px;
background:black;
}
/* logo */
.logo{
float:left;
}
.logo img{
margin-top:5px;
}
/* nav */
.nav{
float:right;
}
.nav li{
float:left;
margin-right:40px;
margin-top:10px;
}
.nav li a{
display:block;
height:90px;
line-height:90px;
}
 
/* 清除浮动 */
.clear:after{
content:".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{zoom: 1;}
 
/* 主体内容 */
.main{
width:100%;
height:600px;
background:lightblue;
overflow:hidden;
zoom: 1;
position:relative;
}
/* left */
.left{
width:35%;
height:600px;
float:left;
position:absolute;
left:100px;
top:50px;
}
/* middle */
.middle{
width:34%;
height:600px;
float:left;
position:absolute;
left:550px;
top:50px;
}
.line{
width:1%;
height:600px;
background:pink;
float:right;
position:absolute;
right:40%;
}
/* right */
.right{
width:30%;
height:600px;
float:right;
position:absolute;
top:50px;
right:80px;
}
span{
background-color:plum;
}
/* input */
input{
width:250px;
height:40px;
}
/* button */
button{
background:red;
width:250px;
height:40px;
}
/* footer */
.footer{
width:100%;
height:100px;
background:black;
text-align:center;
}
.footer li{
display:inline-block;
height:100px;
line-height: 100px;
margin-right:30px;
}
</style>
</head>
<body>
<div class="contaier">
<div class="header clear">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt="慕课网logo"/>
</div>
<ul class="nav">
<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>
</div>
<div class="main ">
<div class="left">
<h2>课程推荐</h2><br/>
<p><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p><br/>
<p><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p><br/>
<p><span>职业路径</span>&nbsp;&nbsp;iOS基础语法与常用控件</p><br/>
<p><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</p><br/>
<p><span>职业路径</span>&nbsp;&nbsp;Java入门开发</p>
</div>
<div class="middle">
<h2>相关课程</h2><br/>
<p>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</p><br/>
<p>HTML5&nbsp;&nbsp;CSS4&nbsp;&nbsp;Jquery</p><br/>
<p>移动端基础&nbsp;&nbsp;移动端APP开发</p>
</div>
<div class="line"></div>
<div class="right">
<h2>登录</h2><br/>
<input type="text" name="username" size="30"
placeholder="请输入登录邮箱/手机号"/><br/><br/>
<input type="password" name="password" size="30" maxlength="16"
placeholder="6-16位密码，区分大小写，不能用空格"/><br/><br/>
<button>登录</button>
</div>
</div>
<div class="footer">
<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>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>
慕9588112 2019-05-14
源自：CSS网页布局基础   2-12 编程练习
0
收起

正在回答

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

4回答
好帮手慕夭夭 回答被采纳获得+3积分 2019-05-15 17:39:17

你好同学，根据你修改的代码，老师这边使用多个浏览器测试，头部下面没有缝隙，如下：

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

可能是如下伪类中content设置了一个点的影响，content里面设置的内容会显示，如下去掉设置一个空字符串试一下哦，如果还有问题，你可以详细描述一下具体使用什么浏览器查看的，以便老师准确高效的帮助你解决。

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

另外，老师上面讲到的是块元素可以去掉换行。input是行内元素，它会和其他元素显示在一行，可能在小屏幕上显示会正常，但是大屏幕上面，父元素宽度有一点大，效果显示如下了：

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

这一块建议给父元素设置固定宽度，这样一行只能放下一个输入框：

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

祝学习愉快 ，望采纳。

0
收起回答
提问者 慕9588112 2019-05-15 14:32:41

修改完后页头和主页内容之间有白色的缝隙

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

0
收起回答
提问者 慕9588112 2019-05-15 14:23:30

修改完后

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-12编程练习修改</title>
<style type="text/css">
/* 基础样式 */
*{margin:0;padding:0}
li{list-style:none;}
a{
text-decoration: none;
font-size:20px;
color:white;
}
.container{
width:100%;
}
/* 页头 */
.header{
width:100%;
height:110px;
background:black;
}
/* logo */
.logo{
float:left;
}
.logo img{
margin-top:5px;
}
/* nav */
.nav{
float:right;
}
.nav li{
float:left;
}
.nav li a{
display:block;
line-height:110px;
padding:0 20px;
}
 
/* 清除浮动 */
.clear:after{
content:".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clear{zoom: 1;}
 
/* 主体内容 */
.main{
width:100%;
height:600px;
background:lightblue;
overflow:hidden;
zoom: 1;
position:relative;
}
/* left */
.left{
width:35%;
height:600px;
float:left;
}
/* middle */
.middle{
width:34%;
height:600px;
float:left;
}
/* left和middle的inner */
.inner{
margin-top:100px;
margin-left:100px;
}
.inner p{
line-height:40px;
}
.line{
width:1%;
height:600px;
background:pink;
float:right;
position:absolute;
right:35%;
}
/* right */
.right{
width:30%;
height:600px;
float:right;
}
.inner-r{
margin-top:100px;
margin-left:10px;
}
span{
background-color:plum;
}
/* input */
.inner-r h2{margin-bottom:20px;}
input{
width:250px;
height:40px;
margin-bottom:20px;
}
/* button */
button{
background:red;
width:250px;
height:40px;
}
/* footer */
.footer{
width:100%;
height:100px;
background:black;
text-align:center;
}
.footer li{
display:inline-block;
height:100px;
line-height: 100px;
margin-right:30px;
}
</style>
</head>
<body>
<div class="contaier">
<div class="header clear">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt="慕课网logo"/>
</div>
<ul class="nav">
<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>
</div>
<div class="main ">
<div class="left">
<div class="inner">
<h2>课程推荐</h2>
<p><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
<p><span>职业路径</span>&nbsp;&nbsp;iOS基础语法与常用控件</p>
<p><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</p>
<p><span>职业路径</span>&nbsp;&nbsp;Java入门开发</p>
</div>
</div>
<div class="middle">
<div class="inner">
<h2>相关课程</h2>
<p>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</p>
<p>HTML5&nbsp;&nbsp;CSS4&nbsp;&nbsp;Jquery</p>
<p>移动端基础&nbsp;&nbsp;移动端APP开发</p>
</div>  
</div>
<div class="line"></div>
<div class="right">
<div class="inner-r">
<h2>登录</h2>
<input type="text" name="username" size="30"
placeholder="请输入登录邮箱/手机号"/>
<input type="password" name="password" size="30" maxlength="16"
placeholder="6-16位密码，区分大小写，不能用空格"/>
<button>登录</button>
</div>
</div>
</div>
<div class="footer">
<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>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>


0
收起回答
好帮手慕夭夭 2019-05-15 11:07:17

你好同学，导航文字没有在header中垂直居中：

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

文字居中使用行高设置，即行高的值等于header的值即可，如下调整：

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

中间的内容不需要定位，内容如果直接使用margin设置一些间距更好：

为内容嵌套一个盒子，换行去掉，下面使用行高设置行间距

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

为这个盒子设置一点间距即可：

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

（middle和right也按照如上思路调整）

祝学习愉快 ，望采纳。

0
收起回答
  • 提问者 慕9588112 #1
    麻烦老师帮我看一下，全部修改完后这样可以吗，我发在回复里了 还有关于right的文本框的间距，删除换行 我写在css里的input下，这样设置可以吗？ 还有为什么我修改完后页头和内容之间会有白色的缝隙？
    2019-05-15 14:34:11
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

2-7练习 老师，麻烦看看我的代码有什么需要改进的
0 0 4
老师,麻烦帮帮我,找了很久也没解决的问题!
0 0 4
老师帮忙看还有需要改的吗？
0 0 6
老师，麻烦帮我看看代码还有没有要修改的
0 0 1
麻烦老师看一下代码
22 0 8

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

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码