2-13编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.head{
background: red;
width: 900px;
height: 600px;
margin: 0 auto;
}
.h_left{
background: #67b581;
width: 50%;
height: 100%;
float: left;
text-align: center;
line-height: 600px;
}
.h_right{
width: 50%;
height: 100%;
float: right;
text-align: center;
line-height: 600px;
background: black;
}
.foot{
background: pink;
width: 900px;
height: 600px;
margin: 0 auto;
}
.f_left{
float: left;
width: 300px;
text-align: center;
line-height: 600px;
}
.f_mid{
float: left;
width: 300px;
text-align: center;
line-height: 600px;
}
.f_right{
float: right;
width: 300px;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="head">
<div class="h_left">
<div ><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"></div></div>
<div class="h_right"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"></div>
</div>
<div class="foot">
<div class="f_left">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
</div>
<div class="f_mid">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
</div>
<div class="f_right">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>整体感觉貌似不和要求，麻烦指正 还有（2） 图片与图片之间的距离以及图片与盒子的上下左右方向的距离是一样的 这个要求不会设置
96
收起
正在回答
2回答
你好，这个要根据图片大小和空间的大小计算好，参考代码如下（值只对第一行做了简单调整）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.head {
background: red;
width: 900px;
height: 600px;
margin: 0 auto;
}
.head img{margin-top: 193px;}
.h_left {
background: #67b581;
width: 50%;
height: 600px;
float: left;
text-align: center;
line-height: 600px;
}
.h_right {
width: 50%;
height: 100%;
float: right;
text-align: center;
line-height: 600px;
background: black;
}
.foot {
background: pink;
width: 900px;
height: 600px;
margin: 0 auto;
}
.f_left {
float: left;
width: 300px;
text-align: center;
line-height: 600px;
}
.f_mid {
float: left;
width: 300px;
text-align: center;
line-height: 600px;
}
.f_right {
float: right;
width: 300px;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="head">
<div class="h_left">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
</div>
<div class="h_right"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"></div>
</div>
<div class="foot">
<div class="f_left">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
</div>
<div class="f_mid">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
</div>
<div class="f_right">
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>希望对你有帮助，祝学习愉快。如解决你的疑惑，欢迎采纳。
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星