帮忙看一下，3-2练习题哪里错了？
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
div,p{margin: 0;padding: 0;}
.main-top,.main-buttom{margin: 20px;
width: 1500px;
height: 200px;}
.main1,.main2,.main3{padding-right: 20px;
width: 250px;
height: 200px;
float: left;}
img{width: 250px;
height: 150px;}
p{border: 1px solid gray;
padding: 5px;
height: 50px;
width: 240px;
line-height: 50px;
margin-top: 0;
text-align: center;}
.main3{clear: both;}
</style>
</head>
<body >
<div class="main-top">
<div class="main1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
<div class="main-buttom">
<div class="main1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
老师，我这个是按照你上面这个程序做的，为什么没有效果。我检测了两遍还是没有发现问题。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<!-- 此处编写样式 -->
<style type="test/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 850px;
border: 1px dashed #ccc;
margin: 0 auto;
}
.first,
.second{
margin: 20px;
}
.one,
.two,
.three{
width: 250px;
height:200px;
padding: 10px;
float: left;
}
img {
width: 250px;
height: 150px;
}
p {
border: 1px solid gray;
height: 30px;
width: 250px;
line-height: 30px;
margin-top: 0;
text-align: center;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="first">
<div class="one">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="two">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="three">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
<div class="second">
<div class="one">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="two">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="three">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg" alt="" />
<p>欢迎来到慕课网学习新知识</p>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>实际看起来的效果：
你的答题思路没有问题，还是有写细节点做的不到位，比如清除浮动，不是给第三个直接写clear：both就可以了，要么用伪类来清除，要么用单独写个div来清除，方法有多种，老师在讲课的时候也讲过了清除浮动的几种方法，如果还不是很明白的话，建议再去听一下。浮动问题是最大的问题。
还有的问题是对于元素的位置如何运用padding和margin还不是很熟练，建议多加练习，没有捷径，只有练习。
根据你的思路修改了一下，但是实现方法不唯一，可以参考下面的写法：
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
div,
p {
margin: 0;
padding: 0;
}
.content {
width: 850px;
border: 1px dashed #ccc;
margin: 0 auto;
}
.main-top,
.main-buttom {
margin: 20px;
}
.main1,
.main2,
.main3 {
padding: 10px;
width: 250px;
height: 200px;
float: left;
}
img {
width: 250px;
height: 150px;
}
p {
border: 1px solid gray;
height: 30px;
width: 250px;
line-height: 30px;
margin-top: 0;
text-align: center;
}
.clear {
clear: both;
}
</style>
</head>
<body >
<div class="content">
<div class="main-top">
<div class="main1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="clear"></div>
</div>
<div class="main-buttom">
<div class="main1">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main2">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="main3">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星