CSS三栏式布局

最新推荐文章于 2024-05-03 15:15:35 发布

shjxa

最新推荐文章于 2024-05-03 15:15:35 发布

阅读量436

点赞数

分类专栏： web前端实践文章标签： css 布局 html

本文链接：https://blog.csdn.net/shjxa/article/details/52849869

版权

web前端实践专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务目标

掌握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;
}

图片为：