2-9编程练习

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列式布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Microsoft YaHei";
}
body{
width:100%;
height:auto;
}
.header{
width:100%;
height:70px;
    background-color: black;
}
img{
width:200px;
}
.logo{
float-left;
}
.nav{
float: right;
line-height: 70px;
color: #fff;
margin-right: -20px;
}
.nav span{
margin-right: 50px;
clear:both;
}
.body{
width:100%;
height:480px;
background-color: #aeeeee;
}
.body_left{
width:50%;
height:100%;
float:left;
box-sizing: border-box;
padding-top:70px;
padding-left: 20%;
}
.body_right{
width:50%;
height:100%;
float:right;
box-sizing: border-box;
padding-top:70px;
padding-left: 5%;
}
.footer{
clear:both;
width:100%;
height: 70px;
background-color: black;
}
p{
padding-top:18px;
}
.bg_pink{
background-color: pink;
margin-right: 15px;
}
.body_right span{
margin-right: 20px;
}
.footer{
text-align: center;
color: white;
}
.footer span{
line-height: 70px;
margin-right: 10px;
}
</style>
</head>
<body>
<!--     头部      -->
<div class="page">
<div class="header">
<span class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></span>
<div class="nav"><span>课程</span><span>职业路径</span><span>猿问</span><span>实战</span><span>手记</span></div>
</div>
<div class="body">
<div class="body_left">
<h2>课程推荐</h2>
<p><span class="bg_pink">职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
<p><span class="bg_pink">职业路径</span><span>零基础入门Android语法与界面</span></p>
<p><span class="bg_pink">职业路径</span><span常用控件>IOS基础语法与</span></p>
<p><span class="bg_pink">职业路径</span><span>PHP开发入门</span></p>
<p><span class="bg_pink">职业路径</span><span></span>JAV开发入门</p>
</div>
<div class="body_right">
<h2>相关课程</h2>
<p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
<p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
<p><span>移动端基础</span><span>移动端APP开发</span></p>
</div>
</div>
<div class="footer">
<span>网站首页</span>
<span>企业合作</span>
<span>人才招聘</span>
<span>联系我们</span>
<span>常见问题</span>
<span>友情链接</span>
</div>
</div>
</body>
</html>

请老师指点是否有错误或可以改进的地方

hunmix 2017-11-10

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

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-11-10 18:15:43

经测试，实现的效果没有问题！
祝学习愉快！

收起回答

北辰_yx #1

助教真的觉得没问题吗？我测试他的代码发现如下问题： 1.导航栏是固定的，页面下来，导航栏没有跟着下来； 2.同理页脚也是如此； 3.浏览器commad+0 后根部不在页面最下面，commad+ + 放大后中间内容页没有拖动效果，大小固定了；虽然有些问题，但是倒是对我有启发，我处理太复杂了，div泛滥了； TIP: 借此机会提个意见，希望每个练习题后面能有参考答案，方便改正学习;

2017-11-12 22:50:11
hunmix 提问者回复北辰_yx #2

你好～谢谢意见～不过导航栏和页脚固定的话感觉比较丑。话说3的拖动效果是什么意思，能跟我说下么～

2017-11-13 11:15:39
北辰_yx 回复提问者 hunmix #3

就是当滚动鼠标，导航栏跟着跑；当然这个练习题没有强制要求，只是我习惯将前面的学到用上来而已，你这个做的不错，给我启发挺多的

2017-11-13 20:28:33