麻烦老师看看有没有问题

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
 
*{
 
padding: 0;
margin: 0;
}
 
img{
 
display: block;
}
 
.head{
 
width: 100%;
height: 100px;
background: black;
position: fixed;
}
 
.tup{
 
float: left;
}
 
.wenzi{
 
font-weight: bold;
color: white;
float: right;
line-height: 100px;
word-spacing: 40px;
margin-right: 30px;
}
 
.neirong{
 
width: 100%;
height: 700px;
padding-top: 100px;
 
}
 
.left{
 
width: 50%;
height:100%;
float: left;
background: #add9e7;
}
 
.right{
 
width: 50%;
height:100%;
float: right;
background: #add9e7;
}
 
span{
 
background: #ff9999;
}
 
.zuo{
 
padding-top: 150px;
margin-left: 200px;
}
 
.you{
 
padding-top: 150px;
margin-left: 100px;
}
 
.foot{
 
width: 100%;
height: 100px;
background: black;
color: white;
font-weight: bold;
text-align: center;
line-height: 100px;
word-spacing: 50px;
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body style="overflow:scroll;overflow-y:hidden">
 
<!--头部-->
<div class="head">
<div class="tup">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo">
</div>
<p class="wenzi">课程 职业路径 实战 猿问 手记</p>
 
</div>
 
<!--内容-->
<div class="neirong">
<div class="left">
<div class="zuo">
 
<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>
<div class="right">
<div class="you">
<h2>相关课程</h2><br/>
<p>HTML&nbsp;&nbsp;CSSJavaScript</p><br/>
<p>HTML&nbsp;&nbsp;5CSS3Jquery</p><br/>
<p>移动端基础&nbsp;&nbsp;移动端APP开发</p><br/>
</div>
</div>
</div>
 
<!--底部-->
<div class="foot">
<p>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</p>
</div>
</body>
</html>

qq_sensitive_0 2018-04-28

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-04-28 15:03:47

代码实现的效果没有问题,建议可以给中间内容部分设置一个最小宽度值,并设置 overflow: hidden;,当窗口缩放至小于最小宽度,出现滚动条.布局不发生改变.溢出隐藏,思路可参考下图:

祝学习愉快!

收起回答

qq_sensitive_0 提问者 #1

这个具体是什么作用？

2018-04-28 16:35:51
妮可妮可妮_ 回复提问者 qq_sensitive_0 #2

作用就是:当窗口缩放的时候,当窗口宽度小于最小宽度时候,就会出现滚动条,实际的宽度不变,布局也就不会发生改变

2018-04-28 18:25:49
qq_sensitive_0 提问者 #3

非常感谢！

2018-04-29 11:02:37