任务目标
- 掌握HTML/CSS布局的概念
- 掌握盒模型的概念
- 掌握position与float的概念以及在布局时的用法
任务介绍为:http://ife.baidu.com/task/detail?taskId=3
[demo] https://happyshj.github.io/mygit-test_ife-task_03/task_03.html
HTML代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="task_03.css">
<title>task_03</title>
</head>
<body>
<div class="div1">
<div class="left">
<img class="last" src="03.jpg" alt="美图" />
<p>团队名称</p>
</div>
<div class="right">
<img src="03.jpg" alt="美图" />
<img src="03.jpg" alt="美图" />
<img src="03.jpg" alt="美图" />
<img class="last" src="03.jpg" alt="美图" />
</div>
<div class="mid">
<p>
任务描述
使用 HTML 与 CSS 按照 示例图(点击查看) 实现三栏式布局。
左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。
任务注意事项
尝试 position 和 float 的效果,思考它们的异同和应用场景。
注意测试不同情况,尤其是极端情况下的效果。
图片和文字内容请自行替换,尽可能体现团队的特色。
调节浏览器宽度,固定宽度和自适应宽度的效果始终符合预期。
改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中最高的高度。
其他效果图中给出的标识均被正确地实现。
任务协作建议
团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
各自完成任务实践
交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
相互讨论,最后合成一份组内最佳代码进行提交
</p>
</div>
</div>
</body>
</html>
CSS代码为:
/*{
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.div1{
background-color: #EEEEEE;
border: 1px solid #999999;
height: 100%;
margin: 20px;
padding: 20px;
overflow: auto;
}
.left{
background-color: white;
padding: 20px;
border: 1px solid #999999;
width: 200px;
float: left;
}
.left img{
width: 80px;
height: 80px;
border: 1px solid #999999;
float: left;
}
.left p{
font-weight: bold;
text-align: center;
width: 180px;
}
.mid{
background-color: white;
border: 1px solid #999999;
padding: 20px;
margin: 0 140px 0 220px;
}
.right{
background-color: white;
border: 1px solid #999999;
padding: 20px;
width: 120px;
float: right;
}
.right img{
border: 1px solid #999999;
width: 80px;
height: 80px;
margin-bottom: 20px;
}*/
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div{
margin: 0;
padding: 0;
}
.div1{
background-color: #eeeeee;
margin: 20px;
padding: 20px;
border: 1px solid #999;
overflow: auto;
min-width: 500px;
}
.left,.mid,.right{
background-color: white;
border: 1px solid #999999;
padding: 20px;
}
img{
width: 80px;
height: 80px;
border: 1px solid #999999;
margin-right: 20px;
margin-bottom: 20px;
}
.left{
float: left;
width: 200px;
}
.left img{
float: left;
}
.left p{
font-weight: bold;
margin-top: 0px;
font-size: 14px;
}
.mid{
margin: 0 140px 0 220px;
}
.right{
float: right;
width: 120px;
}
.last{
margin-bottom: 0px;
}
图片为: